Раскрывающееся меню ширины misbehaving

Question

Мой пункт меню с выпадающим подменю расширяется каждый раз, когда я нажимаю. Ниже приведен код HTML.

<header id="header"> 
    <div style="width:90%; margin:auto;"> 
     <div id="logo"><a href="#">Inversion iDeas</a></div> 
     <nav id="nav"> 
      <ul> 
       <li><a href="#home" title="Welcome" >Inversion iDeas<br /><span class="desc">welcome</span></a></li> 
       <li><a href="#about" title="About Us">Discover<br /><span class="desc">About Us</span></a> 
        <ul> 
         <li><a href="services.php">Our Services</a></li> 
         <li><a href="services.php#CMS">Content Marketing Strategy</a></li> 
         <li><a href="services.php#publishing">Print & Digital Publishing</a></li> 
         <li><a href="services.php#DIM">Direct Interactive Marketing</a></li> 
         <li><a href="services.php#social-media">Social Media Marketing</a></li> 
         <li><a href="services.php#search">Search Marketing</a></li> 
         <li><a href="services.php#video">Video</a></li> 
         <li><a href="services.php#EME">Experiential Marketing Events</a></li> 
         <li><a href="services.php#CMI">Current Media Ideas</a></li> 
         <li><a href="services.php#events">Events</a></li> 
         <li><a href="services.php#web-mobile">Web & Mobile</a></li> 
         <li><a href="services.php#leadership">Leadership</a></li> 
        </ul> 
       </li> 
       <li><a href="#media" title="Media">Experience<br /><span class="desc">media</span></a></li> 
       <li><a href="#clients" title="Satisfied Clients">Testimony<br /><span class="desc">Satisfied Clients</span></a></li> 
       <li><a href="#contact-us" title="Contact Us">Reach Us<br /><span class="desc">contact us</span></a></li> 
      </ul> 
     </nav> 
    </div> 
</header> 

CSS

header { 
width: 100%; 
background:#000; 
opacity:0.8; 
height: 80px; 
position: fixed; 
margin-top: 30px; 
z-index:999; 
} 

#logo a { 
color: #fff; 
text-decoration: none; 
float: left; 
font-size: 30px; 
margin-top: 20px; 
font-family:"century gothic"; 
font-weight: normal; 
height:45px; 
width:287px; 
text-indent:-9999px; 
background:url(../images/logo.png) 0 0 no-repeat; 
} 

#nav { 
width: 800px; 
position:fixed; 
top:50px; 
left:400px; 
} 

#nav ul{ 
list-style: none; 
display: block; 
margin: 0; 
padding: 0; 
} 

#nav li{ 
float: left; 
padding: 10px 20px 0 20px; 
border-left:solid 1px #fff; 
text-align:center; 
height:40px; 
display:block; 
font-size:12px; 
} 
#nav li:first-child{ 
border-left:none; 
} 
#nav li a { 
color: #fff; opacity:0.7; font-size: 16px; text-decoration: none; font-family: Verdana, Geneva, sans-serif; 
} 
#nav li a.active { color: #94c600; opacity:1;} 
#nav li a:hover { color: #94c600; opacity:1; width:100%;} 
#nav li ul { display: none;} 
#nav li:hover ul {display: block; position: relative; top:8px; left:-20px; width:160px; padding:0;} 
#nav li:hover li {float: none; font-size:12px; background:rgba(0,0,0,0.8); border-left:none; text-align:left; } 
#nav li:hover li a {font-size:12px; padding:0; margin:0;} 
#nav li:hover li a:hover {color:#94c600;} 

.desc{ 
font-size:12px; 
color:#333; 
display: block; 
} 

Answer 1

я добавил позиционирование вашего CSS

#nav li ul { display: none; position: relative;} 

#nav li:hover ul {display: block; position: absolute; top:48px; left:168px; width:160px; padding:20px 0 0 0;} 
#nav li:hover li {float: none; font-size:12px; background:rgba(0,0,0,0.8); border-left:none; text-align:left;} 

Смотрите работает жить здесь

http://codepen.io/jhawes/pen/lyevj

Answer 2

position: relative; на родителя. position: absolute; на ребенка.

JSfiddle (пожалуйста, один в следующий раз, когда вы размещаете)