Larghezza sub menu...

[pippo26]

Praticamente passando il mouse su "Lavori" si apre un sub menu, non capisco come mai la larghezza di ogni singola voce è sempre uguale (anche se ho usato width: auto, invece vorrei che fosse larga in base alla larghezza della voce. In sostanza vorrei che fosse visualizzato come su FF (cioè il tasto è largo quanto la larghezza della scritta). Il problema si riscontra solo su IE dove la larghezza del tasto+background sono tutti uguali.

css:

#divmenu {
	width: auto;
}

.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.suckertreemenu ul li{
  position: relative;
  display: inline;
  float: left;
}

/*Top level list items*/
.suckertreemenu li{
  position: relative;
  display: inline;
  float: left;
  background-color: #F3F3F3; /*overall menu background color*/
}


/*Top level menu link items style*/
.suckertreemenu ul li a{
	display: block;
	width: 250px;
            text-decoration: none;
	color: navy;
	text-align: center;
	vertical-align: middle;
	height: 20px;
}

/*1st sub level menu*/
.suckertreemenu ul li ul{
	left: 0;
	position: absolute;
	top: 1em; /* no need to change, as true value set by script */
	display: block;
	visibility: hidden;
	text-align: left;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{ 
left: 0; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
	display: block;
	width: auto; /*width of sub menu levels*/
	color: #000000;
	text-decoration: none;
	padding: 1px 5px;
	height: 20px;
	text-align: left;
	vertical-align: middle;
}

.suckertreemenu ul li a:hover{
background-color: black;
color: white;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #F3F3F3 url(media/arrow-down.gif) no-repeat center right;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
	
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */

html:

<div id="divmenu">
  <div class="suckertreemenu">
     <ul id="treemenu1">[*]Azienda[*]Lavori
        <ul>[*]Lavoro1[*]Lavoro2 Lavoro2[*]Lavoro3[*]Lavoro - quattro[/list]
        [*]Dove siamo[*]Contatti[/list]
  </div>

Cosa devo moodificare?
Grazie

[pippo26]

Se anzichè "width: auto;" uso "width: 0;" su IE funziona...ma su FF non mi visualizza più il background...
Cosa posso utilizzare per entrambi i browser?

[blekm]

Originariamente inviato da pippo26
Se anzichè "width: auto;" uso "width: 0;" su IE funziona...ma su FF non mi visualizza più il background...
Cosa posso utilizzare per entrambi i browser?

potresti usare i commenti condizionali

[pippo26]

cioè? :master:

[blekm]

http://www.google.it/search?q=commen...ient=firefox-a