居中的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的.submenu通过#menu ul li > .submenu得到您的ul目标的CSS并添加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>

Answer 3

给position: relative到li而不是ul

Updated code

Answer 4

你submenu PROPERT我们正在被覆盖，而这里正在造成麻烦。

而且你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>