如何阻止li的寬度與其子li相配

希望這個菜單的最後部分我一直在努力。它的子菜單下拉會像導航的主要部分一樣水平，但是每個li都會變得粗糙，問題是父母正試圖匹配它的子li的寬度。我試着保持孩子李寬度上自動和分配一個寬度的父，但無論我挑選所有錯誤的數字，或它不工作，因爲每次我給父母分配一個寬度，它使下拉垂直，而不是。我的主機服務器在每次發送ftp時似乎也沒有正確更新，所以輸入隨機大小變得非常困難，並且看到我需要匹配的東西。如何阻止li的寬度與其子li相配

的的jsfiddle鏈接顯示這一切，但我不能讓身體的onload隱藏子菜單的工作： jsFiddle

因此，它可能是最好的查看測試網站，以及：Test Site

來源

2012-07-03 Grant

你需要保持在這種情況下，像父子層次 -

#navigation li ul.sub_navigation li{......}

更新小提琴 - http://jsfiddle.net/eETjb/2/

來源

2012-07-03 06:21:42 Dipak

修復它與2 li作爲子，但我需要的可能性，比如說10 sub李。它在2點之後疊加。我看到你做了什麼，但是，如果可能的話，我需要孩子li完全獨立於父寬度。 – Grant

您必須按照相同的層次結構進程處理所有子菜單 – Dipak

我正在討論#navigation li ul.sub_navigation li {......}中的多個li，這個類包含的li。您的解決方案確實解決了我的短期問題，但不是長期問題。請在我的鏈接中再次查看我的測試網站。你會明白我的意思。 3裏是添加在那裏，我打算支持多達10個。 – Grant

嘿，我想你應該要下拉菜單

我創造了一些示例檢查

HTML

<ul class="navi"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Home2</a></li> 
    <li><a href="#">Home3</a> 

    <ul class="submenu"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Home2</a></li> 
    <li><a href="#">Home3</a></li> 
    <li><a href="#">Home4</a></li> 
    <li><a href="#">Home5</a></li> 
    </ul> 

    </li> 
    <li><a href="#">Home4</a></li> 
    <li><a href="#">Home5</a></li> 

</ul>

的CSS

ul, ul li{ 
margin:0; 
    padding:0; 
} 
.navi, .submenu{ 
    list-style:none; 
    display:block; 
    margin:0; 
    padding:0; 
} 
.navi > li{ 
background:green; 
    display:inline-block; 
    vertical-align:top; 
    position:relative; 
} 
.navi li a{ 
color:white; 
    padding:10px; 
    display:block; 
    text-decoration:none; 
} 
.navi li .submenu{ 
display:none; 
    position:absolute; 
    top:39px; 
    left:0; 
} 
.navi li:hover .submenu{ 
display:block; 
} 
.submenu > li{ 
display:block; 
background:red; 
} 

.submenu li > a{ 
border-top:2px solid black; 
display:block; 
}

現場演示http://tinkerbin.com/GoDsKf4n

來源

2012-07-03 07:46:22

我很感激，但我的情緒十足。我以這種方式開始，但改變了主意。 :) – Grant

如何阻止li的寬度與其子li相配

回答

相關問題