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 &nbsp; <img src="immagini/login.gif"> </li>                     <% else %>                         <li class="right" id="logout"> logout &nbsp; <img src="immagini/login.gif"> </li>                         <li class="right"> benvenuto <%=session("user")%> &#9662;                             <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

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -