css - 将子菜单的右边框与其父元素的右边框对齐

Question

我想了解有关制作 CSS 下拉菜单的教程。

_{(来源:line25.com)}

在上图中，子菜单的左边框与父菜单的左边框对齐。我希望子菜单的右边框与父菜单的右边框对齐，同时保留子菜单的宽度。即子菜单应该向左平移一点。

我试图将 position: relative; 添加到子菜单的直接父级，但文本“Web Design”分成两行；那太丑了。

教程来自dropdown menu .

这是我的代码:

nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: block;
}
nav ul {
  background: #efefef;
  background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
  background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
  background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
  padding: 0 20px;
  border-radius: 10px;
  list-style: none;
  position: relative;
  display: inline-table;
}
nav ul:after {
  content: "";
  clear: both;
  display: block;
}
nav ul li {
  float: left;
  /*position: relative;*/
}
nav ul li:hover {
  background: #4b545f;
  background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
  background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
  background: -webkit-linear-gradient(top, #4f5964 0%, #5f6975 40%);
}
nav ul li:hover a {
  color: #fff;
}
nav ul li a {
  display: block;
  padding: 25px 40px;
  color: #757575;
  text-decoration: none;
}
nav ul ul {
  background: #5f6975;
  border-radius: 0px;
  padding: 0;
  position: absolute;
  top: 100%;
}
nav ul ul li {
  float: none;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
}
nav ul ul li a {
  padding: 15px 40px;
  color: #fff;
}
nav ul ul li a:hover {
  background: #4b545f;
}

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Tutorials</a>
      <ul>
        <li><a href="#">Photoshop</a></li>
        <li><a href="#">Illustrator</a></li>
        <li><a href="#">Web Design</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Articles</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">User Experience</a></li>
      </ul>
    </li>
    <li><a href="#">Inspiration</a></li>
  </ul>
</nav>

Answer 1

您将相对定位父 li 元素:

nav > ul > li {
    position: relative;
}

然后将直接ul子节点的位置设置为right: 0:

nav > ul > li > ul {
    right: 0;
}

在这样做时，子 ul 绝对定位于父 relative。

..如果您想防止文本换行，请添加 white-space: nowrap。

nav > ul > li > ul {
    right: 0;
    white-space: nowrap;
}