Question

我创建了一个下拉菜单，它位于标题内。我在定位和样式下拉子菜单时遇到一些问题。我的代码是

HTML

<ul class="dd">
    <li>
        <a href="main.php" >Home</a>
    </li>
    <li>
        <a href="' . $user . '">Profile</a>
    </li>
    <li>
        <a href="my_messages.php">Inbox' . $unread_numrows . '</a>
    </li> 
    <li>
        <a href="#">Management</a>
        <ul>
            <li>
                <a href="account_settings.php">Settings</a>
            </li>
            <li>
                <a href="logout.php">Logout</a>
            </li>
        </ul>
    </li>
</ul>

CSS

@media screen and (max-width: 1280px) {
    .dd {
        background-color:#BF3B3D;
        position: absolute;
        right:0px;
        top:0;
        margin-right: 4%;
    }
}
@media screen and (min-width: 1280px) {
    .dd {
        background-color:#BF3B3D;
        position: absolute;
        right:0px;
        top:0;
        margin-right: 10%;
    }  
}
@media screen and (min-width: 1920px) {
    .dd {
        background-color:#BF3B3D;
        position: absolute;
        right:0px;
        top:0;
        margin-right: 25%;
    }
}
.dd li {
    top:18px;
    background-color: #BF3B3D;
    float: left;
    position: relative;
    list-style: none;
}
.dd li:hover{
    background-color: #7A0709;
}
.dd  a{
    font-size: 14px;
    color:#ffffff;
    text-decoration: none;
    background-color: #BF3B3D;
    padding: 10px 5px 10px 5px;
    border-radius: 5px;
}
.dd li:hover a{
    background-color: #7A0709;
}
.dd li:hover li a{
    background-color:#BF3B3D;
}
.dd li ul{
    display: none;
}
.dd li:hover ul {
    display: block; 
    position: absolute;
}     
.dd li ul li:hover a{
    background-color: #7A0709;
}

现在问题是

我的子菜单彼此重叠可能是因为我设置的填充。此外，菜单和下拉子菜单之间还有一些空间，我认为这里有ul并潜入菜单。
当我将鼠标悬停在子菜单上时，我希望它的菜单颜色更改为正常。就像当我将鼠标悬停在设置或注销上时，我只想改变子菜单颜色，管理层应该恢复正常的颜色。

Answer 1

我想我已经为你修好了定位。

编辑 ...并为所需的悬停效果调整了几个属性。

ul {
  list-style-type: none;
  padding: 0;
}
.dd {
  margin: 2em;
}
.dd > li {
  float: left;
  position: relative;
  border-radius: 5px;
}
.dd > li a {
  background-color: #BF3B3D;
}
.dd li a:hover {
  background-color: #7A0709;
}
.dd a {
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
  background-color: #BF3B3D;
  padding: 10px 5px 10px 5px;
  display: block;
}
.dd li:hover li a {
  background-color: #BF3B3D;
}
.dd li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}
.dd li:hover ul {
  display: block;
}
.dd li ul li:hover a {
  background-color: #7A0709;
}

<ul class="dd">
  <li><a href="main.php">Home</a>
  </li>
  <li><a href="' . $user . '">Profile</a>
  </li>
  <li><a href="my_messages.php">Inbox</a>
  </li>
  <li><a href="#">Management</a>
    <ul>
      <li><a href="account_settings.php">Settings</a>
      </li>
      <li><a href="logout.php">Logout</a>
      </li>
    </ul>
  </li>
</ul>

正确设置下拉菜单的样式

1 个答案: