I am currently working on a splash page that features 3 dropdown buttons, each associated with a specific color representing a geological time period. I am trying to customize the formatting of the .dropdown-content for each button to reflect its base color. However, whenever I attempt to use the id tag to modify the attributes of each button's '.dropdown-content', it ends up breaking the code. Below is the 'broken' css:
.dropbtn {
color: black;
padding: 16px;
font-size: 15px;
cursor: pointer;
}
#left.dropbtn {
border-color: #f57a5f;
background-color: rgba(245, 122, 95, 0.2);
}
#middle.dropbtn {
border-color: #9DC2A6;
background-color: rgba(157, 194, 166, 0.2);
}
#right.dropbtn {
border-color: #47C7EA;
background-color: rgba(71, 199, 234, 0.2);
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
#left.dropdown-content {
display: none;
position: absolute;
background-color: #f57a5f;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
#middle.dropdown-content {
display: none;
position: absolute;
background-color: #9DC2A6;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
#right.dropdown-content {
display: none;
position: absolute;
background-color: #47C7EA;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 15px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: rgba(157, 194, 166, 0.2)}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover #left.dropbtn {
background-color: #f57a5f;
}
.dropdown:hover #middle.dropbtn {
background-color: #9DC2A6;
}
.dropdown:hover #right.dropbtn {
background-color: #47C7EA;
}<div class="jumbotron">
<div class="container">
<div class="wrapper">
<h2><t id="the">The</t> Wowsers</h2>
<p>Revealing stuff & knowledge & things</p>
<div class="row">
<div class="dropdown">
<button id="left" class="splashMainButton btn btn-info dropbtn">Learn</button>
<div class="dropdown-content">
<a href="">Teach & Learn</a>
<a onclick="">News & Info</a>
</div>
</div>
<div class="dropdown">
<button id="middle" class="splashMainButton btn btn-info dropbtn">Data</button>
<div class="dropdown-content">
<a href="">Enter</a>
<a href="">Visualize</a>
<a href="">Retrieve</a>
<a href="s">Browse</a>
</div>
</div>
<div class="dropdown">
<button id="right" class="splashMainButton btn btn-info dropbtn">Join & Support</button>
<div class="dropdown-content">
<a href="">Join!</a>
<a onclick="">Patreon!</a>
<a onclick="">Merch</a>
</div>
</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>
</div>
</div>Is there an issue with the CSS nomenclature? Should I be adding an id to each .dropdown-content?