В раскрывающемся меню CSS не отображаются полные тексты пунктов подменю - PullRequest
0 голосов
/ 20 марта 2012

Я пытаюсь создать раскрывающееся меню с использованием CSS и HTML, оно работает нормально, но проблема в том, что пункты подменю не отображают полные тексты.Например: если я наведусь на ссылку-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;
} 

Ответы [ 2 ]

2 голосов
/ 20 марта 2012

, чтобы увеличить размер подменю, добавьте следующее к вашему 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;
} 
0 голосов
/ 20 марта 2012

In #menu li a увеличить ширину или вообще не добавлять ширину.Если вы вообще не указали ширину, она подстраивается под ширину текста.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...