Question

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

我想增加子菜单项的ul宽度并查看全文。

请您告诉我该怎么做？

这是我的COAD：

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

Answer 2

在#menu li a中，使宽度更高或根本不放宽度。如果你根本没有放宽度，那么它会自己调整到文本的宽度。

CSS下拉菜单未显示子菜单项的完整文本

2 个答案: