Question

我无法弄清楚为什么我的产品下拉式子导航中的填充不正确。请帮忙！这是测试网站... http://test.wimsattdirect.com/test2/navigation3.html#

这是代码： HTML：

<nav class="slide nav slidenav">
            <ul>
                <li><h2><a href="../trunk.html" class="active">HOME</a></h2></li>
                <li><h2><a href="#">PRODUCTS</a>
                    <ul class="subnav">
                        <li><a href="#">drop1</a></li>
                        <li><a href="#">drop2</a></li>
                        <li><a href="#">drop 3</a></li>
                    </ul><!--end subnav-->
                </h2></li>    
                <li><h2><a href="#">SERVICES</a></h2></li>
                <li><h2><a href="#">LOCATIONS</a></h2></li>
                <li><h2><a href="#">NEWS/EVENTS</a></h2></li>
                <li><h2><a href="#">CAREERS</a></h2></li>
                <li><h2><a href="#">PROS</a></h2></li>
                <li><h2><a href="#">OUR STORY</a></h2></li>
            </ul>
        </nav>
        <!-- end DESKTOP menu -->

css：

 .slidenav {
    position: fixed;
    top: 0;
    right: 5px;
}

.slidenav li {
    float: left;
    display: inline-block;
    overflow:hidden;    
}
.slidenav li a {
    color: #3A3D3F;
    padding-top: 26px;
    padding-left: 11px;
    display: block;
    overflow: hidden;
    padding-right: 9px;

}



.subnav { width: 120px;
margin: 0;
height: 50px;}



.slidenav li ul {-webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  }


.slidenav li a:hover {color: #000;}




.slidenav ul li subnav ul {
    padding: 0;
    position: relative;
    left: 0;
    display: none;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    -webkit-transition: height 200ms ease-in;
    -moz-transition: height 200ms ease-in;
    -o-transition: height 200ms ease-in;
    transition: height 200ms ease-in;
}


.slidenav ul li ul.subnav a {
    display: none;
    overflow:hidden;    
}

.slidenav ul li:hover ul.subnav a {
    display: block;
    overflow:hidden;
        } 
.slidenav ul li:hover ul.subnav li {
    width: 100%;
    overflow: hidden;
    background-color: #C2C2C2;
     }

.nav ul {
    *zoom:1;
    list-style:none;
    margin:0;
    padding:0;

}
.nav ul:before,.nav ul:after {
    content:"";
    display:table;
}
.nav ul:after {
    clear:both;
}
.nav ul > li {
    float:left;
    position:relative;
}
.nav a {
    display: block;
    padding-right: 20px;
    padding-bottom: 10px;
    line-height: 0px;

}


.nav a:hover {
    text-decoration:none;
    background:#595959;
}

.nav li ul li {
    width:200px;
    height:0;
    -webkit-transition:height 200ms ease-in;
    -moz-transition:height 200ms ease-in;
    -o-transition:height 200ms ease-in;
    transition:height 200ms ease-in;
}
.nav li ul a {
    border:none;
}
.nav li ul a:hover {
    background:rgba(0,0,0,0.2);
}


.nav li ul {
    position:relative;
    left:10;
    margin: 0;
    z-index:0;

}

.nav ul > li:hover ul li {
    height:76px;

}

Answer 1

将line-height: 0px;更改为line-height: normal;（style.min.css第32行）

.nav a {
    display: block;
    padding-right: 20px;
    padding-bottom: 10px;
    line-height: normal;
}

.slidenav ul li ul.subnav a
{
   overflow: hidden;
   display: block;
   padding: 10px;
}

在我的subnav上填充不好

1 个答案: