为水平菜单创建垂直子菜单答案

【问题标题】：Create vertical submenu for horizontal menu为水平菜单创建垂直子菜单
【发布时间】：2016-10-17 19:04:30
【问题描述】：

我在这方面花费的时间比我愿意承认的要多。我似乎无法弄清楚这一点。我正在尝试构建一些我认为非常简单的东西。我有一个水平菜单。当有人将鼠标悬停在给定链接上时，我希望子菜单是垂直的。

HTML

<nav class="secondary-navigation">
    <div class="container">
        <ul id="secondary-menu">
                <li><a href="google.com">Link 1</a>
                        <ul class="secondary-submenu">
                            <li><a href="http://www.google.com">Sub Menu 1</a></li>
                            <li><a href="http://www.google.com">Sub Menu 2</a></li>
                        </ul>
                </li>
                <li><a href="facebook.com">Link 2</a></li>
                <li><a href="google.com">Link 3</a></li>
                <li><a href="facebook.com">Link 4</a></li>
        </ul>
    </div>
</nav>

CSS

#secondary-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

#secondary-menu li {
    float: left;
    width: 25%;
}

#secondary-menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#secondary-menu li a:hover {
    background-color: #111;
}

#secondary-menu ul {
  display: none;
}

#secondary-menu li:hover > ul {
  position: relative;
  display: inline;
  width: 200px;
  height: 45px;
  position: absolute;
  margin: 40px 0 0 0;
}

#secondary-menu li:hover > ul li {
  float: none;
  width: 100%;
}

【问题讨论】：

标签： html css submenu

【解决方案1】：

去掉子菜单li上的浮动

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  float: left;
  width: 25%;
  position: relative;
}

a {
  display: block;
  background: #333;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

ul ul {
  display: none;
}

li:hover > ul {
  display: block;
  position: absolute;
  left: 0;
  top: 40px;
  right: 0;
}

li:hover > ul li {
  float: none;
  width: 100%;
}

【讨论】：

...宽度太可能了。
仍然没有骰子。这是最新的。（我更新了代码）
当我将鼠标悬停在主菜单上时，会出现子菜单，但是一旦我将鼠标移向它，它就会再次消失。所以我实际上不能在子菜单上选择任何东西。
对于 CSS 解决方案，主条目和子条目之间不能有空格...如果鼠标从一个移动到另一个，而在任何时候它应该在它们之上没事。

【解决方案2】：

我只是做一个响应式水平菜单...here 如果您不需要响应式删除所有关注容器、bar1、bar2、bar3、icon、change、@media screen 和 (max-width:680px) 和 javascript

【讨论】：