1. 首页
  2. 问答
  3. 兆丰菜单下拉悬停问题

兆丰菜单下拉悬停问题

2012-08-22 171 views
0

Mega menu兆丰菜单下拉悬停问题

如果您移动光标向下一点点或到实际下拉黑匣子悬停消失它看起来不过好上徘徊。我遇到了一些障碍，需要一些帮助。

的Index.html

<!doctype html> 
<head> 

<link rel="stylesheet" type="text/css" href="style2.css"> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript" src="main.js"></script> 
</head> 
<nav> 
<ul id="headNav"> 

    <li id="item1" class="mega"> 
     <h2> <a href="" class="hover">Item 1</a></h2> 
     <div id="item1" class="dropdown gradbackground">Sub-Item 1</div> 
    </li> 

    <li id="item2" class="mega"> 
     <h2> <a href="" class="hover">Item 2</a></h2> 
     <div id="item2" class="dropdown gradbackground">Sub-Item 2</div> 
    </li> 



</ul> 

<div class="clear"></div> 

</nav> 

</body> 

</html>

CSS

a {color:#fff;} 
/* Mega Menu*/ 

ul#headNav 
{ 
    width: 100%; 
    height: 40px; 
    margin: 16px 0 10px 0; 
    padding: 0; 
    list-style: none; 
    background: #484848; /* Old browsers */ 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ4NDg0OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMTMwMzAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-linear-gradient(top, #484848 0%, #313030 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#484848), color-stop(100%,#313030)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #484848 0%,#313030 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #484848 0%,#313030 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #484848 0%,#313030 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #484848 0%,#313030 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#484848', endColorstr='#313030',GradientType=0); /* IE6-8 */ 
    border-radius: 4px; 
    border: 1px solid #3B3B3B; 
} 

ul#headNav li { 
height: 39px; 
position: relative; 
float: left; 
padding: 0px 8px; 
border-right: 1px solid #565656; 

} 


ul#headNav li a { 
width: 126px; 
height: 40px; 
position: relative; 
top: -10px; 
display: block; 
line-height: 60px; 
text-align: center; 
background: url(../img/nav/home.png) no-repeat 0 0; 
z-index: 10; 
} 




ul#headNav li .hover:hover, ul#headNav li a:hover { 
height: 60px; 
background: #474747; 
border-radius: 5px 5px 0px 0px; 

} 

ul#headNav li:nth-of-type(8n) {border-right:none;} 

li#recording a.hover 
{ 
    line-height: 18px; 
    top: 2px; 
} 


ul#headNav li a { 
width: 101px; 
background: url(../img/nav/home.png) no-repeat 0 0; 
} 




a#BuyNow { line-height: 38px;} 
a#BuyNow:hover { text-decoration:underline; color:#fff!important;} 

#quicksearch 
{ 
position: relative; 
float: left; 
margin-right: 44px; 
} 

nav h2 
{ 
    text-transform:capitalize; 
    font-size:13px !important; 
    color:#000000; 
    font-weight:bold; 
    margin:0; 
    padding:0 0px; 
    line-height:28px !important; 
    height:0px; 
    } 

a.liLink {background:none !important; border:none ;} 


    /* End Mega Menu */ 



.dropdown 
{ 
    display: none; 
    width:570px; 
    position: absolute; 
    top:23px; 
    padding:10px; 
    height:auto; 
    min-height:400px; 
    color: #ffffff; 
    -webkit-box-shadow: 0px 4px 4px rgba(0,0,0,0.3); 
    -moz-box-shadow: 0px 4px 4px rgba(0,0,0,0.3); 
    box-shadow:0px 4px 4px rgba(0,0,0,0.3); 
    z-index:99; 
    font-weight:bold; 
    z-index:999999; 
    border-top:16px solid #474747; 
    background:#000; 
} 

.regtable 
{ 
    margin:20px 0px 0px 30px; 

} 


#item1.dropdown {top: 50px; left: 8px; } 
#item2.dropdown {left: 8px; top: 50px; } 





ul.megacatlist li ul li, ul.megabrandlist li ul li 
{ 
    display:block !important; 
    position: relative !important; 
    float:none !important; 
    line-height:16px !important; 
    border:none !important; 
    padding:0 !important; 
    margin:0px 0 1px 0 !important; 
    text-transform:none !important; 
    height:20px; 

} 

ul.megacatlist li ul li a, ul.megabrandlist li ul li a 
{ 
    color: #666666 !important; 
    text-decoration:none; 
    font-size:12px; 
    line-height:16px !important; 
    padding:1px 5px 0px 5px !important; 
    border:none; 
    width:auto; 
    display:block; 
    height:100%; 
    text-transform:none !important; 

} 

ul.megacatlist li ul li a:hover, ul.megabrandlist li ul li a:hover 
{ 
    text-decoration:underline !important; 
    border:none !important; 
    } 

.topNavSection a{color:#ffffff;} 
.topNavSection h3{padding:5px;border:none; text-decoration:underline;} 


.dropdown a, .dropdown ul li ul li { 
    color: #4D4D4D; 
    font-size: 14px !important; 
    padding: 0px 0px 0px 5px; 
    position: relative; 
    text-decoration: none; 
    text-transform: none !important; 
    display:block; 
    width: 100%; 
    height: 100%; 
    line-height: 30px; 
} 


.dropdown a:hover, .dropdown ul li ul li:hover 
{ 
    margin:0px; 
    padding-left:5px; 
    text-decoration:underline; 
    display:block; 
    } 



#topnav ul { 
    display: block; 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    width: 100%; 
} 

.dropdown ul li ul { 
    margin-right: 0 !important; 
} 
#topnav ul li { 
    font-size: 16px; 
    margin-right: 51px; 
} 

#topnav ul li { 
    display: block; 
    float: left; 
    font-size: 14px; 
    margin: 0 35px 0 0; 
    padding: 2px 5px; 
    text-transform: uppercase; 
    width: auto; 
} 

.dropdown ul li ul li { 
    display: block !important; 
    float: none !important; 
    margin-right: 0 !important; 
} 

.dropdown ul li { 
    display: block; 
    float: left !important; 
    margin-left: 0 !important; 
    margin-right: 15px !important; 
    max-width: 226px !important; 
    padding-left: 0 !important; 
    position: relative; 
    text-align: left; 
    width: auto !important; 
    border: medium none !important; 
} 

.dropdown ul li:nth-of-type(2n) 
{ 
    margin:0px; 
} 

/*end mega menu*/

JS

/* start megamenu script */ 

function slideSubDown() { 
    $(".mega").children('.dropdown').slideUp("fast"); 
    $(this).children('.dropdown').slideDown({ 
     speed: 1600, 
     easing: "swing" 
    }) 
    //$(this).children('a').addClass("pointer"); 
} 
function slideSubUp() { 
    $(".mega").children('.dropdown').slideUp("250"); 
    //$(this).children('a').removeClass("pointer"); 
} 
$(".mega").hoverIntent(slideSubDown, slideSubUp); 

/*end megamenu script */

来源

2012-08-22 rapture89

+0

代码为这将很方便，以帮助你 – 2619

+0

更新了代码 – rapture89

回答

0

与悬停整个列表它工作EM（而不是只有H2标签），这样一来它包括下拉菜单，你应该得到预期的行为

来源

2012-08-22 13:38:32 Asciiom

+0

这可以被添加为一个评论，因为它不是一个回答。 – 2619

+1

这个问题，因为我看到它是'如何解决消失框的问题'。这是如何 – Asciiom

+0

悬停是不是在h2标签它是目前在李和标签 – rapture89

0

集悬停li元素，它可以帮助

来源

2012-08-22 13:39:56 Lukas

+0

悬停李元素设置 – rapture89

相关问题

 相关问题