I have created a drop down menu which rests inside header. I am having some problems in positioning and styling drop down sub-menus. My code is
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; } Now problems with this are
My sub-menus are overlapping each other may be because of padding set by me. Moreover there is some space between menu and drop down sub-menu which I think is
ulhere and has sneaked into menu.When I hover over sub-menu I want it's menu color changed to normal. Like when I hover over settings or logout I want only that sub-menu color changed and management should return to it's normal color.
