So I'm looking at the code on w3schools.com and there are a few good examples and I'm trying to make heads or tails of it all. But they don't offer instructions on customizing the code for a third level of menus. Could someone break this code down for me so I can add multiple levels of menus at will?
<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Title</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.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;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
Also could someone explain to me here where and how this code tells the browser the overall width of the navbar. I tried someone else code on here and the nav bar was stuck at only 150px. When I changed the width values it got all buggy. So I know I'm just not understanding where this is determined in the code.
Update: Thanks to one of the answers I've figured out how to get the tertiary menu in and fumbled through getting the menu to pop out to the right. Now my issue is that it extends the dropdown menu under "Link 3" as though it were making room for the links below it. How would I remove this? Here's my current code:
<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Title</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
width: 100%; /*red background color width*/
text-align: start; /*text inside in red background color*/
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content-sub {
display: none;
position: relative;
top: -46px;
right: -300px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 300px; /*block width*/
}
.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;
width: 300px; /*block width*/
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-sub:hover .dropdown-content-sub {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
<div class="dropdown-sub">
<button class="dropbtn">Link 3
<i class="fa fa-caret-right"></i>
</button>
<div class="dropdown-content-sub">
Link 4
Link 5
Link 6
</div>
</div>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
Update 2 Final: So it seems my changing the position of the third tier from absolute to relative caused the undesired effect. Simply switching it back solved it and it all now works. :) I had to change the "top" position of the button after that but that was easy to figure out. Now I should be able to just place my links in each menu item and I'm good to go! :) Thanks for the help!
See updates in OP. Thanks to #JannesCarpentier and one other anonymous user for the help! Here's the code tweaked from w3schools.com to get 3-tiered hover navbar.
<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Title</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
width: 100%; /*red background color width*/
text-align: start; /*text inside in red background color*/
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content-sub {
display: none;
position: absolute;
top: 85px;
right: -300px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 300px; /*block width*/
}
.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;
width: 300px; /*block width*/
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-sub:hover .dropdown-content-sub {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
<div class="dropdown-sub">
<button class="dropbtn">Link 3
<i class="fa fa-caret-right"></i>
</button>
<div class="dropdown-content-sub">
Link 4
Link 5
Link 6
</div>
</div>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
width: 100%; /*red background color width*/
text-align: start; /*text inside in red background color*/
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content-sub {
display: none;
position: absolute;
top: 85px;
right: -300px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 300px; /*block width*/
}
.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;
width: 300px; /*block width*/
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-sub:hover .dropdown-content-sub {
display: block;
}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
<div class="dropdown-sub">
<button class="dropbtn">Link 3
<i class="fa fa-caret-right"></i>
</button>
<div class="dropdown-content-sub">
Link 4
Link 5
Link 6
</div>
</div>
</div>
</div>
</div>
Related
I have tried to follow this tutorial, but I can't seem to find out why the dropdown menu won't show up at all when hovering over the dropdown button in the nav bar.
This is the HTML part of the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>
<div id="main-container">
<div id="navbar" class="navbar">
New
Sales
Account
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
</body>
</html>
This is the CSS part of the code:
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
font-family: "Poppins", sans-serif;
background-color: #00ff00;
}
#main-container {
padding: 16px;
margin-top: 30px;
}
#navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 30px;
z-index: 9999;
}
#navbar a.active {
text-decoration: underline;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.new_sale {
background-color: green;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.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;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
The problem is that you are hiding the content which goes over the boundaries of your navbar and dropdown.
You need to remove
overflow: hidden;
from your #navbar and .dropdown class, check this fiddle
I am working on code I got from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar and trying to modify it to fit my needs.
So far I have managed to make all my menu items work the way I want and get the styling right but I can't get the menu items to move to the right.
Expected outcome:
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
width: 100%;
overflow: hidden;
background-color: #8FC3EA;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 10px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 10px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown .dropbtn-right {
position: absolute;
right: 5px;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 10px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #8FC3EA;
}
.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;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
Home
Issue Test
<div class="dropdown">
<button class="dropbtn">Test Results
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Grade Test
View Report
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Admin
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Edit Test
Users
</div>
</div>
<div class="dropdown">
<button class="dropbtn"><img src="userIcon.png" height="30" width="30">
</button>
<div class="dropdown-content">
Change Password
Log Out
</div>
</div>
</div>
Use float: right;
You will have to adjust your drop downs so they don't go off screen.
body {
font-family: Arial, Helvetica, sans-serif;
}
.right {
float: right;
}
.navbar {
width: 100%;
overflow: hidden;
background-color: #8FC3EA;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 10px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 10px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown .dropbtn-right {
position: absolute;
right: 5px;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 10px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #8FC3EA;
}
.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;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="navbar">
<div class="right">
Home
Issue Test
<div class="dropdown">
<button class="dropbtn">Test Results
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Grade Test
View Report
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Admin
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Edit Test
Users
</div>
</div>
<div class="dropdown">
<button class="dropbtn"><img src="userIcon.png" height="30" width="30">
</button>
<div class="dropdown-content">
Change Password
Log Out
</div>
</div>
</div>
</div>
</body>
</html>
Create another div inside your nav bar, and float it to the right, like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
width: 100%;
overflow: hidden;
background-color: #8FC3EA;
}
.nav-content {
float : right ;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 10px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 10px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown .dropbtn-right {
position: absolute;
right: 5px;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 10px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #8FC3EA;
}
.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;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
<div class="nav-content">
Home Issue Test
<div class="dropdown">
<button class="dropbtn">Test Results <i class="fa fa-caret-down"></i> </button>
<div class="dropdown-content">
Grade Test View Report
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Admin <i class="fa fa-caret-down"></i> </button>
<div class="dropdown-content">
Edit Test Users
</div>
</div>
<div class="dropdown">
<button class="dropbtn"><img src="userIcon.png" height="30" width="30"> </button>
<div class="dropdown-content">
Change Password Log Out
</div>
</div>
</div>
</div>
</body>
</html>
Final code that thanks to ajzbc... now to add all the PHP so menu items only show for the right users, but I think I can make that work it's CSS I don't fully understand yet.
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.right {
float: right;
}
.navbar {
width: 100%;
overflow: hidden;
background-color: #8FC3EA;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 10px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 10px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #8FC3EA;
}
.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-right {
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;
}
.dropdown-content-right a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropdown-content-right {
right: 4px;
left: auto;
display: block;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="navbar">
<div class="right">
Home
Issue Test
<div class="dropdown">
<button class="dropbtn">Test Results
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Grade Test
View Report
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Admin
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Edit Test
Users
</div>
</div>
<div class="dropdown">
<button class="dropbtn"><img src="usricon.png" height="20" width="20">
</button>
<div class="dropdown-content-right">
Change Password
Log Out
</div>
</div>
</div>
</div>
</body>
</html>
The css hover drop down worked perfectly on fresh page, but it is not working when pasted on html page which is linked with bootstrap (I hided other css pages so I found bootstrap causing the problem!)
So using devtool I hided 'position:absolute' from 'dropdown-contents' which is working but the below container jumping downward:http://prntscr.com/lu7frm
Here is the code:
.navbar {
overflow: hidden;
/* background-color: #333;*/
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: right;
font-size: 16px;
color: #060606;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #060606;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
color:#4389dc;
transition:.3s ease-out;
}
.dropdown-contents {
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-contents a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-contents a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-contents {
display: block;
}
/*navbar*/
#slapper {
min-height: 2%;
height: auto !important;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container" style="padding:0px;">
<div class="navbar">
For Professionals
Tax News
Ask a Question
Find an Accountant
<div class="dropdown">
<button class="dropbtn">Learn About Taxes
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-contents">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
You need to remove the overflow:hidden from you code (.navbar and .dropdown) to be able to see the dropdown. You no more need them to clear the float as bootstrap is already doing this.
.navbar {
font-family: Arial, Helvetica, sans-serif;
border-color:#000!important; /*to show that the height is good*/
}
.navbar a {
float: right;
font-size: 16px;
color: #060606;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #060606;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
color:#4389dc;
transition:.3s ease-out;
}
.dropdown-contents {
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-contents a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-contents a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-contents {
display: block;
}
/*navbar*/
#slapper {
min-height: 2%;
height: auto !important;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container" style="padding:0px;">
<div class="navbar">
For Professionals
Tax News
Ask a Question
Find an Accountant
<div class="dropdown">
<button class="dropbtn">Learn About Taxes
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-contents">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
I am using HTML and CSS to create a website, and im currently working on a navigation bar at the top but I dont know how to seperate different nav bar buttons/create them. As when i tried to make a second one, when i hover over our athletes it also hovers over about us. How do I create different drop down buttons on one nav bar?
h1 {
text-decoration: underline;
text-align: center;
}
h3 {
text-align: center;
}
body {
background-color: #BBBCC0;
}
p {
text-align: center;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: green;
}
.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;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="rtsnp_home.css">
<title>Rolling Thunder Special Needs Program</title>
</head>
<body>
<div class="navbar">
Home
<!--no drop down-->
<div class="dropdown">
<button class="dropbtn">About Us
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Mission Statement
Our Founder
Our Board of Directors
National Board of Directors
Programs Offered
</div>
<button class="dropbtn">Our Athletes
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
</div>
</div>
</div>
</body>
</html>
It's a small mistake in the div tags. Here you go.
You need to seperate div tags from each dropdown, otherwise both will call at the same time which occurs in your snippet.
h1 {
text-decoration: underline;
text-align: center;
}
h3 {
text-align: center;
}
body {
background-color: #BBBCC0;
}
p {
text-align: center;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: green;
}
.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;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="rtsnp_home.css">
<title>Rolling Thunder Special Needs Program</title>
</head>
<body>
<div class="navbar">
Home
<!--no drop down-->
<div class="dropdown">
<button class="dropbtn">About Us
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Mission Statement
Our Founder
Our Board of Directors
National Board of Directors
Programs Offered
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Our Athletes
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
</div>
</div>
</div>
</body>
</html>
I have created this menu with a dropdown feature when you hover over "treatments". But when I apply the "position: fixed;" in the container class on CSS the dropdown menu doesn't function anymore. The menu goes to a fixed position but the dropdown feature won't function with the fixed position. I would like to solve it with CSS, any suggestions on how?
.container {
overflow: hidden;
background-color: rgba(48, 48, 48, 0.9);
font-family: Helvetica, sans-serif;
width: 100%;
position: fixed;
margin-top: 0;
margin-left: 0;
}
.container a {
float: right;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.container a:hover,
.dropdown:hover .dropbtn {
background-color: #ff008f;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(255, 255, 255, 0.98);
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;
}
.dropdown-content a:hover {
background-color: #f9e9ff;
}
.dropdown:hover .dropdown-content {
display: block;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="UCL.css">
<title>Home</title>
<div class="stripes">
<div class="container">
Contact Us
<a href="products-gifts.html" target="_top">Products &
Gifts</a>
<div class="dropdown">
<button class="dropbtn">Treatments</button>
<div class="dropdown-content">
<a href="body-contouring.html" target="_top">Body
Contouring</a>
Cellulite
Laser Hair Reduction
<a href="laser-peels.html" target="_top">Laser
Peels</a>
LED
<a href="photofacial.html" target="_top>" Photofacial & Photobody</a>
<a href="spider-veins.html" target="_top">Spider
Veins</a>
</div>
</div>
Home
</div>
</head>
It was the overflow: hidden on your .container element that prevented the dropdown menus from showing - not the position: fixed. By hiding overflow, you're preventing elements (such as your dropdown menu) that exceed the dimensions of the .container from displaying.
.container {
/* overflow: hidden; */
background-color: rgba(48, 48, 48, 0.9);
font-family: Helvetica, sans-serif;
width: 100%;
position: fixed;
margin-top: 0;
margin-left: 0;
}
.container a {
float: right;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.container a:hover,
.dropdown:hover .dropbtn {
background-color: #ff008f;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(255, 255, 255, 0.98);
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;
}
.dropdown-content a:hover {
background-color: #f9e9ff;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="stripes">
<div class="container">
Contact Us
<a href="products-gifts.html" target="_top">Products &
Gifts</a>
<div class="dropdown">
<button class="dropbtn">Treatments</button>
<div class="dropdown-content">
<a href="body-contouring.html" target="_top">Body
Contouring</a>
Cellulite
Laser Hair Reduction
<a href="laser-peels.html" target="_top">Laser
Peels</a>
LED
<a href="photofacial.html" target="_top>" Photofacial & Photobody</a>
<a href="spider-veins.html" target="_top">Spider
Veins</a>
</div>
</div>
Home
</div>
</div>