我有一个菜单结构,它应该在翻转时突出显示每个项目,然后一些菜单项在单击时向下扩展到下拉菜单。行为没问题,但问题是这样。
在<li class="dropdown">
中,a:标签的样式覆盖了我指定的任何内容。即使我的风格随后出现。
我可以“强迫”它使用放在每个元素上的“!important”标志,但我真的不想走那条路。单击下拉菜单中的某个父菜单项时,'subnav'类是应该可见的样式。如果基本的超链接锚值始终强制覆盖它,我怎样才能使subnav类正确显示?
这使用jQuery 1.3
脚本:
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown a').click(function () {
$(this).addClass("subhover");
});
$("ul.topnav li a").click(function () {
$(this).parent().find("ul.subnav").slideDown('fast').show();
$(this).parent().hover(function () {
}, function () {
$(this).parent().find("ul.subnav").slideUp('fast');
$(this).parent().find("a").removeClass("subhover");
});
});
});
</script>
HTML:
<div id="membership">
<div class="container">
<div class="container-inner">
<ul id="options" class="topnav">
<li><a href="#">Mail</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
<li class="dropdown">
<a href="#">Membership</a>
<ul class="subnav">
<li>Item</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
CSS:
#membership {
font-size: 11px;
font-weight: bold;
height: 41px;
font-family: Tahoma;
color: #fff;
position: relative;
}
#membership .container-inner {
border-color: #1D4088 #1D4088;
border-style: solid solid none;
font-size: 11px;
height: 30px;
margin-left: 180px;
padding-left: 10px;
padding-right: 6px;
position: relative;
top: 10px;
}
#membership a {
color: #FFFFFF;
display: inline-block;
font-weight: bold;
height: 22px;
padding: 8px 16px 0;
text-decoration: none;
border-color: transparent;
border-style: solid;
border-width: 1px 1px 0px 1px;
}
#membership a:hover, #membership a:focus{
outline:medium none;
}
#membership ul {
list-style-type: none;
}
#membership ul li {
padding: 0 3px 0 5px;
}
#membership ul li.active, #membership ul li.active a {
}
#membership #options {
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
}
#membership #options li {
float: left;
}
#membership .dropdown {
float: right;
position: relative;
}
#membership .dropdown ul
{
background: none repeat scroll 0 0 #FFFFFF;
border-color: #333333 #333333 #333333;
border-style: solid;
border-width: 1px 2px 2px;
display: none;
margin-right: 2px;
margin-top: -1px;
min-width: 200px;
padding: 10px 0 5px;
position: absolute;
right: 0;
top: 100%;
}
#membership .dropdown a {
border-color: transparent;
border-style: solid;
border-width: 1px 1px 0px 1px;
height: 22px;
position: relative;
display: inline-block;
font-weight: bold;
height: 22px;
padding: 8px 16px 0;
text-decoration: none;
}
.subhover{
background-color: #FFFFFF;
color: #333333;
border-color: #333333 #333333 #333333;
border-style: solid;
border-width: 1px 1px 0px 1px;
height: 22px;
position: relative;
padding-right: 16px;
}
答案 0 :(得分:2)
应用于“#membership a”的样式正确级联到子<a>
元素。要防止这种情况,请删除您不想从中进行级联的任何样式,或者如果您不想应用任何样式,请为其命名,如下所示:#membership a.whatever“。
答案 1 :(得分:2)
我开始发现问题,“#membership .dropdown a
”取代.subnav
元素上的“<A>
”,除非您将该类指定为“a.subnav
”。< / p>
答案 2 :(得分:0)
问题是#id-definitions比.class-definitions更重要。但是!重要的定义更为重要: - )
在不应覆盖的样式定义中添加!important。例如:
.subhover{
background-color: #FFFFFF !important;
color: #333333 !important;
border-color: #333333 #333333 #333333 !important;
border-style: solid !important;
border-width: 1px 1px 0px 1px !important;
height: 22px !important;
position: relative !important;
padding-right: 16px !important;
}
编辑:ja,我知道它看起来不太好:&amp;