Setting drop-down menu - html

Question

I have made a drop down menu and got some styling issues with it. My code for drop down menu is
<ul class="dd">
<li><a href="main.php" >Home</a>
</li>
<li>Profile
</li>
<li>Inbox' . $unread_numrows . '
</li>
<li>Management
<ul>
<li>Settings
</li>
<li>Logout
</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 {
border-radius: 4px;
background-color: #BF3B3D;
float: left;
position: relative;
list-style: none;
top:8px;
padding: 10px 5px 10px 5px;
}
.dd li:hover{
background-color: #7A0709;
}
.dd li a{
font-size: 14px;
color:#ffffff;
text-decoration: none;
background-color: #BF3B3D;
}
.dd li ul li{
top: 14px;
border-radius: 4px;
}
.dd li:hover ul{
background-color: #BF3B3D;
}
.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:hover li {
float: none;
}
.dd li ul li:hover a{
background-color: #7A0709;
}
Now when I hover over menu it's color changes and so for sub-menu's, but when sub-menu's are open under menu the color for that menu is also changed though I am rolling over sub-menu so when rolling over sub-menu I want only sub-menu's color changed and menu should go back to it's color. Also their appears to be some space between sub-menu and menu that took some of space inside menu I want to get rid of that space.

Answer 1

To fix that hover effect problem use immediate children selector for main menu hover css. like this.
.dd > li:hover{
background-color: #7A0709;
}
">" will only select immediate children only. so on sub menus will only effect by your other css hover.
to fix height problem you should provide top main menu a display:block and fixed height as you want. to help on that more, you better provide a fiddle.