大佬教程收集整理的这篇文章主要介绍了jquery – 与另一个项目重叠下拉菜单,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我的jsfiddle条目是here : http://jsfiddle.net/ehNrE/3/
下面的所有代码(只有那些需要的代码)都在那里,我更新了@Jasper的请求……因为我不得不削减巨大的代码,所以可能会丢失一些部分
PS:在jsfiddle中单击下拉菜单时,您无法在本地系统中看到红色向下箭头作为其图像,但您只需单击箭头所在的位置即可查看效果.
原始邮政
上面的图片解释了我的问题……我的下拉菜单出现了什么问题?为什么它与我下面的入口div类重叠….有人可以建议一个补救措施吗? ……我正在使用codes from here来开发这个…我也不知道额外的空间来自哪里
我的标记HTML(下拉列表的jquery):
<div id="menu"> <ul class="topnav"> <li><a href="#">Live-Radio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Home</a></li> <li> <a href="#">Songs</a> <ul class="subnav"> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> </ul> </li> </ul> <script type="text/javascript"> $(document).ready(function(){ $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*) $("ul.topnav li span").click(function() { //When trigger is clicked... //Following events are applied to the subnav itself (moving subnav up and down) $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click $(this).parent().hover(function() { },function(){ $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav,move it back up }); //Following events are applied to the trigger (Hover events for the trigger) }).hover(function() { $(this).addClass("subhover"); //On hover over,add class "subhover" },function(){ //On Hover Out $(this).removeClass("subhover"); //On hover out,remove class "subhover" }); }); </script> </div>
我的CSS:
#menu{ float:left; height:71px; padding-top:35px; text-align: right; width: 400px; } ul.topnav { list-style: none; margin: 0; font-size: 1.2em; z-index:50; } ul.topnav li { height:100px; float: right; margin: 0; padding: 0 15px 15px 0; position: relative; /*--Declare X and Y axis base for sub navigation--*/ } ul.topnav li a{ padding: 10px 5px; color: #222; display: block; text-decoration: none; float: left; } ul.topnav li a:hover{ font-weight:bold; } ul.topnav li span { /*--Drop down trigger styles--*/ width: 17px; height: 35px; float: left; background: url(images/down.png) no-repeat center top; } ul.topnav li span.subhover {cursor: pointer;} /*--Hover effect for trigger--*/ ul.topnav li ul.subnav { list-style: none; position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/ left: 0; top: 35px; background: #333; margin: 0; padding: 0; display: none; float: left; width: 170px; border: 1px solid #111; } ul.topnav li ul.subnav li{ margin: 0; padding: 0; border-top: 1px solid #252525; /*--Create bevel effect--*/ border-bottom: 1px solid #444; /*--Create bevel effect--*/ clear: both; width: 170px; } html ul.topnav li ul.subnav li a { float: left; width: 145px; background: #333 url(dropdown_linkbg.gif) no-repeat 10px center; padding-left: 20px; } html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/ background: #222 url(dropdown_linkbg.gif) no-repeat 10px center; } .entry{ position:relative; margin:0 0 20px 0; border:2px solid #fff; background:#eee url(images/entrybg.png) repeat-x; color:#333; padding:10px 10px 0 10px; }
以下< div class =“entry”> …< / div>用Bedupako.Com上的标题创建你看到的盒子
以上是大佬教程为你收集整理的jquery – 与另一个项目重叠下拉菜单全部内容,希望文章能够帮你解决jquery – 与另一个项目重叠下拉菜单所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。