I am trying to get a side dropdown menu on hover, but nothing I tried thus far had any effect apart from shortening the containing div to just text.length. What am I doing wrong? Besides, I want to use as little scripting as possible, possibly only HTML and CSS.
Here comes the code...
<html>
<head>
<title>Thyra Kristin Lang</title>
<style>
body {
font-family: "Lato", sans-serif;
}
h1 {
font-size: xxx-large; text-align: center; text-decoration: underline; }
h4 {
font-size: large; text-align: center; text-decoration: underline; background-color: cyan;
border-width: 1px;
border-style: solid;
border-color: #f00000;
margin-top: 0;
margin-bottom: 0;
}
.sidenav {
height: 100%;
<!-- width: 20%; -->
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: transparent;
overflow-x: hidden;
}
.sidenav a {
padding: 5px;
text-decoration: none;
border-width: 1px;
border-style: solid;
border-color: #f00000;
font-size: medium;
padding: 1 em 2 em;
color: #000000;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
margin-top: 0;
right: 0px;
font-size: medium;
margin-left: 50px;
border: none;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
#wrapper {
width: 100%;
height: 100%;
overflow-y: hidden;
overflow-x: visible;
}
.menu {
background-color: #a0a0a0; width: 20%; height: 100%; float:left; overflow:hidden;
}
#main {
background-color: #00a000; width: 80%; height: 100%; float:left; overflow:hidden; border: none;
}
#elf {
background-color: #0000c0;
color: #a0a0a0;
font-weight: bold;
}
#elf:hover {
background-color: #0000e0;
color: #c0c0c0;
font-weight: bold;
}
#divine {
background-color: #a000a0;
color: #c0c000;
font-weight: bold;
width;100%;
min-width: 100%
}
#divine:hover {
background-color: #c000c0;
color: #f0f000;
font-weight: bold;
width: 100%;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
border-width: 1px;
border-style: solid;
border-color: #0000f0;
min-width: 300px;
margin-left: 100%;
z-index: 3;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
border-width: 1px;
border-style: solid;
border-color: #000000;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
/* Change color of dropdown links on hover */
.divine-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.divine:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.divine:hover .dropbtn {background-color: #3e8e41;}
.divine-content {
display: none;
position: absolute;
background-color: #f1f1f1;
border-width: 1px;
border-style: solid;
border-color: #0000f0;
min-width: 300px;
margin-left: 100%;
z-index: 3;
}
.divine-content + a {
color: black;
border-width: 1px;
border-style: solid;
border-color: #000000;
padding: 12px 16px;
text-decoration: none;
display: inline; important!;
}
/* Change color of dropdown links on hover */
#divine-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
#divine:hover .divine-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
#divine:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>
<h1>Thyra Kristin Lang<br></h1>
<!-- <div width="20%">
<div id="mySidenav" class="sidenav">
x
Lebenslauf
Werkeverzeichnis
Divine
Elfenblut
Gedichte
<br>
</div> -->
<!-- <h2>Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p> -->
<!-- <span id="MyButton" style="font-size:medium; cursor:pointer;" onclick="openNav()">Hauptmenü öffnen</span> -->
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<!-- </div> -->
<div id="wrapper">
<div class="menu" background-color="005000">
<div id="mySidenav" class="sidenav">
<h4>Hauptmenü</h4>
<div>Lebenslauf</div>
<div>Werkeverzeichnis</div>
<div class="dropdown">Divine
<div class="divine-content">
Link 1
Link 2
Link 3
</div>
</div>
Elfenblut
Gedichte
<br>
</div>
</div>
<iframe id="main" name="main" src="willkommen.html" background-color="005000">blub</iframe>
</div>
</body>
</html>
Hey there and welcome to StackOverflow, I wrote some code that seems to answer your question. Essentially what you're aiming to do is display a container on hover of a separate container. Try using the :hover event and the adjacent selector via css, this snippet achieves what you are looking for:
CSS
[name="divine"]:hover + .divine-content {
display: block;
}
notice the :hover event is being placed on your dropdown element and the + sign selector is used because the container you are attempting to show is adjacent to the element you are hovering over.
Codepen
Related
The sidebyside nav now displays something but shortens the original menu-text to only text-length (it should take the whole line). The links in the top line should be displayed next to each other but w/o boxes. I've tried everything w/o success. I want to do my code with as little scripting as possible, only HTML and CSS if possible.
body {
font-family: "Lato", sans-serif;
}
h1 {
font-size: xxx-large;
text-align: center;
text-decoration: underline;
}
h4 {
font-size: large;
text-align: center;
text-decoration: underline;
background-color: cyan;
border-width: 1px;
border-style: solid;
border-color: #f00000;
margin-top: 0;
margin-bottom: 0;
}
.sidenav {
height: 100%;
<!-- width: 20%;
-->position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: transparent;
overflow-x: hidden;
}
.sidenav a {
padding: 5px;
text-decoration: none;
border-width: 1px;
border-style: solid;
border-color: #f00000;
font-size: medium;
padding: 1 em 2 em;
color: #000000;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
margin-top: 0;
right: 0px;
font-size: medium;
margin-left: 50px;
border: none;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
#wrapper {
width: 100%;
height: 100%;
overflow-y: hidden;
overflow-x: visible;
}
.menu {
background-color: #a0a0a0;
width: 20%;
height: 100%;
float: left;
overflow: hidden;
}
#main {
background-color: #00a000;
width: 80%;
height: 100%;
float: left;
overflow: hidden;
border: none;
}
#elf {
background-color: #0000c0;
color: #a0a0a0;
font-weight: bold;
}
#elf:hover {
background-color: #0000e0;
color: #c0c0c0;
font-weight: bold;
}
#divine {
background-color: #a000a0;
color: #c0c000;
font-weight: bold;
width;
100%;
min-width: 100%;
}
#divine:hover {
background-color: #c000c0;
color: #f0f000;
font-weight: bold;
width: 100%;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
border-width: 1px;
border-style: solid;
border-color: #0000f0;
min-width: 300px;
margin-left: 100%;
z-index: 3;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
border-width: 1px;
border-style: solid;
border-color: #000000;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
/* Change color of dropdown links on hover */
.divine-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.divine:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.divine:hover .dropbtn {
background-color: #3e8e41;
}
.divine-content {
display: none;
position: absolute;
background-color: #f1f1f1;
border-width: 1px;
border-style: solid;
border-color: #0000f0;
min-width: 300px;
margin-left: 100%;
z-index: 3;
}
.divine-content+a {
color: black;
border-width: 1px;
border-style: solid;
border-color: #000000;
padding: 12px 16px;
text-decoration: none;
z-index: 3;
}
.size {
display: inline;
color: black;
background-color: red;
text-align: center;
}
/* Change color of dropdown links on hover */
#divine-content+a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
#divine:hover+.divine-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
#divine:hover .dropbtn {
background-color: #3e8e41;
}
<h1>Thyra Kristin Lang<br></h1>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<!-- </div> -->
<div id="wrapper">
<div class="menu" background-color="005000">
<div id="mySidenav" class="sidenav">
<h4>Hauptmenü</h4>
<table class="size">
<tr>
<td><a style="text-size:normal padding-right: 2 em" onclick="javascript:normal()" border="0">A </a>
<td><a style="text-size:large padding-right: 2 em border-style: none;" onclick="javascript:large()">A</a></td>
<td><a style="text-size:x-large padding-right: 2 em" onclick="javascript:xlarge()">A</a></td>
</tr>
</table>
<div>Lebenslauf</div>
<div>Werkeverzeichnis</div>
<div class="dropdown">Divine
<div class="divine-content">
Link 1
Link 2
Link 3
</div>
</div>
Elfenblut
Gedichte
<br>
</div>
</div>
<iframe id="main" name="main" src="willkommen.html" background-color="005000">blub</iframe>
</div>
Try using display:inline-block it will make all elements displayed on a block and use margin or padding to separate them.
A couple things: Only one element should have an specific value for id. The id is unique per element. Styling element inline and externally can sometimes make it difficult to troubleshoot a problem. My personal preference is one or the other except in certain cases.
The question may need more details. Here's what I think you want using flex I was able to position the links next to each other and the take up the whole line without boxes.
body {
font-family: "Lato", sans-serif;
}
h1 {
font-size: xxx-large; text-align: center; text-decoration: underline; }
h4 {
font-size: large; text-align: center; text-decoration: underline; background-color: cyan;
border-width: 1px;
border-style: solid;
border-color: #f00000;
margin-top: 0;
margin-bottom: 0;
}
.sidenav {
height: 100%;
<!-- width: 20%; -->
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: transparent;
overflow-x: hidden;
}
#mySidenav1 {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.sidenav a {
padding: 5px;
text-decoration: none;
border-width: 1px;
border-style: solid;
border-color: #f00000;
font-size: medium;
padding: 1 em 2 em;
color: #000000;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
margin-top: 0;
right: 0px;
font-size: medium;
margin-left: 50px;
border: none;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
#wrapper {
width: 100%;
height: 100%;
overflow-y: hidden;
overflow-x: visible;
}
.menu {
background-color: #a0a0a0; width: 20%; height: 100%; float:left; overflow:hidden;
}
#main {
background-color: #00a000; width: 80%; height: 100%; float:left; overflow:hidden; border: none;
}
#elf {
font-weight: bold;
}
#elf:hover {
background-color: #0000e0;
color: #c0c0c0;
font-weight: bold;
}
#divine {
font-weight: bold;
}
#divine:hover {
background-color: #c000c0;
color: #f0f000;
font-weight: bold;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
border-width: 1px;
border-style: solid;
border-color: #0000f0;
min-width: 300px;
margin-left: 100%;
z-index: 3;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
border-width: 1px;
border-style: solid;
border-color: #000000;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
/* Change color of dropdown links on hover */
.divine-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.divine:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.divine:hover .dropbtn {background-color: #3e8e41;}
.divine-content {
display: none;
position: absolute;
background-color: #f1f1f1;
border-width: 1px;
border-style: solid;
border-color: #0000f0;
min-width: 300px;
margin-left: 100%;
z-index: 3;
}
.divine-content + a {
color: black;
border-width: 1px;
border-style: solid;
border-color: #000000;
padding: 12px 16px;
text-decoration: none;
z-index: 3;
}
.size {
display: inline;
color: black;
background-color: red;
text-align: center;
}
/* Change color of dropdown links on hover */
#divine-content + a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
#divine:hover + .divine-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
#divine:hover .dropbtn {background-color: #3e8e41;}
<h1>Thyra Kristin Lang<br></h1>
<div id="mySidenav1" class="sidenav1">
x
Lebenslauf
Werkeverzeichnis
Divine
Elfenblut
Gedichte
<br>
</div>
<br>
<!-- <h2>Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p> -->
<!-- <span id="MyButton" style="font-size:medium; cursor:pointer;" onclick="openNav()">Hauptmenü öffnen</span> -->
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<!-- </div> -->
<div id="wrapper">
<div class="menu" background-color="005000">
<div id="mySidenav" class="sidenav">
<h4>Hauptmenü</h4>
<table class="size">
<tr>
<td><a style="text-size:normal padding-right: 2 em" onclick="javascript:normal()" border="0">A </a></td>
<td><a style="text-size:large padding-right: 2 em border-style: none;" onclick="javascript:large()">A</a></td>
<td><a style="text-size:x-large padding-right: 2 em" onclick="javascript:xlarge()">A</a></td>
</tr>
</table>
<div>Lebenslauf</div>
<div>Werkeverzeichnis</div>
<div class="dropdown">Divine
<div class="divine-content">
Link 1
Link 2
Link 3
</div>
</div>
Elfenblut
Gedichte
<br>
</div>
</div>
<iframe id="main" name="main" src="willkommen.html" background-color="005000">blub</iframe>
</div>
I wrote something like this for different html pages, but doesn't show because the html files are local, how do I send them all? (not too complicated please, I'm a beginner)
<!DOCTYPE html>
<html style="background-color: grey">
<head>
<style>
#div1 {
background-image: linear-gradient(darkred, red);
border-radius: 15px;
padding: 10px;
font-family:"Lucida Handwriting", cursive;
color: white
}
.topnav {
background-color: #333;
overflow: hidden;
position: fixed;
top: 0;
}
/* Style the links inside the navigation bar */
.topnav a {
font-family:"Lucida Handwriting", cursive;
float: left;
color: #f2f2f2;
text-align: center;
padding: 1px 107px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: grey;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: darkred;
color: white;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
</style>
</head>
<div class="topnav">
<a class="active" href="file:///C:/Users/Anas/Desktop/TNL1PROWEB/HTML/home.html">Accueil</a>
Classement
Statistiques
Matchs & Resultats
</div>
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
Somehow my dropdown button isn't aligning in center when using the custom html in Clickfunnels. I'm not really that into coding maybe someone here could help me with it.
I already tried to add different text-aligns also with !important left, right, margins etc. but it would save me a lot of headaches if it would just always easily be centered.
<html>
<head>
<title> Centered Navigation Menu</title>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">ÜBER UNS</button>
<style>
/* Dropdown Button */
.dropbtn {
position: relative;
background: transparent;
color: white;
padding: 20px;
width: 150px;
font-size: 15px;
border: none;
font-weight: 900;
font-family: LATO;
transition: ease-in-out 0.8s;
left: 50% !important;
right: auto !important;
text-align: center !important;
transform: translate(-50%, 0) !important;
}
.dropdown:hover .dropbtn {
background: white;
transition: background ease-in-out 0.5s;
color: black;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
position: absolute;
width: 150px;
left: -999em;
}
.dropdown:hover .dropdown-content {
background-color: white;
left: 0;
transition: background ease-in-out 0.5s;
;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
font-size: 15px;
text-decoration: none;
display: block;
text-align: center;
}
</style>
<div class="dropdown-content">
GALERIE
LAGE
</div>
</div>
</body>
</html>
<html>
<head>
<title> Centered Navigation Menu</title>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">ÜBER UNS
</button>
<style>
/* Dropdown Button */
.dropbtn {
position: relative;
background: white;
color: red;
padding: 20px;
width: 150px;
font-size: 15px;
border: none;
font-weight: 900;
font-family: LATO;
transition: ease-in-out 0.8s;
left: 50% !important;
right: auto !important;
text-align: center !important;
transform: translate(300%, 0) !important;
}
.dropdown:hover .dropbtn {
transition: background ease-in-out 0.5s;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
text-align: center;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
position: absolute;
width: 150px;
left:-999em;
}
.dropdown:hover .dropdown-content {
left: 0;
transition: background ease-in-out 0.5s;;
}
.dropdown:hover .dropdown-content {display: block;}
.dropdown-menu-center {
left: 50% !important;
right: auto !important;
text-align: center !important;
transform: translate(350%, 0) !important;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
font-size: 15px;
text-decoration: none;
display: block;
text-align: center;
}
</style>
<div class="dropdown-content">
<div class="dropdown-menu-center">
GALERIE
LAGE
</div>
</div>
</div>
</body>
</html>
Please run code it will center your drop down button
Made the changes to following 2 classes:
.dropbtn {
position: relative;
background: transparent;
color: white;
padding: 20px;
width: 150px;
font-size: 15px;
border: none;
font-weight: 900;
font-family: LATO;
transition: ease-in-out 0.8s;
text-align: center !important;
.dropdown {
position: relative;
text-align:center;
}
To center the elements inside your div class="dropdown">, style it with display: block; and text-align: center;
<html>
<head>
<title> Centered Navigation Menu</title>
</head>
<style>
.dropdown {
display: block;
text-align: center;
}
</style>
<body>
<div class="dropdown">
<button class="dropbtn">ÜBER UNS
</button>
<div class="dropdown-content">
GALERIE
LAGE
</div>
</div>
</body>
</html>
<html>
<head>
<title> Centered Navigation Menu</title>
<style>
.dropdown {
display: block;
text-align: center;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">ÜBER UNS
</button>
<div class="dropdown-content">
GALERIE
LAGE
</div>
<style>
/* Dropdown Button */
.dropbtn {
position: relative;
background: transparent;
color: white;
padding: 20px;
width: 150px;
font-size: 15px;
border: none;
font-weight: 900;
font-family: LATO;
transition: ease-in-out 0.8s;
text-align: center !important;
}
.dropdown:hover .dropbtn {
background: white;
transition: background ease-in-out 0.5s;
color: black;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
text-align:center;
}
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
position: absolute;
}
.dropdown:hover .dropdown-content {
background-color:white;
left: 0;
transition: background ease-in-out 0.5s;;
}
.dropdown:hover .dropdown-content {display: block;}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
font-size: 15px;
text-decoration: none;
display: block;
text-align: center;
}
</style>
</div>
</body>
</html>
enter image description here
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>