I successfully created a stylish menu using a specific style sheet, but now I'm facing issues when trying to incorporate this menu into web pages with different style requirements. Realizing that loading the style sheet onto these new pages wreaks havoc on their layout! Applying the styles across the entire page is definitely not an option!
It seems that we lack the ability to effectively "scope" our styles (and cater to everyone's needs), or at least I haven't figured out how yet... So, my solution was to transfer the styles to individual elements, but now I can't seem to determine where some of these styles should be applied!
If you have any useful references or tips on clarifying this issue, please share them! Alternatively, any suggestions on where to place certain styles would be much appreciated!
Below is the CSS code - it's quite concise! I've omitted the ones I already know where they belong...
.dropbtn
{
display: inline-block;
color: white;
text-align: left;
padding: 8px 16px;
text-decoration: none;
}
.dropdown:hover .dropbtn
{
background-color: #111;
}
li.dropdown
{
display: inline-block;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: navy;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a
{
color: white;
padding: 8px 16px;
text-decoration: none;
display: block;
text-aligh: left;
}
.dropdown-content a:hover
{
background-color: blue;
}
.dropdown:hover .dropdown-content
{
display: block;
}
And here's the original menu - with names changed for confidentiality!
<ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden;
background-color: navy;" >
<li class="dropdown" style="float:left;">
<a href="http://example.com/first.html" class="dropbtn">
First Pulldown</a>
<div class="dropdown-content">
<a href="http://example.com/1st1st.html">1st pulldown, 1st item</a>
</div>
</li>
<li class="dropdown" style="float:left;">
<a href="http://example.com/second.html" class="dropbtn">
Second Pulldown</a>
<div class="dropdown-content">
<a href="http://example.com/2nd1st.html">2nd pulldown, 1st item</a>
</div>
</li>
<li class="dropdown" style="float:left;">
<a href="http://example.com/fourth.html" class="dropbtn">
Fourth Pulldown</a>
<div class="dropdown-content">
<a href="http://example.com/4th1st.html">4th pulldown, 1st item</a>
</div>
</li>
<li style="float:right" class="dropdown">
<a href="http://example.com/fifth.html" class="dropbtn">
Fifth Pulldown</a>
<div class="dropdown-content">
<a href="http://example.com/5th1st.html">5th pulldown, 1st item</a>
</div>
</li>
</ul>
...I am struggling to figure out how to apply certain styles directly to elements such as "hover"!
Your assistance would be greatly appreciated.