larghezza fissa celle menu

[chef]

Buonasera, ho provato a modificare un pezzo di codice che mi piaceva per un menu semplice orizzontale. Non riesco a capire come rendere fissa la larghezza del tasto di menu indipendentemente da quanto ci scrivo dentro.
Io vorrei avere un menu largo tot 480 px e 4 pulsanti orizzontali larghi 120 px. Se inserisco la proprietà width non mi cambia nulla!

CSS:

/* MENU
/* Per prima cosa applichiamo uno stile al contenitore del menu: */
#menu ul {
    width:480px;
    display:block;
    list-style-type:none;
    margin: 0;
    float: none;
    padding: 0px;
}

/* Fatto questo dobbiamo definire il parametro che permette di visualizzare il menu orizzontalmente */
#menu li {
display:inline; 
}

/* Infine definiamo lo stile e i colori dei link e del testo */
#menu a {
color:#fff; /* Colore del testo */
text-align:center; /* Testo allineato al centro */
text-decoration:none; /* Nessuna decorazione */
background:#909090; /* Colore dello sfondo */
padding:40px 30px; /* Distanza tra le singole voci */
}

/* E definiamo cosa deve accadere al passaggio del mouse sul nostro menu */
#menu a:hover {
background:#007fff; /* Colore dello sfondo */
}

MENU:

<div id="menu">
              <ul>
                <li><a href="pagina1.html">HOME</a> </li>
                <li><a href="pagina2.html">SERVIZI</a> </li>
                <li><a href="pagina3.html">SPECIALISTI</a> </li>
                <li><a href="pagina4.html">CONTATTI</a> </li>
              </ul>
            </div>

[carlomarangoni]

<ul id="cm-nav">
   <li><a href="pagina1.html" target="_self">HOME</a></li>
   <li><a href="pagina2.html" target="_self">SERVIZI</a></li>
   <li><a href="pagina3.html" target="_self">SPECIALISTI</a></li>
   <li><a href="pagina4.html" target="_self">CONTATTI</a></li>
</ul>

#cm-nav li a.arrow {background-image: url(arrow-right.gif)}

#cm-nav > li > a.arrow {background-image: url(arrow-down.gif)}

ul#cm-nav ,
ul#cm-nav ul {
 list-style-type: none;
 padding: 0px;
 margin: 0px;
 list-style-image: none;
 width: 480px;
}

ul#cm-nav li {
 list-style-type: none;
 width: 120px;
 position: relative;
 float: left;
 padding: 0px;
 margin: 0px;
 list-style-image: none
}

ul#cm-nav li li {
 width: auto;
 float: none
}

#cm-nav a {
 font-size: 9pt;
 text-decoration: none;
 border-top: black 1px solid;
 font-family: verdana;
 border-right: black 1px solid;
 background: #d6d5f0;
 white-space: nowrap;
 border-bottom: black 1px solid;
 color: black;
 text-align: left;
 padding: 5px;
 border-left: black 1px solid;
 display: block
}

#cm-nav a:focus {
 outline-width: medium;
 outline-style: none;
 outline-color: invert
}

#cm-nav a.no-click {cursor: default}

#cm-nav li a {margin: -1px -1px 0px 0px}

#cm-nav li li a {margin: 0px 0px -1px}

#cm-nav > li > a.arrow {padding-right: 14px}

#cm-nav ul.arrow-pad > li > a {padding-right: 11px}

#cm-nav li a.arrow ,
#cm-nav > li > a.arrow {
 background-repeat: no-repeat;
 background-position: right 50%
}

#cm-nav li:hover > a {color: white}

#cm-nav li ul ,
#cm-nav li:hover ul ul ,
#cm-nav li:hover ul ul ul ,
#cm-nav li:hover ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {
 position: absolute;
 z-index: 999;
 display: none
}

#cm-nav li:hover ul {display: block}

#cm-nav li li:hover ul ,
#cm-nav li li li:hover ul ,
#cm-nav li li li li:hover ul ,
#cm-nav li li li li li:hover ul ,
#cm-nav li li li li li li:hover ul ,
#cm-nav li li li li li li li:hover ul ,
#cm-nav li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li li li:hover ul {
 margin-left: 100%;
 display: block
}

#cm-nav li:hover ul {margin-left: 0px}

#cm-nav ul ul {
 left: -1px;
 top: 1px
}

#cm-nav li {top: -1px}

#cm-nav a {font-weight: bold}

#cm-nav a {border-color: #d6d5f0}

#cm-nav li:hover > a {background-color: #0400ff}

Ho fatto prima ad imbastirtene uno che coreggere il tuo
Provalo

[carlomarangoni]

Altro esempio

#mbmcpebul_wrapper {
  padding: 0;
  border-style: solid;
  border-color: #C0C0C0;
  border-width: 0;
  border-radius: 0;
  background-color: #C0C0C0;
  box-shadow: none;
  border-collapse: separate;
  font-size: 0;
  line-height: 0;
}

#mbmcpebul_wrapper.quirks {
  margin-bottom: 1px;
  margin-right: 1px;
}

#mbmcpebul_wrapper.quirks #mbmcpebul_table ul li {
  width: 100%;
}

#mbmcpebul_table {
  margin: 0px;
  margin-bottom: -1px;
  margin-right: -1px;
  padding: 0;
  line-height: 0px;
  font-size: 0px;
  display: inline-block;
  width: auto;
}

#mbmcpebul_table li a {
  line-height: 19px;
  font-size: 16px;
  font-family: Tahoma,sans-serif;
  text-decoration: none;
  color: #000000;
  font-style: normal;
  font-weight: bold;
  padding: 5px;
  display: block;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#mbmcpebul_table li div.buttonbg {
  height: 29px;
  width: 118px;
  line-height: 0;
  background-color: #C0C0C0;
  border-style: solid;
  border-color: #C0C0C0;
  border-width: 1px;
  border-radius: 0;
  padding: 0;
  box-shadow: 0 0 0 0 transparent;
  text-align: center;
}

#mbmcpebul_table li:hover div.buttonbg a, #mbmcpebul_table li.expanded a.topitem, #mbmcpebul_table li.active a.topitem,
#mbmcpebul_table li.itemhot a.topitem, #mbmcpebul_table li a:hover {
  color: #F0F8FF;
  font-style: normal;
  font-weight: bold;
  text-decoration: underline;
}


#mbmcpebul_table li.expanded div.buttonbg, #mbmcpebul_table li.active div.buttonbg, #mbmcpebul_table li.itemhot div.buttonbg, #mbmcpebul_table li:hover div.buttonbg {
  background-color: #000080;
  box-shadow: 0 0 0 0 transparent;
}

#mbmcpebul_table li.expanded div.buttonbg, #mbmcpebul_table li.active div.buttonbg, #mbmcpebul_table li.itemhot div.buttonbg, #mbmcpebul_table li:hover div.buttonbg {
  border-color: #C0C0C0;
}

#mbmcpebul_table ul li a {
  color: #000000;
  font-family: Tahoma,sans-serif;
  font-size: 11px;
  line-height: 13px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  display: block;
  vertical-align: middle;
  white-space: nowrap;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#mbmcpebul_table ul li:hover > a {
  color: #000000;
  font-family: Tahoma,sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: normal;
  text-decoration: underline;
}

#mbmcpebul_table ul li.subexpanded a.subexpanded, #mbmcpebul_table ul li.subitemhot a.subitemhot, #mbmcpebul_table ul li a:hover {
  color: #000000;
  font-family: Tahoma,sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: normal;
  text-decoration: underline;
}

#mbmcpebul_table ul li:hover, #mbmcpebul_table ul li.subexpanded, #mbmcpebul_table ul li.subitemhot {
  border-color: transparent;
  background-color: #FFFFFF;
  box-shadow: none;
}

#mbmcpebul_table ul {
  margin: 0;
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
  padding: 0;
  background: #FFFFFF;
  font-size: 0;
  border-radius: 0;
}

#mbmcpebul_table ul li a {
  padding: 3px 11px 3px 9px;
  text-align: left;
}

#mbmcpebul_table ul li.separator {
  padding: 3px;
  cursor: default;
  background: none;
  box-shadow: none;
  border-width: 0;
}

#mbmcpebul_table ul li.separator div {
  border-top: 1px solid #C0C0C0;
  font-size: 0px;
}

#mbmcpebul_table ul li {
  border-style: solid;
  border-color: transparent;
  border-width: 0;
  height: auto;
  width: auto;
  text-align: left;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  float: none;
  margin: 0 0 0px 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  background-color: #FFFFFF;
  display: block;
}


#mbmcpebul_table a img {
  border: none;
}

#mbmcpebul_table li {
  list-style: none;
  float: left;
  margin: 0px 1px 1px 0px;
  padding: 0;
  float: left;
  display: inline-block;
}

#mbmcpebul_table.css_menu li {
  position: relative;
}

#mbmcpebul_table.css_menu ul li:hover > ul {
  opacity: 1;
}

#mbmcpebul_table.css_menu li:hover > ul {
  top: 100%;
  left: 0;
  right: auto;
  opacity: 1;
}

#mbmcpebul_table.css_menu ul li:hover > ul {
  top: -1px;
  left: 100%;
  right: auto;
}

#mbmcpebul_table.css_menu ul {
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  transition-property:opacity;
  -webkit-transition-property:opacity;
  -moz-transition-property:opacity;
  -ms-transition-property:opacity;
  opacity: 0;
}

#mbmcpebul_table ul {
  position: absolute;
  top:-99999px;
  z-index: 4000;
}

#mbmcpebul_table ul ul {
  position: absolute;
  z-index: 5000;
}

#mbmcpebul_table .submenu_arrow {
  margin-left: 8px;
}


@media screen and (max-width: 500px) {
  #mbmcpebul_wrapper:not(.scripted) {
    text-align: center;
  }

  #mbmcpebul_wrapper:not(.scripted) #mbmcpebul_table li {
    float: none;
    vertical-align: top;
  }
}

#mbmcpebul_wrapper.centeritems {
  text-align: center;
}

#mbmcpebul_wrapper.centeritems #mbmcpebul_table li {
  float: none;
  vertical-align: top;
}
#mbmcpebul_table ul li a.with_arrow { 
  background-image: url(ebab_mbmcp_c.png); 
  background-repeat: no-repeat; 
  background-position: right center; 
  padding-right: 15px;

<div id="mbmcpebul_wrapper" style="max-width: 483px;">
  <ul id="mbmcpebul_table" class="mbmcpebul_menulist css_menu">
  <li><div class="buttonbg"><a href="pagina1.html" target="_self">HOME</a></div></li>
  <li><div class="buttonbg"><a href="pagina2.html" target="_self">SERVIZI</a></div></li>
  <li><div class="buttonbg"><a href="pagina3.html" target="_self">SPECIALISTI</a></div></li>
  <li><div class="buttonbg"><a href="pagina4.html" target="_self">CONTATTI</a></div></li>
  </ul>
</div>