Question

I am currently working on a pure css multilevel drop-down menu and I cannot for the life of me figure out how to get the drop-down to automatically align to the left of side of the parent menu.

Here is a screenshot

Here is the css

/*---------HEADER MENU---------*/
#header .content ul.menu li ul{
  display: none;
  margin: 0;
  float: left;
  padding: 0;
  position: absolute;
  z-index: 200;
}
#header .content ul.menu li ul li{
 position: relative;
 top: 20px;
 margin: 0;
}
#header .content ul.menu li:hover > ul{
 display: inline;
 float: left;
 width: 125px;
}

#header .content ul.menu li ul li li{
 width: 125px;
 float: left;
 position: absolute;}

/*---------VISITORS MENU---------*/
#block-menu-menu-visitors .content ul.menu{
  z-index: 200;
}
#block-menu-menu-visitors .content ul.menu li{
 padding: 2px 15px 2px 15px;
 display: inline-block;
 float: left;
 background-color: #ffff90;
}

#block-menu-menu-visitors .content ul.menu li:hover{
 padding: 2px 15px 2px 15px;
 float: left;
 display: inline-block;
 background-color: #ffffaa;
}

Here is the HTML/PHP

This puts whatever “header” element I have (which in this case is a menu) right under the main-menu section.

Any help or push in the right direction will help! Thank you

Answer 1

I think…

#header .content ul.menu li:hover > ul{
display: block;
float: left;
width: 125px;
}

might work. If not add the html and I can give you the correct answer. Ben.