2013-02-28 67 views
0

A中的李有這樣的菜單:UL李未調整的文字大小

<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> 

但是,如果在第二個裏有最長的文字,是這樣的:

(這個問題在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; 
} 

如何解決? :/感謝名單

+0

嘗試把你的保證金...填充在一個CSS屬性,我認爲這是更好的解決方案。 – Russo 2013-02-28 09:10:32

回答

0
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

+0

如果我沒有使用它的高度,它的使用高度從UL裏... – GAMELASTER 2013-02-28 09:15:38

+0

也許你可以嘗試從'#頂級菜單UL LI'刪除'高度' – agriboz 2013-02-28 09:17:32

+0

好吧,它是一個固定的,我禁用高度ul li ul li(@agriboz thanx :))並且只在ul li中將寬度設置爲最小寬度... Thanx :) – GAMELASTER 2013-02-28 09:18:33