我正在制作一个css导航栏下拉列表,并且遇到了一些问题。我不是css中最有经验的人,所以一点帮助都会受到赞赏。 产品文本不会改变颜色,就像其他文本一样,您只能单击产品文本框。 此外,下拉菜单也不与产品包装盒水平对齐。
以下是jsfiddle的链接: https://jsfiddle.net/epp0zmd6/
代码(HTML):
<div class="navbar">
<ul>
<a href="#"><li class="active">Homepage</li></a>
<a href="#"><li>Contact Us</li></a>
<a href="#"><li>Web Learning Platform</li></a>
<a href="#"><li><a href="#">Products</a>
<ul>
<a href="#"><li>Requirement Extraction & Analysis</li></a>
<a href="#"><li>Early Deduction Modelling & Analysis</li></a>
</ul>
</li></a>
</ul>
</div>
代码(CSS):
.navbar ul {
display: inline-table;
vertical-align: middle;
list-style: none;
position: relative;
}
.navbar ul:after {
content: "";
clear: both;
display: block;
}
.navbar ul ul {
display: none;
border-radius: 0;
padding: 0;
position: absolute;
top: 100%;
}
.navbar ul ul li {
float: none;
position: relative;
}
.navbar ul li:hover > ul {
display: block;
}
.navbar ul li {
background-color: #0A6CA3;
display: inline-block;
vertical-align: middle;
font-family: SinkinSans;
font-size: 20px;
padding-top: 27px;
padding-bottom: 21px;
padding-left: 10px;
padding-right: 10px;
color: #FFFFFF;
transition: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
margin-left: -2px;
margin-right: -2px;
float: left;
}
.navbar ul li:hover {
background-color: #FFFFFF;
color: #00A3FF;
}
.navbar ul a {
text-decoration: none;
}
.navbar ul a:visited {
color: #FFFFFF;
}
.navbar ul a:hover {
color: #00A3FF;
}
.navbar ul .active {
background-color: #FFFFFF;
color: #00A3FF;
}
答案 0 :(得分:2)
第一个错误是,总是将锚标签放在li标签内 第二个错误是下拉使用ul&gt; li> a和than,在关闭li之前和关闭锚标记之后启动子ul
并且为了正确点击,我已经在带有显示内联块属性的锚标记上添加了填充。
我已经更新了小提琴,我想你想要这样的东西试试这个,希望代码能帮助你。
.navbar ul {
display: inline-table;
vertical-align: middle;
list-style: none;
position: relative;
}
.navbar ul:after {
content: "";
clear: both;
display: block;
}
.navbar ul ul {
display: none;
border-radius: 0;
padding: 0;
position: absolute;
top: 100%;
}
.navbar ul li:hover > ul {
display: block;
}
.navbar ul li {
display: inline-block;
margin-left: -2px;
margin-right: -2px;
float: left;
}
.navbar ul li >a{
padding-top: 27px;
padding-bottom: 21px;
padding-left: 10px;
padding-right: 10px;
display:inline-block;
color:#fff;
text-decoration: none;
background-color: #0A6CA3;vertical-align: middle;
font-family: SinkinSans;
font-size: 20px;
transition: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
}
.navbar ul li:hover >a,
.navbar ul li.active >a{
background-color: #FFFFFF;
text-decoration: none;
color: #00A3FF;
}
&#13;
<div class="navbar">
<ul>
<li class="active"><a href="">Homepage</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Web Learning Platform</a></li>
<li><a href="">Products</a>
<ul>
<li><a href="">Requirement Extraction & Analysis</a></li>
<li><a href="">Early Deduction Modelling & Analysis</a></li>
</ul>
</li>
</ul>
</div>
&#13;
答案 1 :(得分:1)
您的“商品”条目中有 2 个链接,这太多了:
<a href="#"><li><a href="#">Products</a>
等
只需删除一个。
关于下拉列表的位置:添加
.navbar ul li { left: -8px; }