Возьмите, так что проблема с моим падением. Его единственный выпадающий список, но мне не очень повезло с ним. Если я или пользователь, где можно покрыть категории, отобразится ниже "ul" вместе с его дочерними элементами "li" и "a". Однако это не работает. Наведение по категориям вызывает меню, но те, которые вы пытаетесь переместить мышь в меню, которое он скрывает.
Компонент HTML
<header role="header">
<div class="frame">
<nav role="navigation" class="bit-1">
<ul>
<li> <a href="" class="brand">Tutor <span>Hive</span></a>
</li>
<li> <a href="#" class="cat">Categories</a>
<ul class="cat-drop">
<li> <a href="/cat/all">All Categories</a>
<a href="/cat/math">Math</a>
<a href="/cat/biology">Biology</a>
<a href="/cat/sciences">Sciences</a>
<a href="/cat/chemistry">Chemistry</a>
<a href="/cat/physics">Physics</a>
<a href="/cat/business">Business</a>
<a href="/cat/health">Health & Medicine</a>
<a href="/cat/english">English</a>
<a href="/cat/french">French</a>
<a href="/cat/foreign">Foreign Languages</a>
<a href="/cat/esl">ESL</a>
<a href="/cat/literacy">Reading & Writing</a>
<a href="/cat/computers">Computers</a>
<a href="/cat/arts">Visual Arts</a>
<a href="/cat/sports">Sports & Couching</a>
<a href="/cat/preschool">Pre-school Education</a>
<a href="/cat/music">Music</a>
<a href="/cat/disability">Learning Disabilities</a>
<a href="/cat/social">Social Studies</a>
<a href="/cat/psychology">Psychology</a>
<a href="/cat/religion">Religion</a>
</li>
</ul>
</li>
<div class="right_menu">
<li> <a href="#region">Brampton</a>
</li>
<li class="sep"></li>
<li> <a href="#signin">Sign in</a>
</li>
<li> <a href="#signup" class="btn btn-signup">Sign up</a>
</li>
</div>
</ul>
</nav>
</div>
</header>
Компонент CSS
header {
background: #fefefe;
padding: 16px 80px;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.65);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10000;
display: block;
}
nav {
padding: 20px 0;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 0.06em;
display: block;
}
nav > ul {
margin: 18px 0;
list-style: none;
}
nav > ul > li {
display: inline-block;
}
nav > ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
nav ul:after {
content:"";
clear: both;
display: block;
}
nav > ul > li:hover > ul {
display: inline;
background: transparent;
padding: 0px 80px;
}
nav > ul > li:hover > a.cat {
background: #F77036;
border-bottom: 2px solid #DD6430;
color: #fff;
border-radius: 3px;
transition: all 400ms;
}
nav > ul ul > li {
position: relative;
list-style: none;
margin: 16px 4px;
min-width: 400px;
display: block;
}
nav > ul ul > li > a {
color: #313131;
background: #fff;
border-bottom: 2px solid transparent;
padding: 15px 15px;
text-decoration: none;
display: inline-block;
}
nav > ul ul > li > a:hover {
background: #4b545f;
}
nav > ul > li > a, .right_menu > li > a {
color: #313131;
background: none;
border-bottom: 2px solid transparent;
padding: 15px 15px;
text-decoration: none;
border-radius: 3px;
transition: all 400ms;
outline: none;
}
nav > ul > li > a:hover, .right_menu > li > a:hover {
background: #F77036;
border-bottom: 2px solid #DD6430;
color: #fff;
border-radius: 3px;
transition: all 400ms;
}
nav > ul > li > a.active, .right_menu > li > a.active {
color: #fff !important;
font-weight: 600;
}
nav > ul > li > a.brand {
background: #CF4920;
border-bottom: 2px solid #BA411C;
color: #fff;
padding: 15px 15px;
text-decoration: none;
border-radius: 3px;
transition: all 400ms;
outline: none;
text-align: center;
}
nav > ul > li > a.brand:hover {
opacity: 0.8;
transition: all 400ms;
}
nav > ul > li > a.brand > span {
color: #fff;
border-left: 1px solid #fff;
padding: 0 4px;
font-family:'Permanent Marker', cursive;
font-weight: normal;
}
/* Navigation Right Menu */
nav > ul > .right_menu {
float: right;
}
nav > ul > .right_menu > li {
list-style: none;
display: inline-block;
}
nav > ul > .right_menu > li > a.btn-signup {
background: #A3D29C;
border-bottom: 2px solid #91BB8B;
color: #fff;
border-radius: 3px;
transition: all 200ms;
}
nav > ul > .right_menu > li > a.btn-signup:hover {
opacity: 0.8;
transition: all 200ms;
}
nav > ul > .right_menu > li.sep {
border-left: 1px solid #ddd;
width: 1px;
margin: -12px 2px;
padding: 16px 0;
}
Вот скрипт JS для скрипта: http://jsfiddle.net/xrjN2/2/ И полный предварительный просмотр: http://jsfiddle.net/xrjN2/2/embedded/result/
Вот ссылка на скрипку с исправленным css.
header {
background: #fefefe;
padding: 16px 80px;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.65);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10000;
display: block;
}
nav {
padding: 20px 0;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 0.06em;
display: block;
}
nav ul {
margin:18px 0;
list-style: none;
}
nav ul li {
float:left;
margin-right:5px;
/*position:relative;*/
}
nav ul li a,
.right_menu li a {
color: #313131;
background: none;
border-bottom: 2px solid transparent;
padding: 15px 15px;
text-decoration: none;
border-radius: 3px;
transition: all 400ms;
outline: none;
}
nav ul li a:hover,
.right_menu li a:hover {
background: #F77036;
border-bottom: 2px solid #DD6430;
color: #fff;
border-radius: 3px;
transition: all 400ms;
}
nav ul li:hover a.cat,
nav ul li.active a.cat {
background: #F77036;
border-bottom: 2px solid #DD6430;
color: #fff;
border-radius: 3px;
transition: all 400ms;
}
nav ul li a.active,
.right_menu li a.active {
color: #fff !important;
font-weight: 600;
}
nav ul li a.brand {
background: #CF4920;
border-bottom: 2px solid #BA411C;
color: #fff;
padding: 15px 15px;
text-decoration: none;
border-radius: 3px;
transition: all 400ms;
outline: none;
text-align: center;
}
nav ul li a.brand:hover {
opacity: 0.8;
transition: all 400ms;
}
nav ul li a.brand span {
color: #fff;
border-left: 1px solid #fff;
padding: 0 4px;
font-family:'Permanent Marker', cursive;
font-weight: normal;
}
/* Navigation Right Menu */
nav ul .right_menu {
float: right;
}
nav ul .right_menu li {
list-style: none;
display: inline-block;
}
nav ul .right_menu li a.btn-signup {
background: #A3D29C;
border-bottom: 2px solid #91BB8B;
color: #fff;
border-radius: 3px;
transition: all 200ms;
}
nav ul .right_menu li a.btn-signup:hover {
opacity: 0.8;
transition: all 200ms;
}
nav ul .right_menu li.sep {
border-left: 1px solid #ddd;
width: 1px;
margin: -12px 2px;
padding: 16px 0;
}
nav ul:after {
content:"";
clear: both;
display: block;
}
/*----------------Drop menu starts----------------*/
nav ul li ul {
display:none;
position:absolute;
top:69px;
left:0;
background-color:#313131;
width:100%;
padding:15px;
}
nav ul li ul li a {
color:#313131;
background-color:#fff;
border:0;
border-radius:0px;
transition: all 0ms;
float:left;
margin:0 5px 5px 0;
}
nav ul li ul li a:hover {
background:#4b545f;
border:0;
color: #313131;
border-radius:0;
transition: all 0ms;
}
nav ul li:hover ul {
display:block;
}
Единственное, что вы можете сделать - это вывести раскрывающееся меню ближе к ГЛАВНОМУ МЕНЮ с помощью css
.cat-drop {
margin-top: -50px;
}
event hover должен также связывать класс выпадающего меню так же, как этот
$(document).ready(function () {
$(".cat .cat-drop").hover(
function () {
$(".cat-drop").show();
},
function () {
$(".cat-drop").delay("400").hide();
});
});