Question

我正在CSS和JQuery中编写一个简单的悬停下拉导航栏。菜单结构类似于

Products  |  Research  |  Services  | Contact |

服务有两个下拉课程和其他课程。研究有4个下降，比如一，二，三和四。问题是，当我悬停研究时，下降的时间是

Products  |  Research  |  Services  | Contact |
One Two three Four

关于服务

Products  |  Research  |  Services  | Contact |
Courses Others

因此子菜单处于极端状态，难以点击。请告诉我如何对齐它，使每个子菜单都在其父级下面，例如：

Products  |  Research  |  Services  | Contact |
         One Two three Four

Products  |  Research  |  Services  | Contact |
                       Courses Others

这是我的代码：

navbar.php

<ul id="headnav">
    <li class="active"> <a href="#"> ABOUT </a> </li>
    <li> <a href="#"> Products </a> </li>
    <li> <a href="#"> Research </a> 
        <ul>
            <li> <a href="#"> one </a> </li>
            <li> <a href="#"> two </a> </li>
            <li> <a href="#"> three </a> </li>
            <li> <a href="#"> Four </a> </li>
        </ul>
    </li>
    <li> <a href="#"> Services </a> 
        <ul>
            <li> <a href="#> Courses </a> </li>
            <li> <a href="#"> Others </a> </li>
        </ul>
    </li>
    <li> <a href="#"> Contact </a> </li>
</ul>

CSS

nav {
    position: absolute;
    min-width:30%;
    float:right;
    right:12%;
    top: 15%;
}

nav ul li {
    display: inline-block;
    min-width: 20px;
    text-transform: uppercase;
}

nav ul li a{
    float: left;
    padding: 0px 10px 10px 10px;
}

nav ul li ul {
    display: inline-block;
    position: absolute;
    width: 100%;
    left:0;
    margin-top:7%;
}

nav ul li ul li {
    display: inline-block;
    min-width:10px;
}

和Jquery

$(document).ready(function() { 
 $('nav > ul > li > ul').hide();
 $('nav > ul > li').hover(function() {
    var index = $("nav > ul > li").index(this);
   $(this).find('ul').fadeIn(400);
},function() {
  $(this).find('ul').fadeOut(400);
}); 

});

请帮忙。

Answer 1

我认为班级left: 0中的nav ul li ul导致问题。检查以下小提琴。

http://jsfiddle.net/gsdfpfe6/1/

CSS水平子菜单对齐方式

1 个答案: