CSS水平子菜單對齊

Question

我在CSS和JQuery中編寫了一個簡單的懸停下拉導航欄。 菜單結構就像

Products  |  Research  |  Services  | Contact |

服務有兩個下拉菜單課程和其他。 研究有4個下拉列表，分別是1個，2個，3個和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類中的left: 0引起了問題。 檢查以下小提琴。

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