Question

我的网站上有一个下拉菜单，我希望它与“资源”标签完全一致（将鼠标悬停在该菜单上会打开该下拉菜单）。我曾尝试在“资源” ul内的li中添加边距，但是它并没有改变我想要的样式。我是在错误的选择器中输入CSS还是使用错误的属性？

这是我的HTML和CSS：

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: orange;
}

nav {
  width: 100%;
  height: 60px;
  background-color: black;
  display: flex;
}

nav p {
  text-align: center;
  font-family: arial;
  color: white;
  font-size: 24px;
  line-height: 55px;
  float: left;
  padding: 0px 20px;
  flex: 1 0 auto;
}

nav ul {
 position: absolute;
 right: 0;
}

nav ul li {
  float: left;
  list-style: none;
  position: relative; /* we can add absolute position in subcategories */
  padding-right: 1em;
}

nav ul li a {
  display: block;
  font-family: arial;
  color: white;
  font-size: 14px;
  padding: 22px 14px;
  text-decoration: none;
}


nav ul li ul {
  display: none;
  position: absolute;
  background-color: black;
  padding: 5px; /* Spacing so that hover color does not take up entire chunk */
  border-radius: 0px 0px 4px 4px;
}

nav ul li:hover ul {
  /* This means when li is hovered, we want the unordered list inside list item to do something. */
  display: block;
}


nav ul li ul li{
   width: 130px; /* increases width so that all text can be fit */
  border-radius: 4px;
}

nav ul li ul li a:hover {
  background-color: #ADD8E6;
}

<nav>
  <p> The Novel Column </p>
  <ul>
    <li> <a href="#"> Resources </a>
      <ul> 
        <li> <a href="#"> Book Reviews </a> </li>
        <li> <a href="#"> Quotes and Principles </a> </li>
        <li> <a href="#"> Community Aid </a> </li>
      </ul>
    </li>
    <li> <a href="#"> About Us </a> </li>
  </ul>
</nav>

Answer 1

添加

nav ul li ul {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

left: 50%将下拉列表的左边缘置于其父级的中心。然后translateX(-50%)将其向左移动下拉菜单宽度的一半。最后，right: auto确保下拉菜单的宽度不会弄乱。

演示： https://jsfiddle.net/7Lzb8u6t/

Answer 2

添加translateX() CSS属性以移动您的盒子，您可以使用transform value并匹配您的确切位置，

有关更多信息，1 rem = 16px;

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: orange;
}

nav {
  width: 100%;
  height: 60px;
  background-color: black;
  display: flex;
}

nav p {
  text-align: center;
  font-family: arial;
  color: white;
  font-size: 24px;
  line-height: 55px;
  float: left;
  padding: 0px 20px;
  flex: 1 0 auto;
}

nav ul {
 position: absolute;
 right: 0;
}

nav ul li {
  float: left;
  list-style: none;
  position: relative; /* we can add absolute position in subcategories */
  padding-right: 1em;
}

nav ul li a {
  display: block;
  font-family: arial;
  color: white;
  font-size: 14px;
  padding: 22px 14px;
  text-decoration: none;
}


nav ul li ul {
  display: none;
  position: absolute;
  background-color: black;
  padding: 5px; /* Spacing so that hover color does not take up entire chunk */
  border-radius: 0px 0px 4px 4px;
  transform: translateX(3rem);
}

nav ul li:hover ul {
  /* This means when li is hovered, we want the unordered list inside list item to do something. */
  display: block;
}


nav ul li ul li{
   width: 130px; /* increases width so that all text can be fit */
  border-radius: 4px;
}

nav ul li ul li a:hover {
  background-color: #ADD8E6;
}

<nav>
  <p> The Novel Column </p>
  <ul>
    <li> <a href="#"> Resources </a>
      <ul> 
        <li> <a href="#"> Book Reviews </a> </li>
        <li> <a href="#"> Quotes and Principles </a> </li>
        <li> <a href="#"> Community Aid </a> </li>
      </ul>
    </li>
    <li> <a href="#"> About Us </a> </li>
  </ul>
</nav>

更改下拉菜单的位置

2 个答案: