带子菜单的中心CSS菜单

Question

我想要一个带有子菜单的居中CSS菜单。我可以做一部分（主菜单）但我在显示子菜单时遇到问题。当我将主菜单项悬停以显示其子菜单时，问题就开始了......

* {
  font-family:arial;
}

#menu {
    height: 65px;
    background: #f3f3f3;
    text-align: center;
}

#menu ul {
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
    position: relative;
    top: 15px
}

#menu ul li {
    list-style: none;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
    display: inline;
}

#menu ul li a {
    padding: 4px 10px 6px 10px;
    border-radius: 3px;
    display: inline-block;
    color: #666;
    transition: all 0.3s;
}

#menu ul li a:hover, #menu ul li a:focus, #menu ul li a.active  {
    background: #58c071;
    color: white;
}

.submenu {
  display:none;
  position:absolute;
  top: 5px;
  width: 200px;
  background:white;
}

#menu li:hover > ul {
  display: block
}

<div id="menu" class="text-center">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Products</a>
      <ul class="submenu">
        <li><a href="">Product 1</a></li>
        <li><a href="">Product 2</a></li>
        <li><a href="">Product 3</a></li>
      </ul>
    </li>
    <li><a href="">Contact</a></li>
  </ul>
</div>

https://jsfiddle.net/e8wyp6et/1/

你有什么想法吗？

Answer 1

您必须在子菜单最近的父级position: relative;上拥有left: 0;在.submenu选择器上：

在您的问题中，它被添加到#menu ul，相对于该子菜单定位了子菜单。

#menu ul li  {
  position: relative;
}

和

.submenu {
  display:none;
  position:absolute;
  top: 5px;
  left: 0; /*this is needed to tell the submenu to align to the left of li*/
  width: 200px;
  background:white;
}

https://jsfiddle.net/Kyle_/e8wyp6et/2/

Answer 2

试试这个：

.submenu按ul .submenu为#menu ul li > .submenu position:relative li获取* { font-family:arial; } #menu { height: 65px; background: #f3f3f3; text-align: center; } #menu ul { list-style: none; text-align: center; margin: 0; padding: 0; position: relative; top: 15px } #menu ul li { list-style: none; text-align: center; margin-left: 5px; margin-right: 5px; display: inline; position: relative; } #menu ul li a { padding: 4px 10px 6px 10px; border-radius: 3px; display: inline-block; color: #666; transition: all 0.3s; } #menu ul li a:hover, #menu ul li a:focus, #menu ul li a.active { background: #58c071; color: white; } #menu ul li > .submenu { display:none; position:absolute; top: 24px; width: 200px; background:white; left:0; } #menu li:hover > ul { display: block }并<div id="menu" class="text-center"> <ul> <li><a href="">Home</a></li> <li><a href="">Products</a> <ul class="submenu"> <li><a href="">Product 1</a></li> <li><a href="">Product 2</a></li> <li><a href="">Product 3</a></li> </ul> </li> <li><a href="">Contact</a></li> </ul> </div>添加form2

form3

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
    Me.Close()
    Form2.Show()
End Sub

Answer 3

将position: relative提交至li，而不是ul

Updated code

Answer 4

您的submenu属性被覆盖，display: inline此处导致问题。

此外，您的ul li a代码正在影响li a

内的submenu

尝试使用以下代码更改：

* {
  font-family:arial;
}

#menu {
    height: 65px;
    background: #f3f3f3;
    text-align: center;
}

#menu ul {
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
    position: relative;
    top: 15px
}

#menu ul li {
    list-style: none;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: top;
}

#menu ul li a {
    padding: 4px 30px 6px 30px;
    border-radius: 3px;
    display: inline-block;
    color: #666;
    transition: all 0.3s;
}

.submenu li a {
    padding: 10px 0 !important;
}

#menu ul li a:hover, #menu ul li a:focus, #menu ul li a.active  {
    background: #58c071;
    color: white;
}

.submenu {
  display:none;
    width: 120px;
    background: white;
}

#menu li:hover > ul {
  display: block
}

<div id="menu" class="text-center">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Products</a>
      <ul class="submenu">
        <li><a href="">Product 1</a></li>
        <li><a href="">Product 2</a></li>
        <li><a href="">Product 3</a></li>
      </ul>
    </li>
    <li><a href="">Contact</a></li>
  </ul>
</div>