Hover efekt určité šířky – CSS – Fórum – Programujte.com

Ahoj, nějak nemohu přijít na to jak udělat hover efekt u seznamu s display:inline s požadovanou šířkou, hover je jen pod textem

XHTML

  <div id="menu">

   <ul>

     <li><a href="#">Nabídka</a></li>

     <li><a href="#">Katalog</a></li>

     <li><a href="#">Kontakt</a></li>	

   </ul>

  </div>

#menu{width:700px;height:30px;background:#ab6000 url('grafika/menu.jpg') no-repeat;font-size:18px;font-weight:bold;}

#menu a{text-decoration:none;color:#ab6000;}

#menu a:hover{text-decoration:none;color:#000000;background-color:#e8bd86;}

#menu ul{list-style-type:none;padding:2px 0 0 0;}

#menu li{display:inline;padding:0 50px 0 50px;}

skus tohle, pokud jsem to dobre pochopil tak jsi potreboval jen roztahnout hover efekt .. tim padem se musi na seznam trochu jinak

#menu {

  font-size:18px;

  color:#ab6000;

  font-weight:bold;

}



#menu li {

  width: 200px;

  float: left;

  list-style: none;

  text-align: center;

}



#menu a {

  display: block;

  text-decoration:none;

  color:#ab6000;

}



#menu a:hover {

  text-decoration:none;

  color:#000000;

  background-color:#e8bd86;

}

To Fugess : díky to je přesně ono :smile2:

nemas zac:smile1:, jeste jsem ti to udelal s tou druhou verzi .. po uprave #menu na div

#menu {

  width:600px;

  height:30px

  font-size:18px;

  color:#ab6000;

  font-weight:bold;

  overflow: hidden;

}



#menu ul {

  list-style: none;

  text-align: center;

  margin: 0;

  padding: 0;

}



#menu ul li {

  float: left;

}



#menu ul li a {

  display: block;

  width: 200px;

  text-decoration:none;

  color:#ab6000;

}



#menu ul li a:hover {

  text-decoration:none;

  color:#000000;

  background-color:#e8bd86;

}