A Few Css Menu Issues

[damiancds]

I'm talking about a css dropdown menu (it's pure css as of now, and I plan to add a little javascript to make it smoother (so far I think i'm only going to add in a delayed fade in/out effect for the dropdown portions)for width,I've got it so they are all the same width, what I want is to have their width flexible so they fit the words and an icon.as in | Short \/ || Something Really Long \/ |where the li elements are the the width of the text + enough for the down arrowpsuedo code (width = text.width + 15px;)right now the down arrow is implemented as:

	background-image:url(/Resources/Images/Menu/arrow.gif);background-repeat:no-repeat;background-position:92% 50%;

for the centering,i want the li background to go across the page but the top level dropdown items centered (not text centered, element centered) _____________________________________________________________________________________________[ | One \/ | Two \/ | Twenty \/ | Eighty-seven thousand \/ | Five \/ | ]let me know if you need any other info, and thanks,

[chibineku]

Can we have a link to see it in action?

[damiancds]

it should be up and runningEDIT 2: demo's dead, i got it working from the below posts,there's two style sheets because I'm somewhat anal, one being for the menu, the other for broader display issues. (there's also a third one for round corner content boxes but that's not really important hereagain, let me know what I can do,EDIT 1: also, forgot to add that not all are going to have the down error, but they are differently classed li elements, as in the first element (home)

[dsonesuk]

if you mean you want the first sublevel from the parent level to be centred try this:li.nav_DownIco:hover ul.nav {background-color:#DDF6DA;background-image:url(/Resources/Images/Menu/xxx.gif);display:block;left:-50px; /*from 33px*/position:absolute;top:-3px;}

[damiancds]

It's the top level bar I'm trying to center,I want to have the gradient background stretch across the page (like it is) (either that or later set it to a fixed width)basically in simplest terms i want the top level items in a div so the div can be centered in the middle of the gradient (but doing so doesn't work)

[dsonesuk]

the best i could come up with, is this:ul.drop{ color: white; margin: 0 auto; padding: 0px; background-color: green; background-image: url(/Resources/Images/Menu/gradient.gif); text-align: left; border: 1px solid #000; list-style-type: none; position: relative; z-index: 0; height: 26px;}#menu_container{overflow:visible; background-color:#333366;} /*add background image here*/#menu_outer{display:table; margin: 0 auto; height: 28px; padding:0; overflow:visible;}#menu_inner{float:left;}<div id="menu_container"><div id="menu_outer"><div id="menu_inner"><ul class="drop"> <li class="nav_Down"> <a class="nav" href="/index.php"> Home </a> </li>........................................blah, blah, blah <li class="nav_DownIco"> <a class="nav" href="/Contact/"> Contact Us </a> <ul class="nav"> <li class="nav_End"> <a class="nav" href="/Contact/webmaster.php"> Contact Webmaster </a> </li> <li class="nav_End"> <a class="nav" href="/Contact/service.php"> Contact Customer Service </a> </li> <li class="nav_End"> <a class="nav" href="/Contact/support.php"> User Submissions </a> </li> </ul> </li></ul></div></div></div>

[damiancds]

the best i could come up with, is this:

you make it sound like it's bad.but thanks, that was exactly what I was looking to do.I just had to manipulate the borders for seamlessnessIf I can figure out the li width problem.there isn't a way to say "width: auto + 10px;" is there?because that's the simplest way it could be coded and I think it describes what I want.

[dsonesuk]

If! you talking about the toplevel menu, all you have to do is width: auto; and adjust padding to accommodate down arrow, example: padding: 5px 20; seems to work. li.nav_Down {width: auto;padding: 5px 20px;}li.nav_DownIco {width: auto; padding: 5px 20px;}