html - CSS 下拉菜单 - 和另一个之间的空间太大(边距 :0; Padding:0)

Question

我在进行中的网站中有 2 个下拉菜单，一个工作正常，另一个工作正常，但链接和另一个链接之间的空间完全破坏了它的图形。

不幸的是我不能发布图片，所以这是代码。

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>

悬停在“Benvenuto <%session("user") %> 上时会出现下拉菜单，所以这里是 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;
}

CSS 几乎是从我的其他下拉菜单中复制的，在高度和宽度等方面进行了调整。

另一个问题.. 有没有办法将下拉列表的宽度设置为百分比并始终获得父级宽度的 100%？就像让下拉菜单成为父级 <"li"> 的 100%，而不必专门写“188px”。

Answer 1

您可以使用 width: inherit 在 css 中获取父级的宽度。

这是li之间没有空格的菜单，只是将背景颜色应用于整个ul。 http://jsfiddle.net/2j1g200g/33/