Welcome Guest   ·   Login   ·   Register   ·   Member List
Forum Home  >  CSS help  >  Help with CSS  >  Thread
Search  
  
  Advanced Search
   
 
css horizontal dropdown menu using lists
 
santoo
Posted: 05 October 2008 04:44 PM   [ Ignore ]
Newbie
Rank
Total Posts:  8
Joined  2008-10-03

Hi,

please find the attached image.whenever I am increasing the text for the submenu items in 2nd or third tier….the hovering effect is not coming till the end as shown in fig.I have increased her the text for service1 menu item in third tier.I have used
          width:auto
          min-width:100px
          max-width:400px

but it does not make any change.

plzz help me with the css.

Thanks.

Profile
 
 
littlechris1977
Posted: 14 October 2008 05:04 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  14
Joined  2008-02-04

Probably need to set actual width on the li and the li a of the list.

Profile
 
 
Josh Jones
Posted: 19 October 2008 05:43 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  17
Joined  2008-10-19

not sure which browser you are having trouble with, i’m assuming it’s IE… Since IE doesn’t support “min and max width”

The best solution would be to explicity set the width of each <li>.

Also, you can use padding to help accomodate if you don’t want a specific width.

#nav li {
display:inline;
height:25px;
width:125px;
padding:5px 15px;
} 
Profile
 
 
santoo
Posted: 21 October 2008 01:32 PM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  8
Joined  2008-10-03

Hi,

Thanks for the reply…i am using the menu for both IE and Firefox browsers.I dont want to fix the width either…...earlier i was working using min-width and max-width properties,but observed that it is not working.

thanks.
santosh.

Profile
 
 
Josh Jones
Posted: 21 October 2008 11:25 PM   [ Ignore ]   [ # 4 ]
Newbie
Rank
Total Posts:  17
Joined  2008-10-19

one thing to note is that IE doesn’t support min/max width/height.

So, generally the way to make IE play nicely is by using a conditional statement in the <head> of the page in question and adding an explicit size (which IE actually uses as the “starting point” for the size… Kind of like using min-width)

Something like this…

<!--[if IE lte 6]>
<style type="text/css">
#nav li {
width:auto !important;
width:100px;
padding:0 15px;
</style>
<![endif]--> 
Profile
 
 
   
 
 
‹‹ Help regarding horizontal menu lists      Transparent PNG Borders ››