I have a page that uses bootstrap and css. In bootstrap I assign the color "success" to a button (login) in the menu and then in the css I assign the color black to each link in the menu (where the button is included). So the button appears to me in black when I want it to appear in the color success. I've tried linking the bootstrap.min.css file below the css that contains the style but it's still the same. I also tried to add .nav li a:not(.btn){}
to the css that handles the background color of the menu, but to no avail. is there a way to enforce the bootstrap to the css?
* {
margin:0px;
padding:0px;
}
#header {
margin:auto;
width:500px;
font-family:Arial, Helvetica, sans-serif;
}
ul, ol {
list-style:none;
}
.nav > li {
float:left;
}
.nav li a {
background-color:#000;
color:#fff;
text-decoration:none;
padding:10px 12px;
display:block;
}
.nav li a:hover {
background-color:#434343;
}
.nav li ul {
display:none;
position:absolute;
min-width:140px;
}
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
.nav li ul li ul {
right:-140px;
top:0px;
}
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="estilos.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<div id="header" style='z-index:3;'>
<ul class="nav">
<li><a href="#">Inicio</a></li>
<li><a href="">Tienda</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Foro</a>
<ul>
<li><a href="#">Armonicas</a></li>
<li><a href="#">Tecnicas</a></li>
<li><a href="#">Cuestiones Musicales</a></li>
</ul>
</li>
<li><a href="">Contacto</a></li>
<li><a class="btn btn-success" href="#">Login</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Use the
:not
CSS property to impose the styles of your selector except for the classes or advanced selector that you put inside the:not
, what happens is that ithover
was also affecting the style, that's why the:not
, I leave you the documentation for you to take a look