Правильное удаление выпадающего меню

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

Теперь проблемы с этим являются

1. Мои подменю перекрывают друг друга, может быть из-за дополнения, установленные меня. Кроме того, есть некоторое пространство между меню и выпадающим подменю, которое, я думаю, составляет ul здесь и прокралось в меню.

2. Когда я наводил курсор на подменю, я хочу, чтобы его цвет был изменен на нормальный. Например, когда я нахожусь над настройками или выходом из системы, я хочу изменить только цвет подменю, и управление должно вернуться к нормальному цвету.

Answer 1

Я думаю, что исправил положение для вас.

EDIT ... и жонглировал пару свойств для требуемого эффекта зависания.

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>