我的菜单中有一些CSS的东西

我正在努力使我的网站的菜单栏更适合移动设备。。 我现在有它，所以它会缩小到一个小点击打开，下拉菜单，显示我的链接到其他页面

我发现的第一个问题是我的菜单比屏幕长，我无法滚动显示其余的内容，所以我环顾四周，现在解决了这个问题，但创建了另一个

所发生的是，我可以打开菜单，选择项目，并按预期滚动菜单内。。但是，当我再次单击菜单按钮时，为了再次隐藏菜单，链接会“从视线中消失”，但它会留下菜单的背景

@media (max-width: 767px) {
.scroll-to-top {
    display: none;
}
.show-menu {
    display: block !important;
    visibility: visible !important;
    position: fixed;
    width: 100%;
    height: 300px;
    z-index: 999;
    overflow-y: scroll;
    -webkit-transform: translate3d(0,0,0);
    -webkit-overflow-scrolling: touch;
}}

我很难让滚动菜单工作，但最后，我发现添加“height:xx；”部分解决了这个问题

我对这些东西不是很了解，但是试着从编辑现有的例子中学习

有人能看到明显的东西吗

[已解决] 2. （菜单与之前相同。）

我昨晚在我的网站上发现了以下内容：

@media (min-width: 768px) {.dropdown-menu li:hover .menu {visibility: visible;}}
@media (min-width: 768px) {.dropdown:hover .dropdown-menu {display: block;}}

我相信这会让我的菜单点击显示，而当你在移动设备上查看网站时，它们通常会悬停在上面

我想添加一个与此相反的附加语句，因此如果单击打开的菜单，它将再次关闭

---

3. （同一菜单）

我在我的网站上使用的主题的构建方式，使第三级菜单项在第二级链接下方显示为项目符号列表

我想改变这一点，使第三级链接也，不显示为一个列表，而是有自己的菜单，以及退出

echo '
<div id="menu">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">    
        <div class="container">
            <div class="row">
                <ul class="nav navbar-nav">';

        foreach ($context['menu_buttons'] as $act => $button)
        {
            echo '
                    <li id="button_', $act, '" class="', $button['active_button'] ? 'active ' : '', '', !empty($button['sub_buttons']) ? 'dropdown' : '', '">
                        <a ', !empty($button['sub_buttons']) ? 'class="dropdown-toggle"' : '', ' href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
                            ', !empty($modSettings['smi_enable']) ? '<img style="vertical-align: middle;" src="'. $settings['default_images_url']. '/smi/'. $act. '.png" alt="'. $button['title']. '" title="'. $button['title']. '"/>&nbsp;' : '', '', $button['title'], '', !empty($button['sub_buttons']) ? ' <span class="caret"></span>' : '' ,'
                        </a>';
            if (!empty($button['sub_buttons']))
            {
                echo '
                        <ul class="dropdown-menu" role="menu">';

                foreach ($button['sub_buttons'] as $childact => $childbutton)
                {
                    echo '
                            <li>
                                <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
                                    <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', !empty($modSettings['smi_enable']) ? '<img style="vertical-align: middle;" src="'. $settings['default_images_url']. '/smi/'. $childact. '.png" alt="'. $childbutton['title']. '" title="'. $childbutton['title']. '"/>&nbsp;' : '', '', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
                                </a>';
                    // 3rd level menus :)
                    if (!empty($childbutton['sub_buttons']))
                    {
                        echo '
                                <ul>';

                        foreach ($childbutton['sub_buttons'] as $grandchildbutton)
                            echo '
                                    <li>
                                        <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
                                            <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
                                        </a>
                                    </li>';

                        echo '
                                </ul>';
                    }

                    echo '
                            </li>';
                }
                    echo '
                        </ul>';
            }
            echo '
                    </li>';
        }

        echo '
                </ul>
            </div>
        </div>
    </div>
</div>';

echo'
；
foreach（$context['menu_buttons']作为$act=>$button）
{
回声'

';
如果（！空（$button['sub_buttons']））
{
回声'
；
foreach（$button['sub_button']作为$childact=>$childbutton）
{
回声'

';
//第三级菜单：）
如果（！空（$childbutton['sub_buttons']））
{
回声'
”；
foreach（$childbutton['sub_buttons']作为$Button）
回声'

'；
回声'
'；
}
回声'
'；
}
回声'
'；
}
回声'
'；
}
回声'

';

}

就像我之前提到的，我对这些东西真的不太了解，但我相信上面的代码构造了菜单

感谢您的帮助，如果需要，我可以提供更多代码块/链接！：）

非常感谢

2: 您需要在脚本标记下添加此jquery代码：

if(screen.width<=768){
$('.dropdown').on('click',function(){
    $('.dropdown-menu').toggle();
});
}

---

注意：我在这些列表项中使用了click事件，因此我应该使用锚href=“#”。如果你想让它们在悬停时出现，你应该像第二期一样使用CSS。

你能添加一个JSFIDLE链接，让我们更好地了解问题是什么吗？谢谢，就像我说的，我对这些东西不是很了解，我甚至不确定“jsfiddle”（只是查了一下：P）的哪些部分是我的现场站点，可能是理解这个问题的最好方式。。（将浏览器窗口设置为非常小，然后打开和关闭菜单）找出与您相关的代码是什么，我们所能看到的只是加载页面后的代码以及浏览器如何呈现它。如果你想让我们做这件事，如果你能让我们的工作更轻松一点，这会很有帮助。

@media（max width:767px）

，你需要在.show menu类中更改高度：300px，最大高度：300px，这个菜单工作得非常好。对不起，我似乎无法在其中“放入jsfiddle想要的内容”来显示我的站点非常感谢@ayadibaha-这非常有效！：D~这让我快发疯了！我还有一件事想改变一下菜单，我应该另定一个话题吗？

echo '
<div id="menu">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">    
        <div class="container">
            <div class="row">
                <ul class="nav navbar-nav">';

        foreach ($context['menu_buttons'] as $act => $button)
        {
            echo '
                    <li id="button_', $act, '" class="', $button['active_button'] ? 'active ' : '', '', !empty($button['sub_buttons']) ? 'dropdown' : '', '">
                        <a ', !empty($button['sub_buttons']) ? 'class="dropdown-toggle"' : '', ' href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
                            ', !empty($modSettings['smi_enable']) ? '<img style="vertical-align: middle;" src="'. $settings['default_images_url']. '/smi/'. $act. '.png" alt="'. $button['title']. '" title="'. $button['title']. '"/>&nbsp;' : '', '', $button['title'], '', !empty($button['sub_buttons']) ? ' <span class="caret"></span>' : '' ,'
                        </a>';
            if (!empty($button['sub_buttons']))
            {
                echo '
                        <ul class="dropdown-menu" role="menu">';

                foreach ($button['sub_buttons'] as $childact => $childbutton)
                {
                    echo '
                            <li>
                                <a ', !empty($childbutton['sub_buttons']) ? 'class="dropdown-toggle1"' : '',' href="#"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
                                    <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', !empty($modSettings['smi_enable']) ? '<img style="vertical-align: middle;" src="'. $settings['default_images_url']. '/smi/'. $childact. '.png" alt="'. $childbutton['title']. '" title="'. $childbutton['title']. '"/>&nbsp;' : '', '', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
                                </a>';
                    // 3rd level menus :)
                    if (!empty($childbutton['sub_buttons']))
                    {
                        echo '
                                <ul class="dropdown-menu1" role="menu" style="display:none;position:relative;border:none;box-shadow:none;">';

                        foreach ($childbutton['sub_buttons'] as $grandchildbutton)
                            echo '
                                    <li>
                                        <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
                                            <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
                                        </a>
                                    </li>';

                        echo '
                                </ul>';
                    }

                    echo '
                            </li>';
                }
                    echo '
                        </ul>';
            }
            echo '
                    </li>';
        }

        echo '
                </ul>
            </div>
        </div>
    </div>
</div>';

$('.dropdown-toggle1').on('click',function(){
        $('.dropdown-menu1').toggle();
    });