html - css drop down menu :: sub menu is appearing within main menu after hover -


i have written css code drop down menu

problems drop down menu ::

  1. when hover on main menu item(i.e. in exapmle 2nd 1 "bbbbb") displays submenu...thats ok..but appearing in main menu increaing height
  2. the background of main menu becomes background of sub menu too,obviously dont want that
  3. in main menu list items starts lot of text-inedent,i dont want that
  4. text aligned right in submenu
  5. i want content width sub menu not more that

my html ::

<div class="menu">  <ul>    <li><a href="#">aaaaaaaaaa</a></li>    <li><a href="#">bbbbbbbbbb</a>       <ul>          <li><a href="#">aaaaaaaaaa</a></li>          <li><a href="#">bbbbbbbbbb</a></li>       </ul>    </li>   </ul> </div> 

my css::

.menu{    width:70%;    overflow:hidden;    background:green;    position:relative;  } .menu ul{list-style:none;} .menu ul li{ margin-left:20px;position:relative; float:left} .menu ul ul{display:none;} .menu ul li:hover ul{display:block; background:black;} .menu ul li:hover ul li{ float:none;} 

and please explain mistake

here fiddle

you have make changes in code.
fiddle css

.menu{  width:70%;  background:green;  position:relative;  } .menu ul{list-style:none;} .menu ul li{ margin-left:20px;position:relative; float:left} .menu ul ul{display:none;} .menu ul li:hover ul{display:block; background:black; position: absolute; margin: -2px 0 0 0; z-index: 11110;} .menu ul li:hover ul li{ float:none; height:20px; } 

updated fiddle
changes:
display: inline-block; occupies combined width of inner container.
position:relative; using in menu cause increase in height of outer container.
can read @ w3school


Comments

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

Function that returns a formatted array in VBA -