html - - not filling space in in CSS submenu -



html - <li> not filling space in <ul> in CSS submenu -

i trying create css menu @ loss why li elements in submenus wont fill parent ul

a sample of menu @ [ http://www.ericsicons.com/css_sample.html ]

hover on item 3 , item 4, ul container has greenish border, how rid of margin.

the css follows

.mainmenu { border-top: 1px solid black; border-left: 1px solid black; width: 350px; padding:0; margin: 0; } .mainmenu { text-decoration: none; padding-top: 10px; padding-bottom: 10px; display: block; width:100%; } .mainmenu li:hover { background-color: lightskyblue; } .mainmenu li{ list-style: none; text-align: center; } .mainmenu > li{ border-right: 1px solid black; border-bottom: 1px solid black; display: inline-block; width:80px; } .mainmenu > li li { border-top: 1px solid black; border-left: 1px solid black; } .dropdown{ position: relative; } .dropdown:hover > .submenu{ opacity:1; } /*submenus*/ .submenu { position: absolute; border: 1px solid green; opacity:0.0; -webkit-transition: opacity 1s ease; -moz-transition: opacity 1s ease; -ms-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; } .submenu_first{ top: 30px; left: 0px; } .submenu_other{ top: 0px; left: 70px; }

the html

<ul class="mainmenu"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li class="dropdown"><a href="#">item 3 ></a> <ul class="submenu"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> </ul> </li> <li class="dropdown"><a href="#">item 4 ></a> <ul class="submenu"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> </ul> </li> </ul>

try this:

.submenu { padding: 0px; width: 100%; }

you should remove left border on li in .submenu .submenu ul has left border.

html list css3 menu width

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -