正确设置下拉菜单的样式答案

【问题标题】：Styling the drop down menu correctly正确设置下拉菜单的样式
【发布时间】：2015-09-15 10:39:59
【问题描述】：

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

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，并且已经潜入菜单。
当我将鼠标悬停在子菜单上时，我希望它的菜单颜色变为正常。就像当我将鼠标悬停在设置或注销上时，我只想改变子菜单的颜色，并且管理应该恢复到正常颜色。

【问题讨论】：

你想要this这样的东西吗？

标签： html css drop-down-menu

【解决方案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>

【讨论】：