CODEWITHSUNDEEP
htmlcssdrop-down-menu
Axel Puyo
Axel Puyo

Reputation: 11

Sub menu of dropdown menu pushing ul li

here is what's happening.

As required!

http://jsfiddle.net/U99Br/

https://i.sstatic.net/Q466a.png

So I'm making this web site with a drop down menu, until now it was all good, but while doing my drop-down menu (I wanted to do something of the sort of Netflix's menu), I noticed my sub-menu is pushing the "contact" li tag 300px away (which is it's length).

Here's my code: 

#menu,
#menu ul,
#menu li {
 margin: 0;
 padding: 0;
 list-style: none;
 }

#menu a {
 text-decoration: none;
  }

#menu {
 height: 60px;
 width: auto;
  }

#menu > ul > li {
 float: left;
 margin-left: 15px;
 position: relative;
  }

#menu > ul > li > a {
 color: #fff;
 text-shadow: 1px 1px 5px #737373;
 font-size: 20px;
 line-height: 60px;
 padding: 15px 20px;
  }

#menu > ul > li > a:hover {
 color: #000;
  }

#menu > ul > li > ul {
 opacity: 0;
 visibility: hidden;
 display: none;
 background-color: #fff;
 text-align: left;
 height: auto;
 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
 width: 300px;
  }

#menu > ul > li:hover > ul {
 display: block;
 border: none;
 visibility: visible;
 opacity: 1;
  }

#menu > ul > li > ul > li {
 display: block;
 content: '';
  }

#menu > ul > li > ul > li > a {
 font-size: 12px;
 color: #000;
 display: block;
 text-shadow: none;
  }

#menu > ul > li > ul > li > a:hover {
 color: #0AB3FC;
  }

#menu > ul ul > li {
  position: relative;
}

I have not found what's wrong in my coding yet!

Upvotes: 1

Views: 2938

Answers (1)

caramba
caramba

Reputation: 22480

ad a width to the first ul li so children can not push up width from parent

#menu > ul > li {
   width:300px; /* add with here */
   float: left;
   margin-left: 15px;
   position: relative;
}

Upvotes: 2

Related Questions