Html 使响应菜单更加用户友好

我有一个超级菜单，它在响应模式下对我来说很好，但我想让它在响应模式下更方便用户，因为它在下降时会占用很多空间

以下是我正在使用的代码：

HTML:

<div id="menu-wrapper">
    <ul class="nav">
        <li>
            <a href='#'>Brands</a>
            <div>
                <div class="nav-column">
                    <ul>
                        <li><a href="index.php?brands=1">Siemens</a></li>
                        <li><a href="index.php?brands=2">KSB</a></li>
                        <li><a href="index.php?brands=3">Dadex</a></li>
                        <li><a href="index.php?brands=4">Hyundai</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li>
            <a href='#'>Products</a>
            <div>
                <div class="nav-column">
                    <h3>Automation</h3>
                    <ul>
                        <li><a href="index.php?stypes=1">Logo!</a></li>
                        <li><a href="index.php?stypes=2">Simatic-S7-200</a></li>
                        <li><a href="index.php?stypes=3">Simatic-S7-400</a></li>
                        <li><a href="index.php?stypes=4">Simatic-S7-1200</a></li>
                        <li><a href="index.php?stypes=5">HMI</a></li>
                    </ul>
                </div>
                <div class="nav-column">
                    <h3>Pumps</h3>
                    <ul>
                        <li><a href="index.php?products=7">Etanorm</a></li>
                        <li><a href="index.php?products=8">KWP</a></li>
                        <li><a href="index.php?products=9">ZORO</a></li>
                        <li><a href="index.php?products=10">DWT</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li><a href="#">About ME</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact US</a></li>
    </ul>
</div>

我想要实现的是，当用户单击产品时，产品下的所有

都会显示，只有
会显示所有产品。然后，当用户单击一个
标签时，只显示相应的
ul

这是一把小提琴，展示了我迄今为止所做的尝试：

我创建了一个简单的jQuery代码，可以解决您的问题

脚本：

 $('#menu-wrapper div.nav-column h3').hover(
    function(){
        $(this).parent().siblings().find('ul').css("display","none");
    },
    function(){
        $(this).parent().siblings().find('ul').css("display","");
    }
 );

这是工作票

**更新：**

用不同的要求更新了答案

请检查更新的

这只适用于纯CSS

我刚刚稍微修改了原始的层次结构。
（在类中转换为
h3
，并将标记替换为
div class=“h3”
）

成功了

**更新：**

删除响应性

选中此项，如果屏幕大小小于480px，则此项不会更改。您能做一个吗？@Mave这是小提琴，调整结果框的大小，直到您得到它为止responsive@taposoka1你小提琴上的记号无效。您缺少一个结束符
div
标记。@Mave现在检查一下@MarmiK创建的原始小提琴缺少一个结束符。将其粘贴到您选择的编辑器中，但它丢失了。在最新版本的fiddle中，我已经修复了它，但在这里检查第一个版本，您将看到缺少的标记Thanx，但我真正想要的是当有人悬停在产品上时，所有的内容都会立即显示出来，然后当用户悬停在产品上时，所需的
就会展开。我的问题摘录将更好的帮助u“我想实现的是，当用户单击产品
时，产品
下的所有内容都会显示出来，而当用户单击标签时，只会显示相应的ul。”是的，它可以工作，但只是在响应模式下，当屏幕在桌面模式下缩小到480px以下时，我不想要那个东西：）如何摆脱它使结果面板变大，你将了解问题我已经更新了Fiddle 3现在这是我的最后更新：D我现在不打算进一步帮助
 $('#menu-wrapper div.nav-column h3').hover(
    function(){
        $(this).parent().siblings().find('ul').css("display","none");
    },
    function(){
        $(this).parent().siblings().find('ul').css("display","");
    }
 );