Question

我正在尝试了解制作CSS下拉菜单的教程。

image http://line25.com/wp-content/uploads/2012/css-menu/4.jpg

在上图中，子菜单的左边框与父图案的左边框对齐。我希望子菜单的右边框与父级的右边框对齐，而保留子菜单的宽度。即子菜单应该向左翻译一点。

我尝试将position: relative;添加到子菜单的直接父级，但文本＆＃34;网页设计＆＃34;分为2行;那很难看。

这是我的代码：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您将相对定位父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;
}

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

1 个答案: