帶有子菜單的居中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得到您的CSS 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> 

Answer 3

給出position: relative對於li而不是ul

更新的代碼

Answer 4

您的submenu屬性已被覆蓋， display: inline在此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>