Ayuda con menu
Pueden ayudarme con la parte del css, quiero el menu ovalado, sustituir las imágenes solo por css me refiero a los colores que ala pasar el Mouse cambie de color. Sin imagenes. Gracias
-------------------------- css ---------------------------
ul#menu{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:40px;
text-transform:uppercase;
font-size:13px;
background:transparent url("images/black.jpg") repeat-x top left;
font-family:Helvetica,Arial,Verdana,sans-serif;
}
ul#menu li{
display:block;
float:left;
margin:0;
pading:0;
border-right:1px solid #ffffff;
}
ul#menu li a{
display:block;
float:left;
color:#ffffff;
text-decoration:none;
padding:12px 20px 0 20px;
height:24px;
height:40px;
}
ul#menu li a:hover{
background:transparent url("images/blue.jpg") repeat-x top left;
}
-------------------------html---------------------------------------------
<body>
<ul id="menu">
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">Products</a></li>
<li><a href="#" title="" >FAQ</a></li>
<li><a href="#" title="">Contact</a></li>
<li><a href="#" title="">Contact Us</a></li>
</ul>
</body>
-------------------------- css ---------------------------
ul#menu{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:40px;
text-transform:uppercase;
font-size:13px;
background:transparent url("images/black.jpg") repeat-x top left;
font-family:Helvetica,Arial,Verdana,sans-serif;
}
ul#menu li{
display:block;
float:left;
margin:0;
pading:0;
border-right:1px solid #ffffff;
}
ul#menu li a{
display:block;
float:left;
color:#ffffff;
text-decoration:none;
padding:12px 20px 0 20px;
height:24px;
height:40px;
}
ul#menu li a:hover{
background:transparent url("images/blue.jpg") repeat-x top left;
}
-------------------------html---------------------------------------------
<body>
<ul id="menu">
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">Products</a></li>
<li><a href="#" title="" >FAQ</a></li>
<li><a href="#" title="">Contact</a></li>
<li><a href="#" title="">Contact Us</a></li>
</ul>
</body>
Respuesta de krlosnow
1
Sustituye todos los "background" por "background-color", especificando el color que quieres poner, bien uno estándar (black, blue, red,...) o bien un código hexadecimal (#000000, #0000FF, #FF0000). Como ejemplo:
background-color:blue;
background-color:black;
background-color:blue;
background-color:black;
