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
Related
I have a pure CSS Dropdown button and would like to keep it without JS.
However, I have the following problem; as soon as I click on the bottom third of one of the button links, only the Dropdown menu closes but the link is not opening. The links only work from the beginning of the text (up from the bottom). Everything below the text is not clickable or does not open the link. Everything above the beginning of the text is working fine. I hope I have described my problem understandably enough.
So my question is of course: where is my error or what do I have to fix in my code so that the entire surface of the buttons become clickable links?
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
h1 {
color: white;
}
/* Dropdown container start */
.dropdown {
display: inline-block;
position: relative;
margin: 10px 0 0 0;
}
/* button */
.dropbtn {
padding: 8px 12px;
color: white;
background-color: #121212;
border: 1.5px solid white;
border-radius: 3px;
cursor: pointer;
transition: 0.25s ease-out;
}
/* Dropdown content */
.dropdown .dropdown-content {
position: absolute;
border-radius: 3px;
top: 50%;
z-index: 9999;
visibility: hidden;
opacity: 0;
transition: 0.25s ease-out;
}
.dropdown-content a {
color: black;
background-color: #f0f0f0;
border-radius: 3px;
margin-top: 3px;
padding: 8px 12px;
display: block;
text-decoration: none;
transition: 0.25s ease-out;
width: 130px;
}
.dropdown-content a:hover {
background-color: lightgray;
}
/* show Dropdown content */
.dropdown:focus .dropdown-content {
outline: none;
transform: translateY(20px);
visibility: visible;
opacity: 1;
}
.dropbtn:hover, .dropdown:focus .dropbtn {
background-color: #f0f0f0;
color: black;
border: 1.5px solid #f0f0f0;
}
/* mask to close menu by clicking on the button */
.dropdown .db2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
cursor: pointer;
display: none;
}
.dropdown:focus .db2 {
display: inline-block;
}
</style>
</head>
<body>
<h1>My example Website</h1>
<div class="dropdown" tabindex="1" title="Open the main menu">
<div class="db2" tabindex="1"></div>
<a class="dropbtn">My menu</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
</div>
</body>
</html>
I have now found a solution but it is only working inside the snippet, as soon as i integrate it into my website, the style is messed up because of the missing position i think so... :/
I have deleted the following values from my CSS:
.dropdown:focus .dropdown-content {transform:translateY(20px);}
.dropdown {position:relative;}
And replaced the following Values
.dropdown .dropdown-content {position:absolute; top:50%;}
With these values
.dropdown .dropdown-content {position:relative; margin-top:12px;}
As you can see in my new code, you can now click wherever you want and the link will work as it should work.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
h1 {
color: white;
}
/* Dropdown container start */
.dropdown {
display: inline-block;
margin: 10px 0 0 0;
}
/* button */
.dropbtn {
padding: 8px 12px;
color: white;
background-color: #121212;
border: 1px solid white;
border-radius: 3px;
cursor: pointer;
transition: 0.25s ease-out;
}
/* Dropdown content */
.dropdown .dropdown-content {
position: relative;
border-radius: 3px;
margin-top: 12px;
z-index: 9999;
visibility: hidden;
opacity: 0;
transition: 0.25s ease-out;
}
.dropdown-content a {
color: black;
background-color: #f0f0f0;
border-radius: 3px;
margin-top: 3px;
padding: 8px 12px;
display: block;
text-decoration: none;
transition: 0.25s ease-out;
width: 100px;
}
.dropdown-content a:hover {
background-color: lightgray;
}
/* show Dropdown content */
.dropdown:focus .dropdown-content {
outline: none;
visibility: visible;
opacity: 1;
}
.dropbtn:hover, .dropdown:focus .dropbtn {
background-color: #f0f0f0;
color: black;
border: 1.5px solid #f0f0f0;
}
/* mask to close menu by clicking on the button */
.dropdown .db2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
cursor: pointer;
display: none;
}
.dropdown:focus .db2 {
display: inline-block;
}
</style>
</head>
<body>
<h1>My example Website</h1>
<div class="dropdown" tabindex="1" title="Open the main menu">
<div class="db2" tabindex="1"></div>
<a class="dropbtn">My menu</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
</div>
</body>
</html>
```
Focus is lost in 0.25 sec while it needs a longer time for click work.
I updated the transition time to 1 sec.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
h1 {
color: white;
}
/* Dropdown container start */
.dropdown {
display: inline-block;
position: relative;
margin: 10px 0 0 0;
}
/* button */
.dropbtn {
padding: 8px 12px;
color: white;
background-color: #121212;
border: 1.5px solid white;
border-radius: 3px;
cursor: pointer;
transition: 0.25s ease-out;
}
/* Dropdown content */
.dropdown-content {
position: absolute;
border-radius: 3px;
z-index: 9999;
visibility: hidden;
opacity: 0;
transition: 1s ease-out;
}
.dropdown-content a {
color: black;
background-color: #f0f0f0;
border-radius: 3px;
margin-top: 3px;
padding: 8px 12px;
display: block;
text-decoration: none;
transition: 0.25s ease-out;
width: 130px;
}
.dropdown-content a:hover {
background-color: lightgray;
}
/* show Dropdown content */
.dropdown:focus .dropdown-content {
outline: none;
margin-top: 20px;
visibility: visible;
opacity: 1;
transition: 0.25s ease-out;
}
.dropbtn:hover,
.dropdown:focus .dropbtn {
background-color: #f0f0f0;
color: black;
border: 1.5px solid #f0f0f0;
}
/* mask to close menu by clicking on the button */
.dropdown .db2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
cursor: pointer;
display: none;
}
.dropdown:focus .db2 {
display: inline-block;
}
</style>
</head>
<body>
<h1>My example Website</h1>
<div class="dropdown" tabindex="1" title="Open the main menu">
<div class="db2" tabindex="1"></div>
<a class="dropbtn">My menu</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
</div>
</body>
</html>
Ok, I have now my final CSS Dropdown solution that seem to work for me. I get inspired by this website https://lage.us/CSS-Onclick-Dropdown-Menu.html and its very slim code.
Thanks anyway to everyone who helped and gave some thought to the problem.
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
h1 {
color: white;
}
/*start of the dropdown container*/
.menutop {
position: relative;
display: inline-block;
z-index: 2;
margin-top: 1px;
outline: 0;
text-align: left;
cursor: pointer;
border: 2px solid #f0f0f0;
border-radius: 4px;
background: #121212;
color: white;
padding: 5px 10px;
}
.menutop:hover {
border: 2px solid #f0f0f0;
background: #f0f0f0;
color: black;
}
/*labeling of the left button*/
.menutop::before {
content: "\2630 \a0 Menu";
padding: 5px 10px;
}
.menutop:focus {
pointer-events: none;
}
/*If :focus detected the dropdown menu is displayed by making it visible*/
.menutop:focus .menutop-dropdown {
opacity: 1;
visibility: visible;
}
/*style for the dropdown box*/
.menutop-dropdown {
background: transparent;
width: auto;
margin-top: 6px;
pointer-events: auto;
position: absolute;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: visibility 1s;
}
/*style the links in the dropdown*/
.menutop-dropdown a {
background: #f0f0f0;
margin: 6px 0 0 -12px;
border: 2px solid #f0f0f0;
border-radius: 4px;
outline: 0;
display: inline-block;
color: black;
text-decoration: none;
width: 140px;
padding: 8px;
}
.menutop-dropdown a:hover {
background: #121212;
border: 2px solid white;
color: white;
}
<h1>My example Website</h1>
<div tabindex="0" class="menutop">
<div class="menutop-dropdown">
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
</div>
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 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
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
When adding padding, margin, just general distance to a text element on my page, my top menu kind of "mirrors" down on the page and i get a non-functional second menu at the middle of the page. Identical to the second one, and cuts through all other elements like images, text, etc.. Colors and all other aspects are still retained on the new menu and on the page in general.
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>something</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body class="fade-in">
<div id="meny">
<div id="menyknapp1">
<div class="dropdown">
<button class="dropbtn">Mobile Enheter</button>
<div class="dropdown-content">
Enheter
Operativsystemer
</div>
</div>
</div>
<div id="menyknapp2">
<div class="dropdown">
<button class="dropbtn">Teknologi</button>
<div class="dropdown-content">
Webtjenester
Teknologier
</div>
</div>
</div>
</div>
</div>
<div id="bilde1">
<img src="Technology.png" style="width: 400px; height: 350px;">
</div>
</div> </div>
<div id="tekst">
<p> text
</p>
</div>
</body>
</html>
CSS code:
#import url('https://rsms.me/inter/inter-ui.css');
/*fade in animasjon body */
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:0.3s;
-moz-animation-duration:0.3s;
animation-duration:0.3s;
}
body {
height: 100%;
width: 100%;
margin-left: 2%;
}
#meny {
background-color: #CACACA;
position: absolute;
width: 100%;
height: 10%;
top: 0%;
left: 0%;
padding-left: 10px;
padding-top: 5px;
padding-right: 5px;
}
#tekst
{
top: 20%;
font-family: 'Inter UI', 'sans-serif';
font-size: 30px;
position: absolute;
}
.dropbtn {
background-color: #89cff0;
color: black;
padding: 16px;
font-size: 18px;
border: none;
cursor: pointer;
font-family: 'Inter UI', 'sans-serif';
border-radius: 3px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #89cff0;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
font-family: 'Inter UI', 'sans-serif';
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* 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: #6599b2;
}
#menyknapp1 {
position: absolute;
left: 3%;
top: 10%;
padding: auto;
}
#menyknapp2 {
position: absolute;
left: 20%;
padding: auto;
top: 10%;
}
#tekst {
margin-left: 18px;
font-size: 18px;
line-height: 25px;
position: relative;
padding-top:
}
#bilde1 {
position: absolute;
left: 18px;
width: 600px;
height: 400px;
}
It has to do with absolute position in your .dropdown-content css definition.
Maybe take some time to understand how absolute positioning works:
https://www.w3schools.com/css/css_positioning.asp