I am Creating my personal website but I can not get the drop down to work on desktop then when it is on a mobile devise hide nav and click(using js) to show nav. But its not working only on the Index.html
<div class="content">
<div class="header">
<div class="logo">GM
</div>
<span class="menu-trigger">Menu</span>
<nav class="nav clearfix">
<ul class="clearfix">
<li><a class="active" href="index.html">Home</a>
</li>
<li>About
</li>
<li>Portfolio <i class="fa fa-angle-down fa-1"></i>
<ul class="sub-nav">
<li>Music
</li>
<li>Code
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
<!-- end of Nav -->
</div>
</div>
CSS:
/**Header**/
.nav {
height: 61px;
background: #381120;
}
.logo a{
float: left;
text-decoration: none;
color: #7e7e7e;
font-size: 43px;
padding-top: 11px;
padding-left: 30px;
}
.nav ul {
margin: 0;
padding: 0;
float: right;
}
.nav ul li {
list-style: none;
float: left;
display: block;
padding: 19px;
}
.nav ul li a {
color: #7e7e7e;
text-decoration: none;
font-size: 25px;
}
.nav ul ul.sub-nav {
display: none;
background: #381120;
width: auto;
position: absolute;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul ul li {
float: none;
padding-left: 24px;
}
.nav ul li a.active {
color: #08a1c7;
}
.nav ul li a:hover {
color: #efefef;
}
and:
.menu-trigger{
padding-top: 16px;
padding-right: 30px;
font-size: 25px;
text-align: center;
display: none;
float: right;
color: #7e7e7e
}
.menu-trigger p{
color: #7e7e7e
}
/**480px**/
#media only screen and (max-width : 480px) {
.menu-trigger{
display: block;
}
.nav, .mobile-nav{
display: none;
}
.nav-expanded{
display: block;
}
.nav ul li{
float: none;
border-bottom: 1px solid #7e7e7e;
}
.nav ul li:last-child{
border-bottom: none;
}
}
Here is the JS sorry I forgot to put it on here:
jQuery(document).ready(function() {
jQuery(".menu-trigger").click(function() {
jQuery(".nav").slideToggle(400, function() {
jQuery(this).toggleClass("nav-expanded").css('display', '');
});
});
});
You really should be able to animate all of this with just CSS. You don't even need jQuery for this, other than for the click action maybe.
Also, and this may not be the case, but in past I have had to write my click handlers like this to bypass some odd bugs. SlideToggle in jQuery can cause some glitchy effects and its not really a great way to do animated menu's. Try to avoid slideToggle().
$("[your-selector]").on("click",function(){
/// do something...
});
I have created a jsfiddle with your code and its seems to work fine. Its rather unclear from what you ask, But what I guess is that your dropdown doesnt work on mobile screen. A problem could be importing jquery in your HTML file. That might solve your problem
jQuery(document).ready(function() {
jQuery(".menu-trigger").click(function() {
jQuery(".nav").slideToggle(400, function() {
jQuery(this).toggleClass("nav-expanded").css('display', '');
});
});
});
Nevermind I fix it I added a
<div class="content">///content goes here</div>
twice causing it to break Thank You for all your help still.
Related
I have some code for which I am trying to make a navbar. I have links in the code and I changed them when the page is scrolled up a little. I change the colours ok but cant change on hover to stay permanent? I seem to have tried everything but its like its resetting my css all the time. It works fine with the links but cant seem to change on hover colour to stay the same.
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 10) {
$(".white").css("background", "#362c6e");
$(".white").css("color", "#ffffff");
$(".nav-login").css("color", "#ffffff");
$(".nav-big a:link").css("color", "#ffffff");
$(".nav-more a:link").css("color", "#ffffff");
}
if (scroll < 10) {
$(".white").css("background-color", "rgba(255, 255, 255, 0)");
$(".white").css("color", "#111111");
$(".nav-login").css("color", "#362c6e");
$(".nav-big a:link").css("color", "#362c6e");
$(".nav-more a:link").css("color", "#362c6e");
}
})
})
.image-container-left {
margin-left: 40px;
margin-top: 0px;
}
#nav {
overflow: hidden;
width: 100%;
/* Full width */
border: 0;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float: left;
list-style: none;
}
.nav-image-left {
border: 0;
list-style-type: none;
margin: 0;
padding: 0;
margin-right: 5px;
margin-top: 17px;
margin-left: 5px;
float: left;
list-style: none;
}
.nav-big {
border: 0;
list-style-type: none;
margin: 0;
padding: 0;
margin-right: 5px;
margin-top: 37px;
float: left;
list-style: none;
margin-left: 5%;
}
.nav-more {
border: 0;
list-style-type: none;
margin: 0;
padding: 0;
margin-top: 37px;
margin-left: 30px;
;
float: left;
list-style: none;
}
.nav-login {
list-style-type: none;
float: right;
margin-top: 37px;
margin-right: 40px;
color: 362c6e;
}
.nav-big a:hover,
a:visited,
a:link,
a:active {
text-decoration: none;
}
.nav-more a:hover,
a:visited,
a:link,
a:active {
text-decoration: none;
}
.nav-big a:link {
color: #362c6e;
}
.nav-more a:link {
color: #362c6e;
}
.nav-more a:hover {
color: #e73972;
)
.nav-big a:hover {
color: #e73972;
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav" class='container-fluid white hidden-xs hidden-sm'>
<ul>
<li class='nav-image-left'>
<div class='image-container-left'>
<a href=index><img src='images/ctbig.png' height='62' alt='image-left' /></a>
</div>
</li>
<li id="nav-big" class='nav-big'><a href='updating'> About us </a></li>
<li class='nav-more'><a href='updating'> Register new job </a></li>
<li class='nav-more'><a href='updating'> Register business </a></li>
<li class='nav-more'><a href='updating'> Contact us </a></li>
<li class='nav-more'><img src='images/users.png' alt='image-right' width='22' /><a href='updating'> Login </a></li>
<li class='nav-login'>0800 038 6210</li>
</ul>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
Is this what you need?
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
$('#nav').toggleClass('before10',!(scroll > 10)); // toggle Class ad or remove a class considering the second parameter being true or false
$('#nav').toggleClass('after10',(scroll > 10));// toggle Class ad or remove a class considering the second parameter being true or false
})
})
body{
min-height:700px;
}
.image-container-left {
margin-left:40px;
margin-top:0px;
}
#nav {
overflow: hidden;
width: 100%; /* Full width */
border:0;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float: left;
list-style: none;
}
.nav-image-left {
border:0;
list-style-type: none;
margin: 0;
padding: 0;
margin-right: 5px;
margin-top: 17px;
margin-left: 5px;
float: left;
list-style: none;
}
.nav-big {
border:0;
list-style-type: none;
margin: 0;
padding: 0;
margin-right: 5px;
margin-top: 37px;
float: left;
list-style: none;
margin-left:5%;
}
.nav-more {
border:0;
list-style-type: none;
margin: 0;
padding: 0;
margin-top: 37px;
margin-left: 30px;;
float: left;
list-style: none;
}
.nav-login {
list-style-type: none;
float: right;
margin-top: 37px;
margin-right:40px;
color:362c6e;
}
#nav ul li a{
color:blue;
text-decoration:none;
}
#nav.before10 ul li a{
color:blue;
text-decoration:none;
}
#nav.before10 ul li a:hover{
color:grey;
}
#nav.after10{
background:teal;
}
#nav.after10 ul li a{
color:red;
text-decoration:none;
}
#nav.after10 ul li a:hover{
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav" class='before10 container-fluid white hidden-xs hidden-sm'>
<ul>
<li class='nav-image-left'><div class='image-container-left'><a href=index><img src='images/ctbig.png' height='62' alt='image-left' /></a></div></li>
<li id="nav-big" class='nav-big'><a href='updating'> About us </a></li>
<li class='nav-more'><a href='updating'> Register new job </a></li>
<li class='nav-more'><a href='updating'> Register business </a></li>
<li class='nav-more'><a href='updating'> Contact us </a></li>
<li class='nav-more'><img src='images/users.png' alt='image-right' width='22' /><a href='updating'> Login </a></li>
<li class='nav-login'>0800 038 6210</li>
</ul>
</div>
I think the problem is how you are trying to set the css properties.
$(".nav-big a:link") selects the actual elements in the DOM tree, nit the corresponding rule in your .css file. Then, when you call ".css("property", "value")" on those elements, you effectively change their element.style property, which is equivalent to setting that property inline (i.e. `).
Since the specificity of inline styles is higher that that of styles defined in a .css file, your :hover rule in a .css file will not be applied anymore.
There isn't really a way to edit you .css files from either JavaScript or JQuery (which is still just a JavaScript library), so what you should do instead is dynamically add and remove classes as described here.
As a side note, you honestly don't need jQuery for such tasks in 2018. It has its uses, but those are all either advanced or obsolete. Loading a external library bloats your page and is overall frowned upon. .ready can be replaced by just placing your <script> tag at the end of the <body>, and others methods now have direct js counterparts. Please consider switching to native js especially if you are still learning the language.
I am working on making menu header for my webpage.
Here is my jsfiddle.
All my image and texts should stay on that grey color but somehow it is going haywire.
Image is getting shown at the bottom and height of that grey color should be little bit more so that it looks decent.
I am not sure what I did wrong.. Here is my html and CSS:
<div class="topnav">
<ul>
<li class="home">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
</li>
<li class="dropdown">
<b>INSURANCE</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>INDIVIDUAL</i></li>
<li><i>CORPORATE</i></li>
</ul>
</li>
<li class="our-story">OUR STORY</li>
<li class="login-signup">Log In | Sign up</li>
<li class="get-covered">GET <strong style="font-style:italic">COVERED</strong></li>
</ul>
</div>
My CSS:
li.insurance{
margin-right: 60px;
}
li.home{
margin-right: 60px !important;
position: relative;
top: 15px;
left: 10px;
}
li.our-story{
margin-right: 120px !important;
}
li.login-signup{
margin-right: 20px !important;
font-style: italic;
font-family: fontawesome;
}
li.get-covered{
border-color: #EF7440;
border-style: solid;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 30px;
padding-right: 30px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 20p;
padding-bottom: 40px;
background-color: rgba(0, 0, 0, 0.5);
}
li.home{
margin-right:35px;
}
li{
display: inline;
}
.topnav{
overflow: hidden;
}
.topnav ul > li{
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
.topnav a{
text-decoration: none;
font-size: 17px;
color: white;
display: block;
}
/* dropdown menus hidden initially */
.topnav ul > li > ul{
display: none;
margin-top: 14px;
width: 200px;
padding: 0;
position: absolute;
background-color: #f76c38;
}
.topnav ul > li > ul > li{
float: left;
clear: left;
display: block;
text-align: left;
}
Any thoughts what I did wrong?
So.. A lot of things are going wrong here, but I guess you are looking for something like this:
https://jsfiddle.net/3kw1uLrs/35/
The code I added is the following and I stripped the ul styling you had added. I used the background color on the topnav element.
You can use this a base to continue your work.
.topnav {
background:rgba(0, 0, 0, 0.5);
padding:0 15px;
}
.logo {
float:left;
margin-top:15px;
}
.nav-left {
float:left;
}
.nav-right {
float:right;
}
I also took the logo out of the list and placed it in an anchor element - you most probably going to need it for linking to your homepage:
<a class="logo">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
</a>
Some tips:
You should not try to place everything as a li element under a single ul.
In this case I took the logo out od the lists and divided your list in two separate lists to place them accordingly.
Never position elements using margins.
Try to group them and place them using floats, text-centering, etc.
I've reached a bit of a problem that I'm not sure how to work-around. I'm creating a vertical navigation for a website I'm working on, however all the vertical navigation menu's that I've seen display the hover drop-down menu to the right or left of the navigation. I'd like to have the drop-down menu appear under the link rather than to the side of the link.
For example: In my menu when a user hovers over or visits the "Treatments" I'd like the list "allergies & sinus, head & neck, etc" to appear below it rather than to the right.
I've tried to look around to see how I could go about doing this but haven't found any really good examples or help. I might need some javascript? I'm not sure, but if it's necessary I can add it I'm just not that familiar with javascript as I am with HTML and CSS.
My HTML:
<h4>ENT Services</h4>
<ul class="sidebar-nav">
<li>Treatments at Accent EMT
<ul class="sidebar-sub-menu">
<li><a herf="http://www.accentmd.com/florida-ent/allergy-sinus.html">Allergy & Sinus</a></li>
<li>Hearing & Balance</li>
<li>Dizziness & Imbalance Disorders</li>
<li>Parathyroid Disorders</li>
</ul></li>
<li>General & Pediatric ENT
<li>Facial Plastic & Reconstructive Surgery</li>
</ul>
My CSS:
.sidebar-nav {
height:auto;
list-style:none;
width: 100%;
}
.sidebar-nav li {
height: 25px;
margin: 0;
padding: 5px 0;
border: none;
text-align: left;
display: inline-block;
float: left;
clear:both;
width: 50%;
}
.sidebar-nav li a {
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:13px;
text-decoration:none;
}
.sidebar-nav li ul {
display: none;
margin-top: 10px;
padding: 0;
}
.sidebar-nav li:hover ul {
display: block;
}
.sidebar-nav li:hover .sidebar-sub-menu {
position: relative;
margin-top: -27.5px;
}
.sidebar-sub-menu li {
position: relative;
display: block;
top: 0;
left:90%;
width: 100%;
min-width: 180px;
white-space: nowrap;
z-index:1;
}
.sidebar-sub-menu li a {
display: inline-block;
padding: 0 10px;
}
.sidebar-nav li:active .sidebar-sub-menu {
position: relative;
margin-top:-27.5px;
}
Thanks in advance.
I reworked your CSS a bit to best isolate the desired behavior, maybe from here on you can keep tweaking the rest to your benefit. Note you've also had a typo on the allergy & sinus <a href=""> (says <a herf="">)
.sidebar-nav {
height: auto;
list-style: none;
width: 100%;
}
.sidebar-nav li {
/* height: 25px; */
margin: 0;
padding: 5px 0;
border: none;
text-align: left;
display: inline-block;
float: left;
clear: both;
width: 50%;
}
.sidebar-nav li a {
font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size: 13px;
text-decoration: none;
}
/* added CSS */
.sidebar-nav li {
list-style-type: none;
}
.sidebar-nav ul li a:hover {
background: lightgray;
}
.sidebar-nav ul {
display: none;
margin-top: 10px;
padding: 0;
}
.sidebar-nav li:hover>ul {
display: block;
margin: 0;
padding: 0 10px;
}
<h4>ENT Services</h4>
<ul class="sidebar-nav">
<li>Treatments at Accent EMT
<ul class="sidebar-sub-menu">
<li>Allergy & Sinus</li>
<li>Hearing & Balance</li>
<li>Dizziness & Imbalance Disorders</li>
<li>Parathyroid Disorders</li>
</ul>
</li>
<li>General & Pediatric ENT
<li>Facial Plastic & Reconstructive Surgery</li>
</ul>
You could try something like this;
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: none;
}
a:hover + div {
display: block;
}
</style>
</head>
<body>
<a>Hover me timberrrs!!</a>
<div>here is your stuff</div>
</body>
</html>
I am using an include file to add the navigation bar to all of my pages. inside the inc file i have my JS css and html table, everything is working except for the js function that is supposed to show the hidden sub links. its been forever since ive coded js so i followed a tutorial and i can not figure out why this isnt working. here is my code::
<script type="text/javascript" src="../js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('li').hover(function () {
$(this).find('ul>li').stop().fadeToggle(200);
});
});
</script>
<style type="text/css">
#nav{
background-color: #282828;
height: 20px;
width: 100%;
float: left;
}
ul{
margin: auto;
padding: 0;
list-style: none;
display: table;
}
ul li {
float: left;
height: 20px;
line-height: 20px;
text-align: center;
}
ul li a{
text-decoration: none;
color: darkgray;
padding: 0 10px;
}
ul li li{
background-color: #282828;
display: none;
}
ul li ul li{
width: 100%;
}
ul li:hover{
background-color: red;
}
</style>
<div id="nav" class="click-nav">
<ul class="ul">
<li>Home</li>
<li>Command Center</li>
<li>Stats</li>
<li>Community
<ul>
<li>Wiki</li> <br>
<li>Forum</li> <br>
<li>Facebook</li> <br>
</ul>
</li>
<li>Updates</li>
<li>About</li>
<li>Support</li>
</ul>
</div>
was an invalid reference to my jquery file. thanks
I've just tried it with jQuery 12.2 and 11.1, which seems to work:
https://jsfiddle.net/2cq1badz/
$('li').hover(function () {
console.log($(this).find('ul>li'));
$(this).find('ul>li').stop().fadeToggle(200);
});
I've also checked you're correctly selecting the drop-down items, so that doesn't seem to be an issue.
I am trying to achieve a basic css drop down menu with NO nested lists within lists. In other words the normal way is:
<ul>
<li><a>Blah</a></li>
<li><a>Blah Parent</a>
<ul>
<li><a>Blah Child</a></li>
</ul>
</li>
</ul>
The way that I need to do it is:
<ul>
<li><a>Blah</a></li>
<li><a>Blah Parent</a></li>
<li class="childitem"><a>Blah Parent</a><li>
<li class="childitem"><a>Blah Parent</a><li>
<li><a>Blah</a></li>
<li><a>Blah</a></li>
<li class="childitem"><a>Blah Parent</a><li>
<li class="childitem"><a>Blah Parent</a><li>
</ul>
Is there any way to do this with purely css? Or with some basic js help?
The result you want is actually a bit ambiguous, but there are several approaches to this.
Solution 1 - change the DOM
If you want to change the DOM dynamically you can make use of jQuery's nextUntil() to find the sibling elements to move:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/9afavum5/
// Solution 1 - change the DOM
$("ul li:not(.childitem)").each(function () {
var children = $(this).nextUntil(":not(.childitem)");
if (children.length) {
$(this).append($("<ul>").append(children));
}
});
This works by finding the intended parents (that do :not have .childitem), then finding the siblings up until the next parent element using nextUntil.
Soution 2 - toggle existing
If you simply want to toggle to child items, and not change the DOM, you can use similar matching techniques to find the sibling items:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/9afavum5/1/
// Solution 2 - toggle the siblings
$("ul li.childitem").hide();
$("ul li:not(.childitem)").click(function(){
$(this).nextUntil(":not(.childitem)").toggle();
});
Indeed, "with some basic js help", you'd need just a simple 'one-liner' (in your function) to fix up the HTML, here it is formatted for better readability (and explanation in comments):
function nestSubULbyClass(par, cls){
for( var elms=par.getElementsByTagName('li'), L=elms.length, t
; L-- //loop through elements in reverse to avoid nested look-ahead loop(s)
; ~(' '+elms[L].className+' ').indexOf(cls) //if current elm contains specified class
? (t || (t=document.createElement('ul')) //then take temp UL or create a new one
).appendChild(par.removeChild(elms[L])) // and move current elm to temp UL
: t && (elms[L].appendChild(t), t=0) //else append temp UL to current elm
); // and clear temp with falsy value
}
//"Make it so, number one!!" Note this is just an example, hook and pass UL any way you like
window.onload=function(){
nestSubULbyClass(document.getElementsByTagName('ul')[0], 'childitem');
};
<ul>
<li><a>Blah</a></li>
<li><a>Blah Parent</a></li>
<li class="childitem"><a>Blah Parent</a></li>
<li class="childitem"><a>Blah Parent</a></li>
<li><a>Blah</a></li>
<li><a>Blah</a></li>
<li class="childitem"><a>Blah Parent</a></li>
<li class="childitem"><a>Blah Parent</a></li>
</ul>
EDIT:
From here on, one can now simply use any pure css based drop-down menu (and styling) without requiring any other javascript-handlers (nice)!
For the following example I used the css from this answer. Note: I removed comments and formatting from the one-liner (humoring anyone arguing that non-context-aware standard formatting is better to read ☺)
function nestSubULbyClass(par, cls) {
for(var elms=par.getElementsByTagName('li'), L=elms.length, t; L--; ~(' '+elms[L].className+' ').indexOf(cls) ? (t || (t=document.createElement('ul'))).appendChild(par.removeChild(elms[L])) : t && (elms[L].appendChild(t), t=0));
}
window.onload=function(){
nestSubULbyClass(document.getElementsByTagName('ul')[0], 'childitem');
};
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #617F8A;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background: #617F8A;
}
li:hover li a:hover {
background: #95A9B1;
}
<ul>
<li><a>Blah</a></li>
<li><a>Blah Parent</a></li>
<li class="childitem"><a>Blah Parent</a></li>
<li class="childitem"><a>Blah Parent</a></li>
<li><a>Blah</a></li>
<li><a>Blah</a></li>
<li class="childitem"><a>Blah Parent</a></li>
<li class="childitem"><a>Blah Parent</a></li>
</ul>
You can As Long as The Got Id's And Clases FIDDLE HERE
HERE
<ul>
<li><a>Blah</a></li>
<li class="drp"><a>Blah Parent</a></li>
<li class="childitem"><a>Blah Parent</a><li>
<li class="childitem"><a>Blah Parent</a><li>
</ul>
JS
$(document).ready(function(){
$(".drp").hover(function(){
$(".childitem").slideToggle("fast");
},function(){
$(".childitem").hide();
});
$(".childitem").hover(function(){
$(".childitem").show();
},function(){
$(".childitem").hide();
});
});
CSS
.drp:hover
{
cursor: pointer;
}
ul li
{
list-style-type: none;
}
.childitem
{
display: none;
}
.childitem:hover
{
background: green;
cursor: pointer;
}
Here is an example which uses CSS and a javascript.
<div class="topnav" id="myTopnav">
Home
<div class="dropdown">
<button class="dropbtn">Products
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
About
News
Contact
☰
</div>
Here is the javascript:
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (!x.classList.contains("responsive")) {
x.classList.add("responsive");
} else {
x.classList.remove("responsive");
}
}
</script>
and the CSS
.topnav {
background-color: #333;
overflow: ;
}
.topnav::after {
clear: both;
content: "";
display: block;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: ;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: ;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: #333;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}