CODEWITHSUNDEEP
cssmenu
matt stewart
matt stewart

Reputation: 13

CSS submenu not aligning to menu parent

I have been working to get the submenu aligned with the proper menu parent item, but cannot figure out the issue.

site is: http://www.voiceoverdynamite.com/

about us and artist bios both have submenus. about us i have styled to work pretty much how i want, but it doesn't carry over to other menu items, they all show up under about us.

here is the css:

.mainmenu
{
    height:40px;
    background:#333;
    position:relative;
    border-radius:3px 3px 0 0;
    text-align:center;
}

.mainmenu ul
{
    padding:0px;
    margin:0px;
    list-style:none;
}

.mainmenu ul li
{
    display:inline;
    height:40px;
    line-height:38px;
}

.mainmenu ul li a
{
    display:inline-block;
    font-weight:300;
    font-size:18px;
    color:#fff;
    padding:0 20px;
    border-top:2px solid #333;
    height:38px;
}

.mainmenu ul li a:hover 
{
    color:#333538;
    background:#fff;
    border-top:2px solid #cf0a2c;
    text-decoration:none;
}

.mainmenu ul li.current-menu-item a {
    color:#333538;
    background:#fff;
    text-decoration:none;
    }

.mainmenu li ul {
    position: absolute;
    top:40px;
    left:0;
    right:auto;
    display: none;
    margin-left:100px;
    }

.mainmenu li:hover ul {
    display: block;
    background:#fff;
    color:#333;
    border:2px solid #cf0a2c;
    border-top:none;

  }

.mainmenu li ul li {
    display: block;

  }

.mainmenu li ul li a
{
    color:#333;
    background:#fff;
    border-top:none;

}

.mainmenu li ul a:hover
{
    color:#fff;
    background:#000;
    border-top:none;
    text-decoration:none;
    width:auto;
    height:auto;
}

Thanks in advance!

Upvotes: 1

Views: 558

Answers (1)

Turnip
Turnip

Reputation: 36632

Give your menu items a position...

.mainmenu ul li
{
  ...
  position: relative;
}

This will allow you to position your nested ul relative to the parent rather that the next positioned element up the tree (which looks to be .wrapper).

Remove the margin-left from the nested ul as it is not needed...

.mainmenu li ul {
  position: absolute;
  top: 40px;
  left: 0;
  right: auto;
  display: none;
  margin-left: 100px;
  width: 200px;
}

Upvotes: 2

Related Questions