导航栏上的下拉菜单

Question

我想在此导航菜单上做一些下拉菜单，但是它不起作用，我也想居中。 我尝试使用display：inline; 命令，但没有帮助。

https://jsfiddle.net/fLdasLv4/

 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: absolute; left: 0%; top: 0%; width: 100%; height: 8%; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 20px 25px; text-decoration: none; font-size: 100%; font-family:Lucida Sans Unicode; } li a:hover { background-color: #111; } li a:active{ background-color: grey; } ul li:hover > ul { display:block } 

 <ul> <li><a class="active" href="#home" font size="16">Home</a></li> <li><a class="kaires" href="#news">Dropd</a></li> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> <li><a href="#about">Something</a></li> <li><a href="#about">Contact us</a></li> </ul> 

Answer 1

可以做这样的事情吗？

使用flexbox将其居中，然后先隐藏子菜单

ul li ul {
  display: none;
}

悬停时，菜单显示子菜单使用：

/* Sub menu item */
ul li ul li {
  width: 100%;
  display: block;
}

/* Show Sub menu on hover */
ul li:hover > ul {
  position: absolute;
  display: block;
  background: green;
  width: 30%; /* Sub menu width */
}

 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; width: 100%; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 20px 25px; text-decoration: none; font-size: 100%; font-family: Lucida Sans Unicode; } li a:hover { background-color: #111; } li a:active { background-color: grey; } ul li ul { display: none; } /* Sub menu item */ ul li ul li { width: 100%; display: block; } /* Show Sub menu on hover */ ul li:hover > ul { position: absolute; display: block; background: green; width: 30%; /* Sub menu width */ } .container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } 

 <ul class="container"> <li><a class="active" href="#home" font size="16">Home</a></li> <li><a class="kaires" href="#news">Dropd</a> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </li> <li><a href="#about">Something</a></li> <li><a href="#about">Contact us</a></li> </ul> 

Answer 2

首先，子菜单的html标记未正确完成。 另外，如果要显示子菜单，也不能在主容器上溢出。 您可以使用flebox将导航栏居中，而无需更改标记或编写更多代码。 请参阅下面的示例。

 nav {} ul { display: flex; justify-content: center; list-style-type: none; margin: 0; padding: 0; /** overflow: hidden; Removed this(this wouldn't allow the submenu show) **/ background-color: #333; position: absolute; /**left: 0%; **/ top: 0%; width: 100%; /** height: 8%;Removed This**/ } ul ul { top: 100%; display: block; height: auto; visibility: hidden; } li { /** float: left; **/ position: relative; } li a { display: block; color: white; text-align: center; padding: 20px 25px; text-decoration: none; font-size: 100%; font-family:Lucida Sans Unicode; } li a:hover { background-color: #111; } li a:active{ background-color: grey; } ul li:hover > ul { display:block; visibility: visible; } li > ul li { float: none; } 

 <ul> <li><a class="active" href="#home" font size="16">Home</a></li> <li><a class="kaires" href="#news">Dropd</a> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </li> <li><a href="#about">Something</a></li> <li><a href="#about">Contact us</a></li> </ul>