0

I got 2 dropdowns in my work-in-progress site, one works just fine, the other works aswell but the space between a link and another is completely destroying the graphics of it.

Unluckly for me I can't post images, so here is the code.

HTML 

                <ul class="header">
                    <% IF Session("Authenticated") = 0 THEN %>
                        <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" THEN %>
                                    <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") %>, so here is the 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 is pretty much copyed from my other dropdown menu, adapted in heights and widths and so on.

Another question.. is there a way to set the width of the dropdown as percentage and always obtain 100% of the parent's ? Like Having the dropdown menu be 100% of the parent <"li">, without having to specifically write "188px".

Andrea
  • 17
  • 5

1 Answers1

0

You can use width: inherit to get parent's width in css.

Here is the menu without spaces between li, just applied backround-color to whole ul. http://jsfiddle.net/2j1g200g/33/

yuk
  • 945
  • 7
  • 14
  • Okay fixed the main issue thanks to you, that said, i tryed the width:inherit and it just won't work.. Either it expands the "li" to the whole page (100%) or just won't fit right (different size li's, depending on the content) – Andrea May 31 '15 at 11:53