CSS 下拉菜单不显示子菜单项的全文

Question

我正在尝试使用 CSS 和 HTML 创建下拉菜单，它工作正常，但问题是子菜单项不显示完整文本。例如:如果我将鼠标悬停在 link-1 上，则会显示子菜单项，但我只能看到子菜单项中的前几个文本。

我想增加子菜单项的 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;
} 

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