Question

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

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

水平菜单是如此常见，我知道必须有一些常见的技巧和方法来创建它们，以便可以动态调整大小。因此，如果尝试修复我当前的菜单太繁琐，我会听到一些提示或阅读有关如何创建更好的水平菜单的内容。

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

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

我尝试了不同的组合方式，使其内联并进行其他调整，例如将150px宽度调整为百分比，但这会在文本中产生各种对齐问题。

以下是一个包含所有代码的演示：http://jsfiddle.net/HSVdg/1/

以上链接的一些注释：

我正在使用Tiny Drop Down 2（http://sandbox.scriptiny.com/tinydropdown2/）作为下拉功能（以JS和CSS的形式，在注释中注明），尽管下拉列表实际上并不起作用jsfiddle。我很确定所有的JS都与我的主要问题无关。
Tiny Drop Down使用了很多CSS，因此我很难尝试做一些小小的推文。
按钮与实际栏没有垂直对齐，但这不是主要问题，因为我的实际网站上没有这样做。
jsfiddle中的窗口大小实际上并不能容纳整个按钮长度，因此您可以立即看到按钮移动到下一行的问题。

Answer 1

试用我的版本，显示表/ table-cell：

http://jsfiddle.net/HSVdg/10/

我基本上只是在 .menu2 上更换了display: table的浮点数，并在其子项（li's）上替换了display: table-cell

Answer 2

这就是我的看法

<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; }

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

2 个答案: