Question

有这个菜单：

<li id="menu-item-32"><a href="#"><span>Dekanát</span></a>
      <ul>
           <li class="line"><a href="http://****.**/dekanat/farnosti/">Farnosti</a></li>
           <li ><a href="http://****.**/dekanat/duchovne-spravy/">Duchovné správy</a></li>
      </ul>
</li>

但是，如果在第二个li中有最长的文本，是这样的：

（问题出在3-4第二李！）

它没有设定尺寸......

CSS：

div#top-menu{
height: 36px;
margin-top: 10px;
margin-bottom: 3px;
background-color: #111;
background-image: url("http://****.**/project/wp-lop/wp-content/themes/LOP/img/nav-

bg.png");
}

div#top-menu ul li{
    float: left;
    list-style: none;
    display: block;
    position: relative;
    padding: 0 20px 0 20px;
    border-right: 1px solid #e3d8c4;
    margin-top: 0px;
    height: 36px;
}
div#top-menu ul li:hover{
    background-color: rgba(0,0,0,0.45);
}

div#top-menu ul li:last-child{
    border-right: none;
}

div#top-menu ul li a{
    text-transform: uppercase;
    color: #e3d8c4;
    text-decoration: none;
    display: block;
    font-weight: normal;
    margin-top: 7px;
}
div#top-menu ul li.active a{               
    color: #d99d4d;
}
div#top-menu ul li a:hover{
    color: #d99d4d;
}                                     
div#top-menu ul li a span{
    display: block;
}
div#top-menu ul li ul  { 
    font-size:15px;
    display: none;
    position: absolute;
    top: 36px; 
    left: 0px;
    width: 200px; 
    line-height: 29px;
    text-indent: 0px;
    padding:0px 0px 0px 0px;
    margin:0px; 
    background: #1F1B17;
    /*background-image: -moz-linear-gradient(#515151, #333);
    background-image: -webkit-linear-gradient(#515151, #333);
    background-image: -o-linear-gradient(#515151, #333);
    background-image: -ms-linear-gradient(#515151, #333);
    background-image: linear-gradient(#515151, #333);*/
    /*-webkit-border-radius: 2px;
    border-radius: 2px;*/
    z-index: 80;
}                              
div#top-menu ul li ul li:hover {
    color: #e0a95f;
}
div#top-menu ul li ul li{
    float: none;           
    display: block;
    border-bottom: 1px solid #e3d8c4;;
    border-right: none;
    position: relative;
    height: 29px;
    margin-top: -7px;
    text-transform: none;
}

如何解决？：/ Thanx

Answer 1

div#top-menu ul li{
    float: left;
    list-style: none;
    display: block;
    position: relative;
    padding: 5px 20px; /* you can use padding instead of giving height */
    border-right: 1px solid #e3d8c4;
    margin-top: 0px;
    height: 36px; /* you do not need that */
}
div#top-menu ul li ul  { 
    font-size:15px;
    display: none;
    position: absolute;
    top: 36px; 
    left: 0px;
    width: 200px; 
    /*line-height: 29px; also remove*/
    text-indent: 0px;
    padding: 0;
    margin:0px; 
    background: #1F1B17;
    z-index: 80;
} 


div#top-menu ul li ul li{
    float: none;           
    display: block;
    border-bottom: 1px solid #e3d8c4;;
    border-right: none;
    position: relative;
    /*height: 29px; / also remove it from here. */
    margin-top: -7px;
    text-transform: none;
}

我认为这是因为height

ul li a不按文字大小调整li的大小

1 个答案: