CSS浮動文本酒吧

我有這樣的HTML代碼：CSS浮動文本酒吧

<div id="navbar"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Forum</a></li> 
     <li><a href="#">Contact Us</a></li> 
    </ul> 
</div>

CSS：

#navbar { position: relative; margin: 3px; } 
#navbar ul { padding: 0; margin: auto; background: #f0f0f0 url(../images/1px.png) repeat-x 0 -441px; padding: 4px 0 4px 0; } 
#navbar li { display: inline; margin-right: 80px; } 
#navbar li a { font-family: EqualSansDemo; font-size: 1.6em; color: #555555; text-shadow: 1px 1px 0px #fff; } 
#navbar li a:hover { color: #0071e4; }

而且這將是這樣的： enter image description here

所有我需要做的是：

enter image description here

我真的嘗試了很多東西，浪費了三個小時而沒有取得任何成功......我認爲這很容易，但我對CSS不太好。請任何想法嗎？

來源

2013-04-20 user2203703

建立一個良好的CSS菜單是一項艱鉅的任務，不是你要能夠除非你有一些瘋狂的CSS技能，否則在幾個小時內就可以完成。我建議尋找一個好的第三方控制 - 有幾十個，如果不是數百個好的那個。 – 2013-04-20 16:06:04

http://jsfiddle.net/wv9Cr/1/ – Kaloyan 2013-04-20 16:18:00

你想要的是一個Suckerfish Dropdown你必須做的是這樣的：

<ul> 
    <li>Home</li> 
    <li>Forum 
     <ul class="children"> 
      <li>Some link</li> 
      <li>Another link</li> 
     </ul> 
    </li> 
    <li>Contact Us</li> 
</ul>

通過課程默認情況下，孩子們不應該如此顯示在你的CSS添加：

.children{display:none;}

而當論壇元件徘徊，你應該表現出他們，所以：

li:hover .children{display:block;}

當然，你也會東東d添加一些位置樣式，以便它們在論壇元素下面很好，並且不會破壞您的設計。所以一定要帶着孩子出去類流與position:absolute;

你可以閱讀更多有關口魚的下拉列表中的位置：http://alistapart.com/article/dropdowns

來源

2013-04-20 16:13:26 user2019515

你打我吧:) ..這是我做的一個小提琴的例子http://jsfiddle.net/2zbTY/2/ – Mortalus 2013-04-20 16:16:51

user2019515 @Mortalus非常感謝你您的幫助：） – user2203703 2013-04-20 16:32:42

CSS浮動文本酒吧

回答

相關問題