使用嵌套列表下創建子水平menue它

我在它之下（圖c）形成與子菜單橫向菜單，但所有我能得到了一個圖，但我想要的東西，像圖B或無花果C：使用嵌套列表下創建子水平menue它

enter image description here

HTML和CSS代碼無花果一個：

<html> 
<head> 
<style type="text/css"> 
ul li{ 
    display:inline; 
    background-color:red; 
} 
ul li ul{ 
    display:inline; 
} 
ul li li{ 
    position:relative; 
    top:20px; 
    display:inline; 
    background-color:green; 
} 
li{ 
    border:1px solid white; 
} 
li:hover{ 
    border:1px solid blue; 
} 
</style> 
<title>Untitled Document</title> 
</head> 

<body> 
<ul> 
    <li>overview</li> 
    <li>alarm 
    <ul> 
     <li>view</li> 
     <li>config</li> 
    </ul> 
    </li> 
    <li>log</li> 
    <li>config 
    <ul> 
     <li>tag</li> 
     <li>security</li> 
    </ul> 
    </li> 
</ul> 
</body> 
</html>

的問題是：如何可以創建類似於圖b或無花果℃的輸出？我希望子菜單顯示在其父菜單下，而父菜單不會延長很長時間。

來源

2011-08-31 AlexStack

你的形象被打破 –

我不明白這有什麼錯圖（一）什麼是你想達到什麼目的？ –

我希望子菜單在其父菜單下方顯示，而父菜單不會延長很長時間。 – AlexStack

@Alex;檢查這個鏈接http://jsfiddle.net/sandeep/9SH4S/可能是你的幫助。

CSS：

ul li{ 
    display:inline; 
    background-color:red; 
    position:relative; 
} 
ul li ul{ 
    display:inline; 
    position:absolute; 
    top:20px; 
    left:0; 
    white-space:nowrap; 
} 
ul li li{ 
    display:inline; 
    background-color:green; 
} 
li{ 
    border:1px solid white; 
} 
li:hover{ 
    border:1px solid blue; 
}

來源

2011-08-31 12:36:21 sandeep

這就是它！非常感謝你。 – AlexStack

我也很高興這對你有幫助:) – sandeep

使用嵌套列表下創建子水平menue它

回答

相關問題