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浮动文本酒吧

回答

相关问题