I modified the example from W3 schools a little bit to include a nested DropDown menu. I cannot figure out how to edit the css so that the drop down menus always appear to the right of the button being hovered over.
Ideally I want to drop down to look like this when hovering over Main button, and then Sub button2
[Main button] - [Sub button1]
[Sub button2] - [Sub button2 item1]
[Sub button3] - [Sub button2 item2]
- [Sub button2 item3]
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.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 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover > .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
<p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>
Just add left: 100%; top: 0; to your .dropdown-content. This will set to the defined position of the absolute element.
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
left: 100%;
top: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover>.dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
<p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be URLs.</p>
Related
Hi guys I'm an absolute beginner who just started learning html and was wondering why when I try to add a background image to my html file my dropdown menu suddenly becomes inoperative. These first and second pieces of code are my attempts at using a background image and a dropdown menu respectively. They both work fine for learning purposes but in the third piece of code when I combine them the dropdown button doesn't activate when hovered over. Anyone understand why?
BACKGROUND IMAGE CODE
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://i2.wp.com/brandikaran.com/wp-content/uploads/ld.png?ssl=1');
}
</style>
</head>
<body>
<h2>Testing</h2>
<p>Work this time pls</p>
</body>
</html>
DROPDOWN MENU CODE
!<!DOCTYPE html>
<html>
<head>
<<title>Dropdown Menus</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: red;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16 px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: pink;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: OrangeRed;}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="Dropdown">
<button class="dropbtn">dropdown</button>
<div class="dropdown-content">
S Tier
A Tier
B Tier
</div>
</body>
</html>
COMBINING THEM
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://i2.wp.com/brandikaran.com/wp-content/uploads/ld.png?ssl=1');
}
.dropbtn {
background-color: red;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16 px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: pink;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: OrangeRed;}
</style>
</head>
<body>
<h2>Testing</h2>
<p>Work this time pls</p>
<div class="Dropdown">
<button class="dropbtn">dropdown</button>
<div class="dropdown-content">
S Tier
A Tier
B Tier
</div>
</body>
</html>
Typo error here, change the first div class name to dropdown from Dropdown. It will work.
<div class="dropdown">
<button class="dropbtn">dropdown</button>
<div class="dropdown-content">
S Tier
A Tier
B Tier
</div>
</div>
And also the div container is not closed properly, but that shouldn't be a problem here, because the browser will take care of that automatically, but make sure you close all the tags properly, inproper closing may lead to unexcepted result. Thank you
I am setting up a dropdown menu with div tags but when I have two dropdown boxes when I hover on each one of the boxes appear.
I tried Using ul li tags but that couldn't help.
.dropbtn {
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {}
.dropdown-content {
display: none;
position: absolute;
background-color: #EFEFEF;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-top: 50px;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block !important;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="topnav">
<div class="dropdown">
<a class="dropbtn">چرا ما ؟</a>
<div class="dropdown-content">
لینک 1
لینک 2
لینک 3
</div>
<div class="dropdown">
<a class="dropbtn">تماس</a>
<div class="dropdown-content">
لینک 1
لینک 2
لینک 3
</div>
</div>
</div>
I expect that when I hover on each one it's child dropdown content appeared but just one is appearing.
Your markup was incorrect. Also, your container dropdown need to have relative positioning.
Try this;
.dropbtn {
color: black;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #EFEFEF;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-top: 50px;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block !important;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
<div class="topnav">
<div class="dropdown">
<a class="dropbtn">چرا ما ؟</a>
<div class="dropdown-content">
لینک 1
لینک 2
لینک 3
</div>
</div>
<div class="dropdown">
<a class="dropbtn">تماس</a>
<div class="dropdown-content">
لینک 1
لینک 2
لینک 3
</div>
</div>
</div>
In Internet Explorer 11, the blinking text cursor inside an input field containing some typed-in text remains visible when a dropdown menu toggles open over the input field. I expect the cursor to be obscured when it's behind the menu like in Chrome/Firefox/Safari.
I found this issue when I entered random text in the input field and then (without clicking out of the input field) hovered over the dropdown button to prompt the dropdown menu to toggle open over the input field. I've tried adjusting the input field's z-index, but have not been able to get that cursor to go away.
How can I get that cursor to stay hidden for IE11?
Screenshot:
Snippet:
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<br>
<hr>
<br>
<form action="/action_page.php">
First name: <input type="text" name="FirstName"><br>
<input type="submit" value="Submit">
</form>
Apparently, the cursor is painted over the window surface in IE. All you can do is trigger blur() on the activeElement on mouseenter on .dropbtn:
document.querySelector('.dropbtn').addEventListener('mouseenter', function(){
document.activeElement.blur();
})
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<br>
<hr>
<br>
<form action="/action_page.php">
First name: <input type="text" name="FirstName"><br>
<input type="submit" value="Submit">
</form>
newbie coder here again, please have a look at my code, i watched a video online showing how to do a drop down menu, however; mine is all over the place when i hover over "Gallery".
I followed the tutorial well so it should work, however; i reckon the issue is with my CSS, but not sure what has caused this problem. Please advise.
http://aasunm01.wdd1516.bbkweb.org/Assignment%201/LPhotography.html
i do not see any drop down html code on your site anyway there is one
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>
Under each "Something" there should be two submenus next to each other.
My HTML so far.
<!DOCTYPE html>
<html>
<head>
<style>
#whatever div {
float:left;
width: 100%;
}
#test {
width:30%;
display:inline-block;
}
.dropdown {
position:relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div id="whatever">
<span id="test">Something</span>
<div class="dropdown">
<button class="dropbtn">ULL</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<span id="test">Something</span>
<span id="test">Something</span>
</div>
</body>
</html>
So basically, as you can see, I need to add another submenu next ULL and I need to do the same under Something title.
(Last Edition)
Notes:
write 0 instead of 0px
open body tag after closed head tag
close div tag
set position for other ull buttons
Here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
#whatever div {
float: left;
width: 100%;
}
.test {
width: 30%;
display: inline-block;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<body>
<div id="whatever">
<span class="test">Something</span>
<div class="dropdown">
<button class="dropbtn">ULL</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn" style="position: absolute;top: 26px;left: 50px;">ULL</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<span class="test">Something</span>
<div class="dropdown">
<button class="dropbtn" style="position: absolute;top: 26px;left: 410px;">ULL</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn" style="position: absolute;top: 26px;left: 450px;">ULL</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<span class="test">Something</span>
<div class="dropdown">
<button class="dropbtn" style="position: absolute;top: 26px;left: 820px;">ULL</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn" style="position: absolute;top: 26px;left: 860px;">ULL</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</body>
</html>