22

我有一个相当具有挑战性的任务。

我这里有这个菜单... http://jsfiddle.net/K2Zzh/6/

如果您将鼠标悬停在“治疗”上，下拉菜单的宽度设置为 150 像素，这很好，但是，如果您将鼠标悬停在“善后”上，您会看到此宽度太宽。我已经尝试过最小宽度、自动、内联块，但到目前为止还没有运气。

与其为每个下拉菜单创建一个单独的类，是否有一种巧妙的方法可以将宽度设置为仅与每个菜单最长的文本一样大？

我用于下拉菜单的 CSS 代码...

.dropdown ul {
  position: absolute;
  top: 43px;
  z-index: 100;
  border-left: 1px solid #f6634c;
  border-bottom: 1px solid #f6634c;
  border-right: 1px solid #f6634c;
}
.dropdown ul li a {
  background-color: #fff;
  width: 150px;
  text-align: left;
}​

提前致谢。

我的 HTML 代码...

<ul class="mainNav">
  <li><a href="">Home</a></li>
  <li class="dropdown">
    <a href="">Treatments</a>
    <ul>
      <li><a href="">Body Treatments</a></li>
      <li><a href="">Make Up</a></li>
      <li><a href="">Skincare</a></li>
      <li><a href="">Hand & Feet Treats</a></li>
      <li><a href="">Hair Removal</a></li>
      <li><a href="">Alternative Therapies</a></li>
      <li><a href="">Eye Enhancements</a></li>
    </ul>
  </li>
  <li><a href="">Gallery</a></li>
  <li class="dropdown">
    <a href="">Aftercare</a>
    <ul>
      <li><a href="">Body</a></li>
      <li><a href="">Make up</a></li>
      <li><a href="">Skin</a></li>
      <li><a href="">Hand</a></li>
    </ul>
  </li>
  <li><a href="">Contact</a></li>
</ul>
4

3 回答 3

34

第一步：删除固定宽度.dropdown ul li a

第二步：添加cssli li {width:100%;}

第三步：添加.mainNav li a {white-space:nowrap;}

准备好了：http: //jsfiddle.net/K2Zzh/10/

​</p>

于 2012-12-16T18:09:19.343 回答
9

尝试在你的white-space: nowrap课堂上width: auto.dropdown ul li a

http://jsfiddle.net/K2Zzh/8/

于 2012-12-16T17:56:34.107 回答
0

将宽度设置为 "li" 而不是 "a" ，您也可以使用填充

.dropdown ul li {
    width: auto;
    padding:5px;
    display:block;
}​

我认为它应该有效

于 2012-12-16T17:59:20.467 回答