Question

我想要菜单和子菜单都在水平。这是我在横向尝试主菜单的代码。当我将mainmenu我想要 submenu时也是横向的。

任何团体都知道如何解决这个问题

感谢任何帮助。

Answer 1

添加position:absolute：

<强> CSS

ul li ul{
    display: none;
    position: absolute; /*Add this */
}

fiddle

如果您想要左对齐，请添加left:8px：

ul li ul{
    display: none;
    position: absolute;
    left:8px; /* Add this too for left align*/
}

fiddle

Answer 2

试试这个解决方案：

**HTML:**

<ul id="level-1">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Products</a>
<ul id="level-2">
<li><a href="#">Laptops</a></li>
<li><a href="#">Monitors</a></li>
<li><a href="#">Printers</a></li>
</ul>
</li>
</ul>

**CSS:**


 ul{
    padding: 0;
    list-style: none;
}
ul#level-1 > li{
    float: left;
    width: 100px;
    text-align: center;
}
ul li a{
    display: block;
    padding: 5px 10px;
    color: #333;
    background: #f2f2f2;
    text-decoration: none;
}
ul li a:hover{
    color: #fff;
    background: #939393;
}
ul li ul{
    display: none;
}
ul li:hover ul{
    display: inline-flex;
    width: auto;/* display the dropdown */
}

ul li:hover ul#level-2 li{
    float: left;
    display: inline-block;
}

Answer 3

试试这个： JSFIDDLE 基本上，您需要使用绝对定位来获取辅助菜单并将其直接放在主菜单下方。

ul li ul li{
  display: inline-block;
  width: 100px;
  text-align: center;
}
ul li ul li a{
  display: block;
  padding: 5px 10px;
  color: white;
  background: blue;
  text-decoration: none;
}
ul li ul{
  display: none;
  width: 300px;
  position: absolute;
  left: 0;
  margin-left: 8px;
}

尝试将菜单和子菜单设置为水平

3 个答案: