我知道这里有很多这样的问题,但我真的不知道我的代码不起作用的原因。我正在尝试在单击链接时进行主动导航,我需要它是白色的。
这是演示。JS-小提琴
<div id="language" class="dropdown">
<a href="#language" class="dropdown-toggle">Spēlē.lv</a>
<ul class="dropdown-menu">
<li class="option"><a href="#"><img src="../TV3_Latvia_logo.png" width="60" height="60"></a></li>
</ul>
.dropdown {
float:left;
position:relative;
padding:5px;
margin-right:10px;
background:#ccc;
}
.dropdown a:hover {
display:block;
text-decoration:none;
color:#000;
background:#fff;
}
.dropdown a {
display:block;
text-decoration:none;
color:#333;
}
/* toggle */
.dropdown .dropdown-toggle {
padding:0;
}
/* dropdown */
.dropdown-menu {
position:absolute;
top:100%;
right:0;
left:0;
display:none;
margin:0;
padding:10px;
list-style-type:none;
background:#FFF;
width:500px;
-webkit-box-shadow: 0px 0px 20px -4px #cacaca;
-moz-box-shadow: 0px 0px 20px -4px #cacaca;
box-shadow: 0px 0px 20px -4px #cacaca;
}
/* options */
.dropdown-menu .option a {
padding:5px;
float:left;
}
.dropdown-menu .option a:hover {
background-color:#999;
}
/* open */
.dropdown-open {
z-index:400;
}
.dropdown-open > .dropdown-menu {
display:block;
}
请参阅此处更新的 JS-fiddle。
您需要将.dropdown a:hover
更改为.dropdown:hover
。 这么简单。