我在网上找到了一个响应式网站的教程,但我想将它提供的菜单更改为特定项目的子菜单下拉。当我尝试添加一个时,它正确地显示了子菜单项,但没有正确地定位它们。
代码如下:
.mainheader nav {
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul {
list-style: none;
margin: 0 auto;
}
.mainheader nav ul ul {
position: absolute;
visibility: hidden;
}
.mainheader nav ul li:hover ul {
background-color: #666;
visibility: visible;
}
.mainheader nav ul li {
float: left;
display: inline;
}
.mainheader nav a:link,
.mainheader nav a:visited {
color: #FFF;
display: inline-block;
padding: 10px 25px;
height: 20px;
}
.mainheader nav a:hover,
.mainheader nav a:active,
.mainheader nav .active a:link,
.mainheader nav .active a:visited {
background-color: #CF5C3F;
text-shadow: none;
}
.mainheader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
<header class="mainheader">
<nav>
<ul>
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
<ul>
<li><a href="#">Test</a>
</li>
<li><a href="#">Test</a>
</li>
</ul>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</nav>
</header>
这是JSFiddle。
我如何得到它,使两个测试子菜单项被定位在服务之下,居中的服务是,并在彼此之下?
添加以下内容,使<li>
元素垂直堆叠:
.mainheader nav ul ul li {
clear: both;
}
另外,默认情况下,<ul>
将被缩进。将此添加到.mainheader nav ul ul
以修复对齐:
padding: 0;
list-style-type: none;
看到这个:https://jsfiddle.net/wynLsuwa/3/。
添加以下两条规则:
.mainheader nav ul li ul {
padding: 0;
min-width: 110px;
}
.mainheader nav ul li ul li {
float: none;
display: block;
text-align: left;
}
小提琴:https://jsfiddle.net/c19hku1o/1/
我猜下面是你想要达到的效果?
注意:
.mainheader nav ul ul {
left: 0;
width: 100%;
}
:
.mainheader nav ul li {
position: relative;
}
.mainheader nav {
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul {
list-style: none;
margin: 0 auto;
}
.mainheader nav ul ul {
position: absolute;
visibility: hidden;
left: 0;
width: 100%;
}
.mainheader nav ul li:hover ul {
background-color: #666;
visibility: visible;
}
.mainheader nav ul li {
float: left;
display: inline;
position: relative;
}
.mainheader nav a:link,
.mainheader nav a:visited {
color: #FFF;
display: inline-block;
padding: 10px 25px;
height: 20px;
}
.mainheader nav a:hover,
.mainheader nav a:active,
.mainheader nav .active a:link,
.mainheader nav .active a:visited {
background-color: #CF5C3F;
text-shadow: none;
}
.mainheader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
<header class="mainheader">
<nav>
<ul>
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
<ul>
<li><a href="#">Test</a>
</li>
<li><a href="#">Test</a>
</li>
</ul>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</nav>
</header>