CSS下拉菜單不顯示子菜單項的全文

我想創建一個使用CSS和HTML下拉菜單，它工作正常，但問題是子菜單項不顯示全文。例如：如果我將鼠標懸停在鏈接1上，子菜單項會顯示，但我只能看到子菜單項中的前幾個文本。CSS下拉菜單不顯示子菜單項的全文

我想增加子菜單項ul的寬度並查看全文。

請您告訴我該怎麼做？

這裏是我的代碼：

HTML：

<div id="menu"> 
    <ul> 
    <li><a href="#nogo">Link 1</a> 
    <ul> 
    <li><a href="#nogo">ABC INFORMATION SYSTEM</a></li> 
    <li><a href="#nogo">ABC INFORMATION SYSTEM</a></li> 
    <li><a href="#nogo">ABC INFORMATION SYSTEM</a></li> 
    </ul> 
    </li> 
    <li><a href="#nogo">Link 2</a> 
    <ul> 
    <li><a href="#nogo">Link 2-1</a></li> 
    <li><a href="#nogo">Link 2-2</a></li> 
    <li><a href="#nogo">Link 2-3</a></li> 
    </ul> 
    </li> 
    <li><a href="#nogo">Link 3</a> 
    <ul> 
    <li><a href="#nogo">Link 3-1</a></li> 
    <li><a href="#nogo">Link 3-2</a></li> 
    <li><a href="#nogo">Link 3-3</a></li> 
    </ul> 
    </li> 
    </ul> 
    </div>

CSS

#menu{ 
text-align:left; 
top:90px; 
margin-left:230px; 
position:absolute; 
z-index:100; 
} 

#menu ul{ 
padding:0; 
margin:0; 
} 

#menu li{ 
position: relative; 
float: left; 
list-style: none; 
margin: 0; 
padding:0; 
} 

#menu li a{ 
width:135px; 
height: 30px; 
display: block; 
text-decoration:none; 
text-align: center; 
line-height: 30px; 
background-color: #A7C66B; 
color: white; 
} 

#menu li a:hover{ 
background-color: red; 
} 

#menu ul ul{ 
position: absolute; 
top: 30px; 
visibility: hidden; 

} 

#menu ul li:hover ul{ 
visibility:visible; 
}

來源

2012-03-19 black_belt

增加子菜單的大小以下內容添加到你的CSS：

#menu ul ul li a{ 
    width:335px; 
    height: 30px; 
    display: block; 
    text-decoration:none; 
    text-align: center; 
    line-height: 30px; 
    background-color: #A7C66B; 
    color: white; 
}

來源

2012-03-19 21:12:34 c0deNinja

非常感謝c0deNinja。它的工作:) – 2012-03-19 21:28:28

在#menu li a使寬度大於或把沒有寬度的。如果你根本沒有放寬，那麼它會自動調整爲文本的寬度。

來源

2012-03-19 21:07:48

感謝您的答覆。如果我將寬度設置得更高，那麼整個菜單變得如此之大。我只是想增加子菜單項的大小。再次感謝:) – 2012-03-19 21:11:47

當你像我說的那樣增加寬度。在#menu li a中，只有子菜單變寬，而不是主菜單部分。另一種方法是減小子菜單的字體大小。 – 2012-03-19 21:17:01

CSS下拉菜單不顯示子菜單項的全文

回答

相關問題