CODEWITHSUNDEEP
css
black_belt
black_belt

Reputation: 6799

CSS dropdown menu not showing the full texts of submenu items

I am trying to create a drop down menu using CSS and HTML, it is working fine but the problem is the sub menu items does not show the full texts. For example: If I hover on the link-1 the sub menu items shows up but I can only see first few of the texts from the sub menu items.

I want to increase the width of ul of the submenu items and see the full texts.

Would you please kindly show me how to do it?

Here's my COde:

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

Upvotes: 0

Views: 2110

Answers (2)

c0deNinja
c0deNinja

Reputation: 3986

to increase the size of the submenus add the following to your 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;
}

Upvotes: 2

Sven Bieder
Sven Bieder

Reputation: 5681

In #menu li a make the width higher or put no width at all. If you put no width at all, then it adjusts itself to the width of the text.

Upvotes: 0

Related Questions