好吧,我的下拉菜单有问题。它是一个单一的下拉菜单,但我对它的运气并不好。如果我或用户在哪里覆盖类别,则下面的“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 Fiddle:http: //jsfiddle.net/xrjN2/2/ 和完整预览:http: //jsfiddle.net/xrjN2/2/embedded/result/