css下拉菜單對齊

我已經使用CSS創建了一個下拉菜單，但是當您將鼠標懸停在父列表項上時，無序列表將顯示錨定在父項左側。我希望它成爲他們的核心，但我不知道如何。css下拉菜單對齊

HTML：

<ul class="ulRight"> 
<li><a href="#">Settings</a> 
    <ul> 
     <li><a href="#">This Is</a></li> 
     <li><a href="#">Sub Menu</a></li> 
     <li><a href="#">One</a></li> 
    </ul> 
</li> 
<li><a href="#">Your Account</a> 
    <ul> 
     <li><a href="#">Sub Menu</a></li> 
     <li><a href="#">Two</a></li> 
     <li><a href="#">Now!</a></li> 
    </ul> 
</li>

.ulRight { 
    /*To float UL List to right*/ 
    list-style:none outside none !important; 
    position:absolute; 
    right:10px; 
    top:0px; 
    display:inline-table; 
    z-index:1000; 
} 
.ulRight ul:after { 
    content:""; 
    clear:both; 
    display:block; 
} 
.ulRight > li { 
    display:inline; 
    color:#BBBBBB; 
    width:auto; 
} 
.ulRight li > ul { 
    vertical-align:middle; 
    z-index:1001; 
    display:none; 
    position:relative; 
    margin:auto; 
    top:40px; 
    width:inherit; 
} 
.ulRight li:hover > ul { 
    display:block; 
} 
.ulRight > li { 
    margin:0 5px 0 5px; 
} 
.ulRight > li { 
    float:left; 
} 
.ulRight > li:hover { 
    background:#FFF; 
    border:1px solid #CCCCCC; 
} 
.ulRight a { 
    text-decoration:none; 
    font-weight:normal; 
    display:block; 
    padding:10px; 
} 
.ulRight li:hover a { 
    font-weight:bold; 
    color:#80B5E9; 
    text-align:center; 
} 
.ulRight li > ul { 
    background:#FFF; 
    border-radius:0px; 
    padding:0px; 
    position:absolute; 
    box-shadow:0px 0px 9px rgba(0, 0, 0, 0.15); 
    border:1px solid #CCCCCC; 
} 
.ulRight li > ul > li { 
    list-style:none; 
    float:none; 
    border-top:1px solid #CCCCCC; 
    border-bottom:1px solid #CCCCCC; 
    position:relative; 
} 
.ulRight li > ul a { 
} 
.ulRight li > ul a:hover { 
    color:#FFF; 
    background:#303030; 
}

任何幫助，將不勝感激！

來源

2013-06-24 J Spring

變化的相對位置

.ulRight li > ul{ 
position:relative; 
top:0; 
}

來源

2013-06-24 23:03:45 Mark

主要的問題，我看到的是你的父列表的寬度並不一致。

.ulRight li >ul{ 
position:realative; // this position makes the child position realative to your parent list which is left justified.... 
}

最快和最容易的是應用固定寬度。這樣您的父母和孩子列表都是相同的寬度。

.ulRight > li { 
display:inline; 
color:#BBBBBB; 
width:auto; // Change this to 110px or what ever you see fit 
}

，如果你不喜歡這種解決方案，您將需要使用JavaScript來設置參數......（據我所知反正）

希望這有助於

來源

2013-06-24 23:14:34

css下拉菜單對齊

回答

相關問題