关于CSS菜单的问题
0
悬赏园豆：50
[待解决问题]
第一次鼠标移到根菜单上再移到二级菜单上，三级菜单正常显示。
但是，第二次把鼠标移到根菜单的时候弹出的二级菜单包括了刚才三级菜单（此时鼠标在根菜单上，没有字）
下面是css代码
ul#navmenu-h { margin: 0; padding: 0; list-style: none; position: relative; } ul#navmenu-h ul { width: 160px; /* Sub Menu Width */ margin: 0; list-style: none; display: none; position: absolute; top: 100%; left: 0; } .menu_l{float:left;background:url(~/app_themes/default/images/menu/menu_l.gif) no-repeat;height:31px;width:12px;} .menu_r{float:right;background:url(~/app_themes/default/images/menu/menu_r.gif) no-repeat;height:31px;width:7px;} .fgcss{ float:none; margin-top:6px; width:2px; text-align:center;} ul#navmenu-h ul ul,ul#navmenu-h ul ul ul { top: 0; left: 100%; } ul#navmenu-h li { float: left; display: inline; position: relative; } ul#navmenu-h ul li { width: 100%; display: block; } /* ul#navmenu-h li ul{margin-left: -40px;} */ /* ul#navmenu-h li ul ul {margin-left: -40px;} */ /* ul#navmenu-h li ul ul ul {margin-left: -40px;} */ /* Root Menu */ ul#navmenu-h a { border-top: 0px solid #FFF; border-right: 0px solid #FFF; padding: 9px; padding-left:15px; padding-right:15px; float: left; display: block; color: #666; font: 12px 宋体,Arial, sans-serif; text-decoration: none; height: 1%; } /* Root Menu Hover Persistence */ ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a { border-top: 1px solid #FFF; border-right: 1px solid #FFF; padding: 8px; padding-left:15px; padding-right:14px; float: left; display: block; color: #FFFFFF; font: 12px 宋体,Arial, sans-serif; text-decoration: none; height: 1%; background: #49ABFC; } /* 2nd Menu */ ul#navmenu-h li:hover li a,ul#navmenu-h li.iehover li a { float: none; background: #C9DCF8; color: #000000; border-top: 1px solid #8CB5F0; border-right: 1px solid #8CB5F0; } /* 2nd Menu Hover Persistence */ ul#navmenu-h li:hover li a:hover,ul#navmenu-h li:hover li:hover a,ul#navmenu-h li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover a { color: #FFF; background: #49ABFC; } /* 3rd Menu */ ul#navmenu-h li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li a { background:#D6E4FA; color: #000000; border-top: 1px solid #9FC0F2; border-right: 1px solid #9FC0F2; } /* 3rd Menu Hover Persistence */ ul#navmenu-h li:hover li:hover li a:hover,ul#navmenu-h li:hover li:hover li:hover a,ul#navmenu-h li.iehover li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover a { color: #FFF; background: #49ABFC; } /* 4th Menu */ ul#navmenu-h li:hover li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li.iehover li a { float: none; background: #E2EDFC; color: #000000; border-top: 1px solid #ACC9F4; border-right: 1px solid #ACC9F4; } /* 4th Menu Hover */ ul#navmenu-h li:hover li:hover li:hover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover li a:hover { color: #FFF; background: #49ABFC; } /* Hover Function - Do Not Move */ ul#navmenu-h li:hover ul ul,ul#navmenu-h li:hover ul ul ul,ul#navmenu-h li.iehover ul ul,ul#navmenu-h li.iehover ul ul ul { display: none; } ul#navmenu-h li:hover ul,ul#navmenu-h ul li:hover ul,ul#navmenu-h ul ul li:hover ul,ul#navmenu-h li.iehover ul,ul#navmenu-h ul li.iehover ul,ul#navmenu-h ul ul li.iehover ul { display: block; }
还有Jquery代码
$(document).ready(function(){ $("#navmenu-h li,#navmenu-v li").hover( function() { $(this).addClass("iehover"); }, function() { $(this).removeClass("iehover"); } ); });
所有回答(5)
0
用插件吧，比你的效果好很多
楼主搜索：jquery手风琴
0
路过帮顶一下，楼主用插件吧，jquery的方便
0
用chrome查看下这个li下面的元素是否隐藏了或者是文字的颜色是否跟背景色一致了
不是文字的问题，是这个鼠标还在根菜单下的时候这个第三级菜单的背景就显示出来了
0
太麻烦了
0
你既然使用:hover 伪类为何还需要加上 jQuery的代码呢。