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

Question

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

css

3

我正在尝试理解一个有关制作CSS下拉菜单的教程。

_{(来源: line25.com)}

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

我尝试将position:relative;添加到子菜单的直接父级中，但是“Web Design”文本会被分成两行，这很丑陋。

该教程来自下拉菜单。

以下是我的代码：

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>

- JACK M

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Crozier · Accepted Answer

您需要为父级 li 元素设置相对定位：

nav > ul > li {
    position: relative;
}

然后将直接的ul子元素的位置设置为right: 0:

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

这样做，子元素 ul 将相对于父元素进行绝对定位。

如果你想防止文本换行，可以添加 white-space: nowrap。

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