2

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>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</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&#225;gina principal">Inicio</a></li>
                     <li id="tienda"><a role="menuitem" href="#" title="Nuestros productos">Tienda&nbsp;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>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</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&#225;gina principal">Inicio</a></li>
                         <li id="tienda"><a role="menuitem" href="#" title="Nuestros productos">Tienda&nbsp;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.

2
  • Prueba agregando una regla important en tu css, ejemplo: #contacto { border-color: #E2B8A7 !important; }
    – GFlores98
    Commented el 15 nov. 2019 a las 15:42
  • Hola Walter, ¿el CSS está en tres ficheros diferentes o está todo dentro del mismo? Commented el 15 nov. 2019 a las 15:51

4 respuestas 4

1

ya probaste con el child selector de css ??? Por ejemplo:

 ul li:nth-child(2) {
     background: red;
 }

https://www.w3schools.com/cssref/sel_nth-child.asp

1

ten en cuenta que aveces el navegador no actualiza por que toma el cache, osea que asi tengas todo perfecto no se vera el cambio, borra el cache y despues mira que tal.

1
  • Gracias por tu contribución, te sugerimos revisar Cómo responder ya que esta publicación fue reportada como de "baja calidad", saludos.
    – Jorgesys
    Commented el 15 nov. 2019 a las 17:27
0

muchísimas gracias a todos por los aportes, el archivo .CSS es uno sólo. poniendo !important pude lograr lo que necesitaba, al final del archivo .CSS defino las opciones personalizadas :

#inicio {
 border-color: #BF5197 ;
}

#inicio a:hover {
 background-color: #BF5197   !important;
 border-radius: 0px !important;
}

#tienda {
 border-color: #649BFD ; 
}

#tienda a:hover {
 background-color: #649BFD   !important;
 border-radius: 0px !important;
}

#clientes {
 border-color: #A1E8B0 ; 
}

#clientes a:hover {
 background-color: #A1E8B0   !important;
 border-radius: 0px !important;
}

#contacto {
 border-color: #E2B8A7 ; 
}

#contacto a:hover {
 background-color: #E2B8A7   !important;
 border-radius: 0px !important;
}

Nuevamente, muchísimas gracias a todos, me queda sólo probar el child selector, sólo por curiosidad, pero lo voy a tener presente.

0

Usa la propiedad !important para que se tomen los colores que deseas.

ejemplo:

#tienda {
 border-color: #649BFD !important ; 
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.