CODEWITHSUNDEEP
htmlcssless
19wolf
19wolf

Reputation: 402

Sub-menu creates extra space

I'm trying to make a vertical css menu with sub-menus. I've done some research and can't quite find an answer to my specific problem. The ul within the li is positioned correctly (Edit: I'd like the first li in the li>ul to be inline with the li, "1" inline with "Two"), but the li containing the ul becomes larger, and I'd like that not to happen. Example here: http://cssdesk.com/PHPNv

Upvotes: 0

Views: 67

Answers (1)

Tim Mac
Tim Mac

Reputation: 1149

You're pretty close, but I made a couple of changes which should help you out.

nav li {
  background:#abcdef;
  border-bottom:solid 1px #9abcde;
  color:#000;
  display:block;
  padding:1em 0;
  text-align:left;
  text-indent:1em;
  text-decoration:none;
  width:100%;
  position:relative; /* need to add so nested elements are positioned relative to the current menu item */
}

nav li:hover ul {
  display: block;
  top:0;
  width:100%;
  position:absolute; /*need position absolute here to take it out of the 'flow'*/
  left:100%;
}

Upvotes: 1

Related Questions