CSS 水平子菜单对齐

Question

我正在用 CSS 和 JQuery 编写一个简单的悬停下拉导航栏。菜单结构是这样的

Products  |  Research  |  Services  | Contact |

服务有两个下拉菜单课程和其他。研究有 4 个下拉菜单，比如一、二、三和四。问题是，当我将鼠标悬停在 Research 时，下拉菜单会出现

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

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

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