Css下拉导航栏问题

时间:2015-12-26 16:27:40

标签: html css drop-down-menu

我正在制作一个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;
}

2 个答案:

答案 0 :(得分:2)

第一个错误是,总是将锚标签放在li标签内 第二个错误是下拉使用ul&gt; li> a和than,在关闭li之前和关闭锚标记之后启动子ul

并且为了正确点击,我已经在带有显示内联块属性的锚标记上添加了填充。

我已经更新了小提琴,我想你想要这样的东西试试这个,希望代码能帮助你。

&#13;
&#13;
.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;
&#13;
&#13;

答案 1 :(得分:1)

您的“商品”条目中有 2 个链接,这太多了:

<a href="#"><li><a href="#">Products</a>

只需删除一个。

关于下拉列表的位置:添加

.navbar ul li { left: -8px; }