Question

第一次海报！这是一个长期的Stack Overflow潜伏者：

我正在为CSS菜单设置样式，但我在将默认样式应用到<ul>列表中的子SUB菜单时遇到了问题。您可以在下面的JS Fiddle中看到我现在所拥有的内容。如果你将鼠标悬停在第2项上，出现的下拉列表就是我所追求的，但是如果你将鼠标悬停在第4项上，你可以看到我在下一个ul中得到的结果。

有人能够发现我的CSS中的缺陷吗？非常感谢提前！

http://jsfiddle.net/b7den1s1/

.new-menu {
  background-image: url("/images/logo.gif");
  background-repeat: no-repeat;
  background-position: left;
  background-color: #fff;
  display: block;
  float: right;
  margin: 0 auto;
  width: 100%;
  height: 42px;
  margin-bottom: 5px;
}
.new-menu ul,
div.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
}
.new-menu li,
div.menu li {
  float: right;
  position: relative;
}
.new-menu ul li {
  background-image: url("/images/small-bar.jpg");
  background-repeat: no-repeat;
  background-position: bottom;
  margin-right: 15px;
}
.new-menu li li,
.new-menu li li li {
  width: 100%;
  float: right;
  background-image: none;
}
.new-menu li a {
  white-space: nowrap;
}
.new-menu ul ul,
.new-menu ul ul ul {
  display: none;
  position: absolute;
  top: 38px;
  left: auto;
  right: 0;
  float: right;
  width: auto;
  z-index: 99999;
  font-size: 12px;
}
.new-menu ul ul ul {
  left: 100%;
  top: 0;
  z-index: 99999999;
}
.new-menu a {
  color: #aaa;
  display: block;
  line-height: 41px;
  padding: 0 10px;
  text-decoration: none;
  font-weight: normal;
}
.new-menu ul li:hover > ul,
.new-menu ul ul li:hover > ul {
  display: block;
}
.new-menu li:hover > a,
.new-menu ul li:hover > a,
.new-menu ul ul li:hover > a {
  background: #333;
  color: #fff;
}
.new-menu ul ul a,
.new-menu ul ul ul a {
  background-color: rgba(51, 51, 51, 0.7);
  line-height: 1em;
  padding: 10px;
  height: auto;
  color: #fff;
}

<div class="new-menu">
  <ul>
    <li><a href="#">Item 1</a>
      <li><a href="#">Item 2</a>
        <ul>
          <li><a href="#">Item 3</a>
            <li><a href="#">Item 4</a>
              <ul>
                <li><a href="#">Item 5</a>
                  <li><a href="#">Item 6</a>
              </ul>
        </ul>
  </ul>
</div>

Answer 1

在此课程width

中将.new-menu ul ul ul{...}设为100％

.new-menu {
    background-image: url("/images/logo.gif");
    background-repeat: no-repeat;
    background-position: left;
    background-color: #fff;
    display: block;
    float: right;
    margin: 0 auto;
    width: 100%;
    height: 42px;
    margin-bottom: 5px;
}
.new-menu ul,
    div.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 16px;
}
 
.new-menu li,
    div.menu li {
    float: right;
    position: relative;
}

.new-menu ul li {
    background-image: url("/images/small-bar.jpg");
    background-repeat: no-repeat;
    background-position: bottom;
    //margin-right: 15px;
}

.new-menu li li,
.new-menu li li li {
    width: 100%;
    float: right;
    background-image: none;
}

.new-menu li a {white-space:nowrap;}

.new-menu ul ul,
.new-menu ul ul ul {
    display: none;
    position: absolute;
    top: 38px;
    left:auto;
    right:0;
    float: right;
    width: 100%;
    z-index: 99999;
    font-size: 12px;
}

.new-menu ul ul ul {
    left: 100%;
    top: 0;
    z-index: 99999999;
}

.new-menu a {
    color: #aaa;
    display: block;
    line-height: 41px;
    padding: 0 10px;
    text-decoration: none;
    font-weight: normal;
}

.new-menu ul li:hover > ul,
.new-menu ul ul li:hover > ul {
    display: block;
}

.new-menu li:hover > a,
.new-menu ul li:hover > a,
.new-menu ul ul li:hover > a {
    background: #333;
    color: #fff;
}

.new-menu ul ul a,
.new-menu ul ul ul a {
    background-color: rgba(51, 51, 51, 0.7);
    line-height: 1em;
    padding: 10px;
    height: auto;
    color: #fff;
}

<div class="new-menu">
    <ul>
        <li><a href="#">Item 1</a>
        <li><a href="#">Item 2</a>
        <ul>
        <li><a href="#">Item 3</a>
            <li><a href="#">Item 4</a>
            <ul>
              <li><a href="#">Item 5</a>
              <li><a href="#">Item 6</a>
            </ul>
        </ul>
     </ul>
</div>

Answer 2

您可以添加以下内容：

.new-menu li a {white-space:nowrap; display: inline-block;}

Answer 3

欢迎使用StackOverflow， thecommish3 ！

<强> TL; DR

无需像其他用户建议的那样添加更多代码行 - 只需从以下内容中删除right: 0;：

.new-menu ul ul,
.new-menu ul ul ul {
  display: none;
  position: absolute;
  top: 38px;
  left:auto;
  right:0; /* Remove this rule! */
  float: right;
  width: auto;
  z-index: 99999;
  font-size: 12px;
}

如果您对我如何解决这个问题感到好奇，可以给予更长的答案

我把http://jsfiddle.net/myf4emyx/7/格式化代码的更好方法放在一起，考虑到：

使用类名.menu {}而不是将规则应用于元素，例如ul {}
BEM-like naming conventions允许：
- 更好的代码结构可读性 - 您可以看到正在发生的事情！
- 鼓励您编写类名来定位特定元素，例如.menu-item--sub，而不是诉诸于特异性，例如ul ul li。这意味着您有一个规则（或规则组）的一个类，而不是令人困惑和容易中断的specificity chain
可重复使用的组件，例如.menu，.item-link - 较少的CSS行和较少的头痛诱导：）
更好的HTML格式，例如缩进，关闭标签，例如<li><a>Link</a></li>
CSS简写例如background: #fff url("/images/logo.gif") no-repeat left;

改进格式，结构和改进后命名您的代码我能够轻松诊断问题！

我的主要目标是在将来免除你的头痛 - 有时，我诅咒过去的我编写的代码，我花了一些时间远离它就无法理解，所以我尝试编写可维护的代码＆＃39;尽可能地，也就是说，未来 - 我可以在一年后看一下它，并且仍然能够了解正在发生的事情（并且可能其他人也没有事先知识并且了解发生了什么）。< / p>

随意忽略，否则希望它有所帮助 - 如果您想了解我上面提到的任何事情，或者对我的小提琴中的代码有任何疑问，请联系。

CSS下拉菜单截止

3 个答案: