如何创建可调整大小的水平导航菜单？

问题：创建具有可以动态调整大小的下拉功能的水平菜单的最佳方式是什么？（或者最好是，我如何编辑我的当前菜单以表现如此呢？）如何创建可调整大小的水平导航菜单？

说明：我在我的网站上使用薄的水平下拉菜单作为主导航。当浏览器窗口处于全宽状态时，没有问题，但在调整大小时，最右侧的链接会在下一行中下移，因为它是浮动的。

水平菜单是如此普遍的事情，我知道必须有一些常见的技巧和方法来创建它们，以便可以动态调整大小。所以如果试图解决我目前的菜单过于繁琐，我只会听到一些提示或阅读一些关于如何创建更好的水平菜单的东西。

以下是我认为将是主要问题：

.menu2 li { 
    position: relative; 
    float: left; 
    width: 150px; 
    z-index: 1000 
}

我试图使这个内嵌和进行其他tweeks，如使150像素宽度为百分比的不同组合，但这样会创建与文本的各种对齐问题。

这里是所有的代码演示现在：http://jsfiddle.net/HSVdg/1/

上面的链接上的一些注意事项：

我使用微型下拉2（http://sandbox.scriptiny.com/tinydropdown2/）的下拉功能（以注释中注明的JS和CSS的形式），但下拉实际上并不在jsfiddle中工作。我很确定所有的JS都与我的主要问题无关。
Tiny Drop Down使用了很多CSS，所以我很难尝试做出小小的推文。
这些按钮并不与实际栏垂直排列，但这也不是主要问题，因为这不会发生在我的实际站点上。
jsfiddle中的窗口大小实际上并不包含按钮的整个长度，因此您立即会看到按钮移动到下一行的问题。

来源

2013-07-14 user1925805

这是我怎么看它

<nav> 
    <ul> 
    <li id="youarehere"><a href="#">Home</a> 
    <li><a>Products</a> 
    <li><a>Services</a> 
    <li><a>Contact Us</a> 
    </ul> 
</nav> 

ul#navigation { 
    float: left; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    background-color: #039; 
} 

ul#navigation li { display: inline; } 

ul#navigation li a { 
    text-decoration: none; 
    padding: .25em 1em; 
    border-bottom: solid 1px #39f; 
    border-top: solid 1px #39f; 
    border-right: solid 1px #39f; 
} 
a:link, a:visited { color: #fff; } 
ul#navigation li a:hover { 
    background-color: #fff; 
    color: #000; 
} 

ul#navigation li#youarehere a { background-color: #09f; }

来源

2013-07-14 16:12:57