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
Related
I am trying to add a sticky nav bar to a sample web page I am creating. A working sample of the code is attached below. However, when I scroll all the way down, my nav bars dropdowns stop working. It works fine when scrolling up again. I am not sure what is wrong here. Appreciate any thoughts on what is going wrong here.
.header {
padding: 10px;
text-align: center;
background: black;
color: white;
}
.navbar {
overflow: hidden;
background-color: #47494f;
z-index: 5;
}
.keepItTop {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
/* Style the navigation bar links */
.navbar a {
float: left;
font-size: 16px;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #ddd;
color: black;
}
/*Dropdown Menu*/
.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;
}
.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: 6;
}
.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;
}
.homeVideo {
width: 100%;
height: auto;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="header">
<h1>Sample WebPage</h1>
</div>
<div class="keepItTop">
<div class="navbar">
Home
About Me
<div class="dropdown">
<button class="dropbtn">Games
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Swimming
Badminton
</div>
</div>
Contact Us
</div>
</div>
<div>
<video class="homeVideo" autoplay muted loop>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
Your video has a higher z stacking level than your menu. Bring the menu above it.
.header {
padding: 10px;
text-align: center;
background: black;
color: white;
}
.navbar {
overflow: hidden;
background-color: #47494f;
z-index: 5;
}
.keepItTop {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
z-index: 99; /* <----------------------- HERE */
}
/* Style the navigation bar links */
.navbar a {
float: left;
font-size: 16px;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #ddd;
color: black;
}
/*Dropdown Menu*/
.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;
}
.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: 6;
}
.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;
}
.homeVideo {
width: 100%;
height: auto;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="header">
<h1>Sample WebPage</h1>
</div>
<div class="keepItTop">
<div class="navbar">
Home
About Me
<div class="dropdown">
<button class="dropbtn">Games
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Swimming
Badminton
</div>
</div>
Contact Us
</div>
</div>
<div>
<video class="homeVideo" autoplay muted loop>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
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>
drop down showing above parent navigation bar i want to show the drop down below my navigation bar
i am using asp.net site master page
page link
http://eforms.hopto.org/Management/
i just copy the code from w3shools
https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
and past to my code and still not working using chrome or Opera
but it working with microsoft Edge browser
i am using site master page and asp.net
<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>
Move it down with top... just add the top here:
.dropdown-content {
top: 45px;
}
OR, add the dropdown-content inside the dropbtn - now they are not inside, but right after - eg:
<div class="dropdown">
<button class="dropbtn">
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
</div>
</div>
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 want to make a horizontal navigation bar that is sticky to the top with dropdown menus. The problem is that the dropdown menus no longer show when I make the navigation bar sticky.
I used the following CSS3 to achieve the sticky effect. Is there another way to accomplish the same effect, especially with CSS.
.topnav {
overflow: hidden;
background-color: #333;
position: fixed; /* This line adds stickyness */
top: 0; /* along with this line here */
width: 100%;
}
Minimum Problematic Example:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
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;
}
.topnav 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;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
/* Used in this example to enable scrolling */
}
<div class="topnav">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<b>V</b>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<div class="main">
<h1>Fixed Top Menu</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
Edit:
Thanks to Saeed and dkobando. I am only at the start of my web document journey. I have been slowly piecing together the parts of my site from various guides. I was pleasantly surprised by two helpful prompt answers. Your replies here encourage me to continue my journey.
You may try this fix below, I used a display flex and remove the overflow: hidden; on your .topnav class. I hope this will help.
<div class="topnav">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown <b>V</b></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<div class="main">
<h1>Fixed Top Menu</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
display:flex;
}
.topnav a,
.dropdown,
.dropdown .dropbtn {
font-size: 16px;
color: white;
text-align: center;
text-decoration: none;
}
.topnav a,
.dropdown .dropbtn{
padding: 14px 16px;
}
.dropdown .dropbtn {
background-color: transparent;
border: none;
}
.topnav 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;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
/* Used in this example to enable scrolling */
}
That is because the dropdown is positioned absolutely and It won't be positioned according to the fixed nav bar but according to the closest relative positioned element. It can be quickly fixed with an extra wrapper with fixed positioning.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
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;
}
.topnav 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;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
/* Used in this example to enable scrolling */
}
<div class="fixed">
<div class="topnav">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<b>V</b>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
<div class="main">
<h1>Fixed Top Menu</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>