sottomenu con i css

[Tristal]

Salve, ho trovato e modificato questo esempio di sotto menu

www.ebol.it/test/prova7/default.html

vorrei fare altre modofiche ma non riesco

1. vorrei dare una propria larghezza al rettangolo del sottomenu (rettangolo sottomenu "Voce 1" più largo di "Voce 3")

2. è possibile dare più rettangoli? Nel senso uno per ogni voce di sottomenù



Grazie cmq a tutti!!

[Tristal]

Ecco un altro esempio:

http://www.ebol.it/test/menu/default.html

il sottomenu di ABOUT US e WORK vorrei siano di dimensioni minori, ho digitato 9px ma non riconosce il comando

e risolvere i due punti elencati sopra

[ResianTaxidrive]

Innanzitutto, dove hai digitato 9px??
Cmq sì, se non assegni una larghezza specifica ai vari sottomenu, ciascuno prende la sua larghezza in base alla lunghezza del testo più lungo.
Altrimenti devi mettere un id diverso per ciascuna voce di primo livello e quindi assegnare le larghezza dei sottomenu nella maniera che ritieni più opportuna.

[Tristal]

Questo è tutto il css

.menu{
    margin: 0 auto;
    position: relative;
    width: 1024px;
	padding: 0 0 0 20px;
}

.menu ul{
margin: 0;
text-align:center;
}

.menu ul li{
list-style:none;
float: left;
margin:auto;
padding: 0;
}

.menu ul li a{
	font-family: Verdana, Geneva, sans-serif;
	font-size:15px;
	color:#58585a;
	display: block;
	width: auto;
	height: 25px;
	text-decoration:none;
	
background-position:left;
	margin: 0;
	padding: 10px 23px 0 25px;
}

.menu ul li a.ultimo{
font-family: Verdana, Geneva, sans-serif;
font-size:15px;
color:#ffffff;
display: block;
width: 1px;
height: 25px;
text-decoration:none;
background-position:left;
margin: 0;
padding: 7px 0 0 0;
}

.menu ul li a:hover{
font-family: Verdana, Geneva, sans-serif;
font-size:15px;
color:#f0a500;
width: auto;
height: 25px;
text-decoration:none;
background-position:left;
background-repeat:no-repeat;
margin: 0;
padding: 10px 23px 0 25px;
}


.menu li ul { /* NASCONDO I SOTTOMENU */
 
 display: none
 
}
 
.menu li:hover ul { /* MOSTRO IL SOTTOMENU AL PASSAGGIO DEL MOUSE */
	font-size: 9px   ; 
	display: block;
	position: absolute;
	z-index:1;
	width:190px ;
	padding: 0;
	border:1px solid black;
	background: white;
}

Per mettere 2 id diversi come faccio? in html ho questo:

<div class="cont_menu">
	<div class="menu">
	  <div class="bt_social">
	    
      </div>
    
	 <ul>
     

	[*]<a class="home_bt">HOME</a>[*]<a class="news_bt">NEWS</a>
	[*]<a class="aboutus_bt">ABOUT US</a>
       <ul>          [*]MISSION[*]STAFF[/list]
       	   [*]<a class="work_bt">WORK</a>
       <ul> [*]COMMUNICATION[*]BRAND+CORPORATE[*]PACKAGING[*]EVENTS[*]WEB[/list]
	[*]<a class="clients_bt">CLIENTS</a>
	[*]<a class="contact_bt">CONTACT</a>
	  
  	[*]<a class="ultimo"></a>[/list]
      [img]img/social.jpg[/img]
	</div>	
	</div>