1

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

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

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

这是我认为的主要问题：

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

我已经尝试了使这个内联和其他 tweeks 的不同组合，例如将 150px 宽度设置为百分比，但这会导致文本出现各种对齐问题。

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

上面链接的一些注释：

  1. 我正在使用 Tiny Drop Down 2 ( http://sandbox.scriptiny.com/tinydropdown2/ ) 的下拉功能（以 JS 和 CSS 的形式，在评论中注明），尽管下拉实际上不起作用在jsfiddle中。我很确定所有 JS 都与我的主要问题无关。

  2. Tiny Drop Down 使用了大量的 CSS，所以我很难尝试制作小 tweeks。

  3. 这些按钮没有与实际的条垂直排列，但这再次不是主要问题，因为这不是在我的实际站点上发生的。

  4. jsfiddle 中的窗口大小实际上并不能容纳按钮的整个长度，因此您会立即看到按钮移动到下一行的问题。

4

2 回答 2

1

试试我的版本，显示表格/表格单元：

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

我基本上只是用display: table.menu2及其子项display: table-cell（li's）替换了浮点数

于 2013-07-14T16:18:03.563 回答
0

这就是我的看法

<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-14T16:12:57.233 回答