estoy desorientado, estoy intentando cambiar algunos valores de una lista de un menú para que, por ejemplo, cada ítem se muestre con un color distinto, tenga bordes de colores distintos entre sí pero no me los toma el navegador, sólo me reconoce algún valor, los que se definen en el .css inicialmente, es un código que heredé, paso a detallar el código :
HTML
<div id="wb_div_menu">
<div id="div_menu">
<div class="row">
<div class="col-1">
<div id="wb_menu_principal" style="display:inline-block;width:100%;z-index:4;">
<label class="toggle" for="menu_principal-submenu" id="menu_principal-title">Menu<span id="menu_principal-icon"><span> </span><span> </span><span> </span></span></label>
<input type="checkbox" id="menu_principal-submenu">
<ul class="menu_principal" id="menu_principal" role="menu">
<li id="inicio"><a role="menuitem" href="./index.html" title="Página principal">Inicio</a></li>
<li id="tienda"><a role="menuitem" href="#" title="Nuestros productos">Tienda OnLine</a></li>
<li id="clientes"><a role="menuitem" href="#" title="Acceso a clientes">Clientes</a></li>
<li id="contacto"><a role="menuitem" href="#" title="Comunicate con nostros">Contacto</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
Y el código CSS donde se definen varias propiedades :
#menu_principal {
background-color: #FFFFFF;
background-color: rgba(255,255,255,0.00);
display: inline-block;
height: 56px;
}
#wb_menu_principal {
background-color: rgba(255,255,255,0.00);
display: block;
font-family: "David Libre";
font-weight: normal;
text-align: right;
width: 100%;
}
#wb_menu_principal ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
#wb_menu_principal ul:after {
clear: both;
content: "";
display: block;
}
#wb_menu_principal ul li {
background-color: #FFFFFF;
background-color: rgba(255,255,255,0.00);
display: list-item;
float: left;
list-style: none;
z-index: 9999;
}
#wb_menu_principal ul li i {
font-size: 0px;
width: 0px;
}
#wb_menu_principal ul li a {
color: #6A5ACD;
font-family: "David Libre";
font-size: 21px;
font-style: normal;
font-weight: normal;
padding: 15px 30px 15px 30px;
text-align: center;
text-decoration: none;
}
#wb_menu_principal > ul > li > a {
height: 26px;
}
.menu_principal a {
display: block;
-webkit-border-top-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
-moz-border-radius-topright: 12px;
-moz-border-radius-bottomleft: 12px;
border-top-right-radius: 12px;
border-bottom-left-radius: 12px;
}
#wb_menu_principal li a:hover,
#wb_menu_principal li .active {
background-color: #6A5ACD;
color: #FFFFFF;
}
ul ul {
display: none;
position: absolute;
top: 56px;
}
#wb_menu_principal ul li:hover > ul {
display: list-item;
}
#wb_menu_principal ul ul li {
background-color: #7A7A7A;
color: #FFFFFF;
float: none;
position: relative;
width: 104px;
}
#wb_menu_principal ul ul li a:hover,
#wb_menu_principal ul ul li .active {
background-color: #CCCCCC;
color: #424242;
}
#wb_menu_principal ul ul li i {
margin-right: 0px;
vertical-align: middle;
}
#wb_menu_principal ul ul li a {
color: #FFFFFF;
padding-bottom: 15px;
padding-right: 20px;
padding-top: 15px;
text-align: left;
vertical-align: middle;
}
#wb_menu_principal ul ul ul li {
left: 104px;
position: relative;
top: -56px;
}
#wb_menu_principal .arrow-down {
border-bottom: 0 dotted;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #6A5ACD;
display: inline-block;
height: 0;
margin-left: 2px;
vertical-align: middle;
width: 0;
}
#wb_menu_principal .arrow-left {
border-bottom: 4px solid transparent;
border-left: 4px solid #FFFFFF;
border-right: 0 dotted;
border-top: 4px solid transparent;
display: inline-block;
height: 0;
margin-left: 4px;
vertical-align: middle;
width: 0;
}
#wb_menu_principal li a:hover .arrow-down {
border-top-color: #FFFFFF;
}
#wb_menu_principal ul ul li a:hover .arrow-left,
#wb_menu_principal ul ul li .active .arrow-left {
border-left-color: #424242;
}
#wb_menu_principal .toggle,
[id^=menu_principal-submenu] {
display: none;
}
Este código me lo toma
#inicio,
#tienda,
#clientes,
#contacto {
border-radius: 12px 0px 12px 0px;
-moz-border-radius: 12px 0px 12px 0px;
-webkit-border-radius: 12px 0px 12px 0px;
border: 7px solid ;
}
Pero todo esto no me lo toma, lo ignora
#inicio {
/*border-color: #BF5197 ;*/
background-color: #BF5197;
}
#tienda {
border-color: #649BFD ;
}
#clientes {
border-color: #A1E8B0 ;
}
#contacto {
border-color: #E2B8A7 ;
}
#inicio li a:hover,
#inicio li active {
background-color: #6A5ACD ;
color: #FFFFFF;
}
#menu_principal {
background-color: #FFFFFF;
background-color: rgba(255,255,255,0.00);
display: inline-block;
height: 56px;
}
#wb_menu_principal {
background-color: rgba(255,255,255,0.00);
display: block;
font-family: "David Libre";
font-weight: normal;
text-align: right;
width: 100%;
}
#wb_menu_principal ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
#wb_menu_principal ul:after {
clear: both;
content: "";
display: block;
}
#wb_menu_principal ul li {
background-color: #FFFFFF;
background-color: rgba(255,255,255,0.00);
display: list-item;
float: left;
list-style: none;
z-index: 9999;
}
#wb_menu_principal ul li i {
font-size: 0px;
width: 0px;
}
#wb_menu_principal ul li a {
color: #6A5ACD;
font-family: "David Libre";
font-size: 21px;
font-style: normal;
font-weight: normal;
padding: 15px 30px 15px 30px;
text-align: center;
text-decoration: none;
}
#wb_menu_principal > ul > li > a {
height: 26px;
}
.menu_principal a {
display: block;
-webkit-border-top-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
-moz-border-radius-topright: 12px;
-moz-border-radius-bottomleft: 12px;
border-top-right-radius: 12px;
border-bottom-left-radius: 12px;
}
#wb_menu_principal li a:hover,
#wb_menu_principal li .active {
background-color: #6A5ACD;
color: #FFFFFF;
}
ul ul {
display: none;
position: absolute;
top: 56px;
}
#wb_menu_principal ul li:hover > ul {
display: list-item;
}
#wb_menu_principal ul ul li {
background-color: #7A7A7A;
color: #FFFFFF;
float: none;
position: relative;
width: 104px;
}
#wb_menu_principal ul ul li a:hover,
#wb_menu_principal ul ul li .active {
background-color: #CCCCCC;
color: #424242;
}
#wb_menu_principal ul ul li i {
margin-right: 0px;
vertical-align: middle;
}
#wb_menu_principal ul ul li a {
color: #FFFFFF;
padding-bottom: 15px;
padding-right: 20px;
padding-top: 15px;
text-align: left;
vertical-align: middle;
}
#wb_menu_principal ul ul ul li {
left: 104px;
position: relative;
top: -56px;
}
#wb_menu_principal .arrow-down {
border-bottom: 0 dotted;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #6A5ACD;
display: inline-block;
height: 0;
margin-left: 2px;
vertical-align: middle;
width: 0;
}
#wb_menu_principal .arrow-left {
border-bottom: 4px solid transparent;
border-left: 4px solid #FFFFFF;
border-right: 0 dotted;
border-top: 4px solid transparent;
display: inline-block;
height: 0;
margin-left: 4px;
vertical-align: middle;
width: 0;
}
#wb_menu_principal li a:hover .arrow-down {
border-top-color: #FFFFFF;
}
#wb_menu_principal ul ul li a:hover .arrow-left,
#wb_menu_principal ul ul li .active .arrow-left {
border-left-color: #424242;
}
#wb_menu_principal .toggle,
[id^=menu_principal-submenu] {
display: none;
}
#inicio,
#tienda,
#clientes,
#contacto {
border-radius: 12px 0px 12px 0px;
-moz-border-radius: 12px 0px 12px 0px;
-webkit-border-radius: 12px 0px 12px 0px;
border: 7px solid ;
}
#inicio {
/*border-color: #BF5197 ;*/
background-color: #BF5197;
}
#tienda {
border-color: #649BFD ;
}
#clientes {
border-color: #A1E8B0 ;
}
#contacto {
border-color: #E2B8A7 ;
}
#inicio li a:hover,
#inicio li active {
background-color: #6A5ACD ;
color: #FFFFFF;
}
<div id="wb_div_menu">
<div id="div_menu">
<div class="row">
<div class="col-1">
<div id="wb_menu_principal" style="display:inline-block;width:100%;z-index:4;">
<label class="toggle" for="menu_principal-submenu" id="menu_principal-title">Menu<span id="menu_principal-icon"><span> </span><span> </span><span> </span></span></label>
<input type="checkbox" id="menu_principal-submenu">
<ul class="menu_principal" id="menu_principal" role="menu">
<li id="inicio"><a role="menuitem" href="./index.html" title="Página principal">Inicio</a></li>
<li id="tienda"><a role="menuitem" href="#" title="Nuestros productos">Tienda OnLine</a></li>
<li id="clientes"><a role="menuitem" href="#" title="Acceso a clientes">Clientes</a></li>
<li id="contacto"><a role="menuitem" href="#" title="Comunicate con nostros">Contacto</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
Probé poniendo los ID de los items del menú como class en vez de ID y tampoco funciona, salvo que defina dentro del html como style lo que necesito, por supuesto, no es lo que quiero, realmente ya no sé que probar. Gracias de antemano por las pistas/ayuda que me puedan dar.