html - CSS Dropdown Menu - Too Much Space Between <li> and another (Margin:0; Padding:0) -
i got 2 dropdowns in work-in-progress site, 1 works fine, other works aswell space between link , destroying graphics of it.
unluckly me can't post images, here code.
html
<ul class="header"> <% if session("authenticated") = 0 %> <li class="right" id="clicktoshow"> login <img src="immagini/login.gif"> </li> <% else %> <li class="right" id="logout"> logout <img src="immagini/login.gif"> </li> <li class="right"> benvenuto <%=session("user")%> ▾ <ul> <% if session("amministratore") = "true" %> <li> <a href="materiains.asp"> <p> inserisci materia </p> </li> <li> <a href="argomentoins.asp"> <p> inserisci argomento </p> </li> <% end if %> <li> <a href="paginaris.asp"> <p> pagina riservata </p> </a> </li> </ul> </li> <% end if %> </ul>
the dropdown menu appears on hover on " benvenuto <%session("user") %>, here css..
ul.header { color: #e6e6e6; text-transform: capitalize; font-size: 14px; font-family: verdana, geneva, sans-serif; list-style-type: none; padding: 0; margin: 0 auto; } /* elementi sinistra - gestione bordi */ li.left{ float: left; display: inline-block; border-right: 3px dotted; border-color: #585858; margin-left: 20px; padding-right: 10px; } li.left:first-child { border-right: none; padding-right: 0; line-height: 30px; padding-top: 3px; } li.left:nth-child(2){ /* css3 */ border-left: 3px dotted; border-color: #585858; padding-left: 10px; } img.logo { width: 23px; height: 22px; max-height: 70%; } /* elementi destra - dropdown on username logged */ li.right { float: right; display: block; margin: 0 auto; padding: 0 7px 0 0; } li.right:first-child { float: right; display: block; margin: 0 auto; padding: 0 0 0 7px; } li.right:last-child { margin: 0 30px 0 0; } #clicktoshow:hover { cursor: pointer; } #logout:hover { cursor: pointer; } li.right img { height: 27px; float: right; } /* logged user dropdown */ li.right ul{ visibility: hidden; min-width: 188px; color: #e6e6e6; display: block; box-sizing: border-box; position: absolute; z-index: 75; margin: 0 auto; padding: 0; } li.right:hover > ul, li.right ul:hover { visibility: visible; margin: 0 auto; padding: 0; } li.right ul li { min-width: 100%; width: 100%; background-color: #484848; display: block; margin: 0 auto; padding: 0; } li.right ul li:hover{ background-color: #3b3b3b; } li.right ul li p { color: #e6e6e6; font-size: 15px; text-align: center; }
the css pretty copyed other dropdown menu, adapted in heights , widths , on.
another question.. there way set width of dropdown percentage , obtain 100% of parent's ? having dropdown menu 100% of parent <"li">, without having write "188px".
you can use width: inherit
parent's width in css.
here menu without spaces between li, applied backround-color whole ul. http://jsfiddle.net/2j1g200g/33/
Comments
Post a Comment