我想在此导航菜单上做一些下拉菜单,但它不起作用,而且我想将其居中。我尝试使用 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>
最佳答案
可以做这样的事情吗?
使用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>
关于html - 导航栏下拉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43986013/