[英]multilevel dropdown menu, problem with dropdown
菜单在这里: http : //voteacnng.org
问题在于下拉列表。 这是一个WordPress生成的代码。
CSS:
.menu-tophorizontalmenu-container {
margin: 18px auto 21px;
overflow: hidden;
width: 1005px;
display: block;
}
.menu {
list-style: none;
margin: 0 auto;
padding: 0;
}
.menu * {
margin: 0;
padding: 0;
}
.menu a {
display: block;
color: #fff;
padding: 6px 16px;
background: #000;
}
.menu li {
position: relative;
float: left;
font-size: 18px;
margin: 2px 2px 0 0;
text-transform: uppercase;
}
.menu ul {
position: absolute;
top: 33px;
left: 0;
background: #000;
display: none;
list-style: none;
z-index: 999px;
}
.menu ul li {
position: relative;
display: block;
width: 257px;
margin: 0 0 2px 0;
padding: 0;
}
.menu ul li a {
display: block;
padding: 6px 16px;
color: #fff;
background: #000;
}
.menu ul li a:hover {
background: #1191B7;
color: #000;
}
.menu ul ul {
left: 257px;
top: 0;
}
.menu .menulink {
}
.menu .sub {
background: url(img/arrow-left.jpg) no-repeat 136px 8px;
}
如果我删除菜单下的幻灯片,它的工作原理。
它还有一个JavaScript:
function mainmenu(){$(" #menu-tophorizontalmenu ul ").css({display: "none"}); // Opera Fix $(" #menu-tophorizontalmenu li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});} $(document).ready(function(){
mainmenu();});
另一个问题是箭头......箭头需要显示儿童菜单的位置。
有任何想法吗?
visibility: "visible",display: "none"
这可能与自相矛盾。 尝试使用display:none;
当你想要隐藏和display:block;
什么时候想表演。
由于jQuery返回以下错误,因此很难将其与您的代码相关联:
选择器没有找到任何元素:“ul:first”
更新(格林尼治标准时间11:07):
我在这个例子中使用了以下额外的HTML和jQuery - 检查jsfiddle
HTML:
<div class="menu-tophorizontalmenu-container">
<ul id="menu-tophorizontalmenu" class="menu">
<li id="menu-item-36" class="menu-item menu-item-type-custom menu-item-home menu-item-36">
<a href="http://voteacnng.org">Homepage</a>
<div style="display:none;">
<p>I am a</p>
<p>menu item</p>
<p>can you see?</p>
</div>
</li>
// Other menu items
<li>...</li>
</ul>
</div>
jQuery的:
$("#menu-item-36").hover(function(){
$("#menu-item-36").find("div").attr('style', 'display:block;');
$(this).mouseout(function(){
$("#menu-item-36").find("div").attr('style', 'display:none;');
});
});
我必须使用<div />
和<p />
因为你的CSS中有些内容没有显示<ul />
s你应该尝试使用它作为一个开始,但要整理你的HTML和CSS所以你可以使用<ul>
和<li>
正确标记它。
希望这可以帮助。
对于箭头
$("#menu-tophorizontalmenu ul").closest('li').find('a').prepend('>>');
现在的情况:
Arrows的工作得益于@experimentX,我们为@Alex Thomas提供了下拉列表的解决方案。
我发现了一件事。 有以下课程:
.TopHorizontalMenu {
margin: 18px auto 21px;
overflow: hidden;
width: 1005px;
display: block;
}
如果我删除overflow
,将工作下拉列表,但幻灯片将移动到页面的右上方。 我想为此我需要替代方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.