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
Post a Comment