CSSドロップダウンメニューにサブメニュー項目の全文が表示されない

Question

CSSとHTMLを使用してドロップダウンメニューを作成しようとしていますが、問題はありませんが、サブメニュー項目はフルテキストを表示しません。例：リンク1にカーソルを置くと、サブメニュー項目が表示されますが、サブメニュー項目の最初のテキストしか表示されません。

サブメニューのulの幅を広げて、フルテキストを見たいと思っています。

どうすればいいですか教えてください。

は、ここに私のコードです：

HTML：#menu li aで

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

Answer 1

は、あなたの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; 
} 

Answer 2

幅を高くするか、まったく幅を入れていません。 幅をまったく入れないと、テキストの幅に合わせて調整されます。サブメニューのサイズを大きくする