CSS 下拉菜单 - <li> 另一个之间的空间太大(边距：0;填充：0)

Question

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

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

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% ?比如让下拉菜单100%是父菜单<</p>

Answer 1

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

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