0
我想创建一个使用jQuery和CSS的嵌套导航菜单。使用JQuery和CSS的嵌套菜单
目前我的导航是在xetecx.comxa.com上托管的。问题是嵌套子菜单不会像本视频中所示的正确嵌套菜单那样向主菜单右侧移动。
https://drive.google.com/file/d/0B0sCu8aj8zu2UzBxQnVlQWdzcUU/edit?usp=sharing
如果菜单上单击xetecx.comxa.com
这里是我的html
<ul>
<li>
<a href="#" title="Nav Link 1"><img src="img/main.png" /></a>
<ul>
<li>
<a href="#" title="Sub Nav Link 1">Retails</a>
<ul>
<li>
<a href="#" title="Sub Nav Link 1">R</a>
</li>
<li>
<a href="#" title="Sub Nav Link 2">S</a>
</li>
<li>
<a href="#" title="Sub Nav Link 3">A</a>
</li>
<li>
<a href="#" title="Sub Nav Link 4">C</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Sub Nav Link 2">Services</a>
</li>
<li>
<a href="#" title="Sub Nav Link 3">About Us</a>
</li>
<li>
<a href="#" title="Sub Nav Link 4">Contact Us</a>
<ul>
<li>
<a href="#" title="Sub Nav Link 1">R</a>
</li>
<li>
<a href="#" title="Sub Nav Link 2">S</a>
</li>
<li>
<a href="#" title="Sub Nav Link 3">A</a>
</li>
<li>
<a href="#" title="Sub Nav Link 4">C</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" title="Nav Link 1"><img src="img/social.png" /></a>
<ul class="social">
<li>
<a href="#" title="Sub Nav Link 1"><img src="img/facebook.png" /></a>
</li>
<li>
<a href="#" title="Sub Nav Link 2"><img src="img/twitter.png" /></a>
</li>
<li>
<a href="#" title="Sub Nav Link 3"><img src="img/linked.png" /></a>
</li>
</ul>
</li>
</ul>
和我的jQuery的
(function($) {
//cache nav
var nav = $("#topNav");
//add indicators and hovers to submenu parents
nav.find("li").each(function() {
if ($(this).find("ul").length > 0) {
$("<span>").appendTo($(this).children(":first"));
//show subnav on hover
$(this).mouseenter(function() {
var ullist = $(this).find("ul");
ullist.stop(true, true).slideDown();
ullist.addClass("ullist");
});
//hide submenus on exit
$(this).mouseleave(function() {
var ullist = $(this).find("ul");
ullist.stop(true, true).slideUp();
ullist.removeClass("ullist");
});
}
});
})(jQuery);
我试图使用CSS解决问题
nav > ul > li > a > img {
width:60px;
height:60px;
}
.social li > a > img{
width:40px;
height:40px;
}
但它没有为我工作。
的伎俩感谢这并@bala –