WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Please help with css dropdown menu

Reply
  Thread Tools Display Modes
Old 31st May 12, 03:28 PM   #1
pablodilo
WLC Member
 
Join Date: May 2012
Posts: 4
Default Please help with css dropdown menu

Hi everyone, im new to css , and first of all thanks for any of response i may have... i hope some day i can pay you back

im having problems creating a dropdown menu with css. Its a little thing i cant solve... So far my submenus dropdowns very well but the problem is that the width of the line box is too small and the word i use gets half chopped...
What i want is to expand this box so the length is adapted to the word used and to be completly read .

the main menu is formed by 4 items: one of those items is twice longer than the other so the second word goes into another row, i would like this particular item´s width to be longer and the other shorter (the 4 should be 480px width). Do i make myself clear????

Below are The HTML and CSS code im using

<div id="navMenu">

<ul>
<li><a href="#">Systeam</a>
</li>
</ul>

<ul>
<li><a href="#" class="navMenu">Consultoria Logistica</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>

</ul>
</li>
</ul>

<ul>
<li><a href="#">Software</a>
<ul>
<li><a href="#">Optimizacion de Rutas</a></li>
<li><a href="#">Optimizacion de Cargas</a></li>
<li><a href="#">Optimizacion de Corte</a></li>
<li><a href="#">Mantenimiento de Flota</a></li>


</ul>
</li>
</ul>
<ul>
<li><a href="#">Clientes</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>

</ul>
</li>
</ul>

<br class="clearFloat" />

</div>
</div>


AND THE CSS CODE IS :

#navMenu {
margin:0;
padding:0;
}

#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
width:120px;
}
#navMenu ul li a {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
text-align:center;
text-decoration:none;
width:100px;
height:30px;
display:block;
color:white;
background-color:#000;
border-left:1px solid #999;

}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:31px;

}

#navMenu ul li:hover ul {
visibility:visible;
}

#navMenu li:hover {
background-color:#003;

}

#navMenu ul li:hover ul li a:hover {
background:#666;

color:#CCC;
}
pablodilo is offline   Reply With Quote
Old 31st May 12, 06:58 PM   #2
pablodilo
WLC Member
 
Join Date: May 2012
Posts: 4
Default Re: Please help with css dropdown menu

Heres a link to a JPG with the image of the issue...!!
pablodilo is offline   Reply With Quote
Old 31st May 12, 06:59 PM   #3
pablodilo
WLC Member
 
Join Date: May 2012
Posts: 4
Default Re: Please help with css dropdown menu

http://www.sendspace.com/file/gk5312
=S
pablodilo is offline   Reply With Quote
Old 31st May 12, 07:07 PM   #4
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,197
Default Re: Please help with css dropdown menu

Need a link to the problem document rather than a picture of it.
chrishirst is offline   Reply With Quote
Old 31st May 12, 07:31 PM   #5
pablodilo
WLC Member
 
Join Date: May 2012
Posts: 4
Default Re: Please help with css dropdown menu

Thanks Chris, Heres the link for the web files
http://www.sendspace.com/file/jym7lr
pablodilo is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:02 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyright© 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.