I have a style sheet designed to create a neat menu and it works great. The problem is that I need to move this menu into web pages which require different style elements. EDIT! When the style sheet is loaded by the new pages, it completely screws them up! Applying the styles to the whole page is a NON-STARTER! That's the whole problem here...
Since we apparently don't have the ability to "scope" effectively (and serve everyone, right?), or if we do, I didn't discover how yet... and so I figured I'd just move over the styles to the individual elements, the problem is I don't see where some of these styles are supposed to go!
Pointer to a great reference that helps clarify this would be great, or just some comments on where the items go would work, too!
Here's the css - it's reasonably short! And I've removed the ones I already know where go...
.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;
}
Here's the original menu - names edited to protect the guilty!
<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 have no idea how to set the styles in-line for things like "hover"!
Thanks for any pointers.
The fast solution, put all your CSS inside the HTML not inline but in Style tags and remove the styles from the style sheet file:
<style>
.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;
}
</style>
<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>
The other solution that I like to use is Mailchimp CSS Inline tool. It takes your style sheet and puts all the CSS styles inline automatically. You just remove the CSS styles from your stylesheet and then include the style sheet with the remaining css styles as usual. I put your CSS and HTML in there and this is the output. Let me know if any of the two worked.
<ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden;
background-color: navy;">
<li class="dropdown" style="float: left;display: inline-block;">
<a href="http://example.com/first.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;">
First Pulldown</a>
<div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);">
<a href="http://example.com/1st1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">1st pulldown, 1st item</a>
</div>
</li>
<li class="dropdown" style="float: left;display: inline-block;">
<a href="http://example.com/second.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;">
Second Pulldown</a>
<div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);">
<a href="http://example.com/2nd1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">2nd pulldown, 1st item</a>
</div>
</li>
<li class="dropdown" style="float: left;display: inline-block;">
<a href="http://example.com/fourth.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;">
Fourth Pulldown</a>
<div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);">
<a href="http://example.com/4th1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">4th pulldown, 1st item</a>
</div>
</li>
<li style="float: right;display: inline-block;" class="dropdown">
<a href="http://example.com/fifth.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;">
Fifth Pulldown</a>
<div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);">
<a href="http://example.com/5th1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">5th pulldown, 1st item</a>
</div>
</li>
</ul>
You can try the CSS Inline tool here: https://templates.mailchimp.com/resources/inline-css/