不能調整ul內聯

Question

此菜單沒有獲得ul容器的內聯列表。

我嘗試玩的位置和漂浮的元素，但最終我不明白它的工作。

這是我Fiddle

我想裏面內嵌DIV .mega-div UI元素。

這裏是CSS：

.mega-wrapper { 
width:100%; 
margin:0 auto; 
} 

.mega-nav { 
position:relative; 
width:auto; 
height:59px; 
background:#252428; 
} 

.mega-nav ul .mega-ul { 
display:block; 
list-style:0; 
margin:0; 
padding:0; 
} 

.mega-nav .mega-ul li { 
position:relative; 
display:inline-block; 
} 

.mega-nav .mega-ul li a { 
display:block; 
font-size:1em; 
color:#fff; 
text-decoration:none; 
padding:0 15px; 
} 

.mega-nav .mega-ul li a:hover,.mega-nav .mega-ul li:hover > a { 
background:#333; 
} 

.mega-div { 
position:absolute; 
top:100%; 
left:0; 
height:auto; 
background:#333; 
display:none; 
z-index:1000; 
padding:20px 30px; 
} 

.mega-ul li ul { 
float:left; 
list-style:none; 
margin:0 5% 15px 0; 
padding:0; 
} 

.mega-ul li ul li a { 
float:left; 
display:block; 
width:100%; 
height:auto; 
line-height:1.3em; 
color:#888; 
text-decoration:none; 
padding:1px 0; 
} 

.mega-ul li .megaul-section li:first-child a { 
font-size:1.2em; 
color:#8dc63f; 
} 

.alsosee-agents { 
font-size:1.2em!important; 
color:#8dc63f!important; 
} 

.mega-ul li ul li a:hover { 
color:#fff; 
background:none; 
} 

.alsosee-agents:hover { 
color:#fff!important; 
} 

.mega-ul ul li:first-child a:hover { 
color:#fff; 
} 

.mega-nav .mega-ul:after { 
content:"."; 
display:block; 
clear:both; 
visibility:hidden; 
line-height:0; 
height:0; 
} 

.mega-nav .mega-ul { 
display:inline-block; 
right:0; 
left:auto; 
} 

.header-title { 
line-height:59px; 
} 

.mega-nav .mega-ul li:nth-child(1n+6):hover .mega-div { 
right:0; 
left:auto; 
} 

.megaul-section { 
width:auto; 
} 

.extra-width { 
width:770px; 
} 

.mega-nav .mega-ul li:hover > .mega-div,.mega-ul li ul li { 
display:block; 
} 

我怎麼能這樣做呢？

編輯 -

所以對於暫時不很具體的問題關於抱歉。內聯主菜單沒有問題。問題是子菜單。每個子菜單的部分在一個ul部分下。我想內聯子菜單的正在被刪除的ul部分。

Answer 1

刪除ul和它在css裏面的類之間的多餘空格。現在你的風格是正確的，但是你用選擇器犯了一個錯誤。現在你正在試圖找到.mega-nav元素，然後在裏面找到ul，然後是.mega-ul INSIDE ul元素。不僅僅是具有超級UL的UL。

更改CSS：

.mega-nav ul.mega-ul 

Answer 2

首先，你需要正確的標記菜單這樣

<ul class="menu"> 
<li> <a href=""> Home </ a> </ li> 
<li> <a href=""> About Us </ a> 
<ul> <! - drop down menu -> 
<li> <a href=""> Production </ a> </ li> 
<li> <a href=""> Clients </ a> </ li> 
<li> <a href=""> For Partners </ a> </ li> 
<li> <a href=""> For customers </ a> </ li> 
<li> <a href=""> Advertising </ a> </ li> 
</ ul> 
</ li> 
<li> <a href=""> Services </ a> </ li> 
<li> <a href=""> Gallery </ a> </ li> 
<li> <a href=""> Rates </ a> </ li> 
<li> <a href=""> Reviews </ a> </ li> 
<li> <a href=""> Contacts </ a> </ li> 
</ ul> 

末CSS

*{ 
    margin: 0; 
    padding: 0; 
} 

body { 
    margin: 20px; 
} 

ul.menu { 
    margin: 0; 
    padding: 0; 
    display: inline-block; 
    background-color: #2b2b2b; 
    background-repeat: no-repeat; 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4f4f4f), to(#2b2b2b)); 
    background-image: -webkit-linear-gradient(#4f4f4f, #2b2b2b); 
    background-image: -moz-linear-gradient(top, #4f4f4f, #2b2b2b); 
    background-image: -ms-linear-gradient(#4f4f4f, #2b2b2b); 
    background-image: -o-linear-gradient(#4f4f4f, #2b2b2b); 
    background-image: linear-gradient(#4f4f4f, #2b2b2b); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#2b2b2b', GradientType=0); 
    border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    width: 900px; 
} 

ul.menu li { 
    float: left; 
    list-style: none; 
    border-right: 1px solid #4f4f4f; 
    position: relative; 
} 

ul.menu li a { 
    color: white; 
    display: block; 
    font-family: Arial; 
    font-size: 13px; 
    padding: 8px 20px 10px; 
    text-decoration: none; 
    border-right: 1px solid #2b2b2b; 
} 

ul.menu li a:hover { 
    background-color: #2b2b2b; 
} 

ul.menu li:first-child a:hover { 
    border-radius: 4px 0 0 4px; 
    -webkit-border-radius: 4px 0 0 4px; 
    -moz-border-radius: 4px 0 0 4px; 
} 
/*dropdown menu*/ 
ul.menu li ul { 
    display: none; 
} 

ul.menu li:hover ul { 
    display: block; 
    position: absolute; 
    top: 34px; 
    border-radius: 0 0 4px 4px; 
    -webkit-border-radius: 0 0 4px 4px; 
    -moz-border-radius: 0 0 4px 4px; 
    background-color: #2b2b2b; 
    z-index: 1000; 
} 

ul.menu li:hover ul li { 
    float: none; 
    width: 150px; 
    border-right: none; 
} 

ul.menu li:hover ul li a { 
    border-top: 1px solid #4f4f4f; 
    border-right: none; 
    padding: 6px 20px 8px; 
} 

ul.menu li:hover ul li a:hover { 
    background-color: transparent; 
    color: #c1deff; 
} 

ul.menu li:hover ul li:first-child a:hover { 
    border-radius: 0; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
}