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 ::
- when hover on main menu item(i.e. in exapmle 2nd 1 "bbbbb") displays submenu...thats ok..but appearing in main menu increaing height
- the background of main menu becomes background of sub menu too,obviously dont want that
- in main menu list items starts lot of text-inedent,i dont want that
- text aligned right in submenu
- 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
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
Post a Comment