Question

正确，所以我的下拉有问题。它只有一个下拉菜单，但我没有太多运气。如果我或用户在哪些类别上覆盖下面的“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/

Answer 1

这是小提琴link，其中有以下更正的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;
}

Answer 2

你唯一能做的就是使用css将下拉菜单拉近主菜单

 .cat-drop {
    margin-top: -50px;
 }

事件悬停应该像下面这样

绑定下拉菜单类

 $(document).ready(function () {

 $(".cat .cat-drop").hover(

 function () {
     $(".cat-drop").show();
 },

 function () {
     $(".cat-drop").delay("400").hide();
 });

});

http://jsfiddle.net/xrjN2/3/

CSS导航下拉问题

2 个答案: