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>
Related
Drop down menu with img-dropdown-content display: none; not working, might be overridden by something - html and css only
I have tried using visibility: hidden; with and without !important and also display: none; with !important to override possible attributes of the div from the html code but it didn't work. Please note that I have just started coding in html and css so please bear with me if I have some formatting problems :). This is also not meant to be a serious public webpage, but instead I just have it running locally on my own Windows PC using python -m http.server in the Windows PowerShell so I can test the code I wrote and learn a bit about website design.
.dropbtn {
border: black 1px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
display: none !important;
visibility: hidden !important;
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;
}
<header>
<h1 style='font-family:Coda;' class='title'>Content Distributor</h1>
</header>
<body>
<div class="dropdown">
<button class="dropbtn"><img src=images/menu.ico></button>
<div class="dropdown-content">
Stores
Link 2
Link 3
</div>
</div>
<!-- Stores</button> -->
This is a working snippet:
.dropbtn {
border: black 1px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
display: none;
background-color: #f1f1f1;
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: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header>
<h1 style='font-family:Coda;' class='title'>Content Distributor</h1>
</header>
<div class="dropdown">
<button class="dropbtn"><img src=images/menu.ico></button>
<div class="dropdown-content">
Stores
Link 2
Link 3
</div>
</div>
<!-- Stores</button> -->
And also note that you are using .dropdown:hover .dropdown-content, by using this selector the .dropdown-content will become visible when you hover over .dropdown div, But if you want to show the dropdown when the .dropbtn is hovered change it to this: .dropbtn:hover .dropdown-content
I made an dropdown navbar like this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: black;
display: block;
overflow: hidden;
font-size: 16px;
color: white;
padding: 14px 16px;
margin: auto;
max-width:100px;
}
.dropbtn:hover {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #c9c9c9;
min-width: 100px;
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;
}
.dropbtn:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropbtn">Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
but when I open this website in Safari on Iphone I cant use the dropdown it doesnt work. However if I make .dropbtn a button instead of div it works but now validator doesnt except button to have div and a as child. How can I change the code to make the website valid and can be used on Safari at the same time?
While buttons cannot have div or anchor elements as children, they can have span elements.
The following snippet passed W3C validation. Is it a hack?
Possibly, given button elements are not supposed to have interactive content descendants. See e.g. Is it semantically incorrect to put a <div> or <span> inside of a <button>? for discussion and references on this.
On the other hand it gets us round a problem on touchscreens with minimal alteration and minimal JS.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: black;
display: block;
overflow: hidden;
font-size: 16px;
color: white;
padding: 14px 16px;
margin: auto;
max-width:100px;
}
.dropbtn:hover {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #c9c9c9;
min-width: 100px;
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;
}
.dropbtn:hover .dropdown-content, button span {
display: block;
}
</style>
</head>
<body>
<button class="dropbtn">Dropdown
<span class="dropdown-content">
<span onclick="window.location = 'Wherever';">Link 1</span>
<span onclick="" >Link 2</span>
<span onclick= "">Link 3</span>
</span>
</button>
<div id='id1'>id1</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
I'm trying to develop a website using django and I'd like to add a navigation bar dropdown menu, but for some reason, it keeps showing up as horizontal, instead of vertical.
I'm following the tutorial that W3 Schools has on their website https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button
Despite all of my efforts it still doesn't work, I've tried to look at other questions, but most of them seem to be using a different method using lists, or their using a framework like react.
I moved my project over to this jsfiddle.net and that just seemed to make the problem even worse, because now my second list item in the dropdown doesn't show up at all.
Here is the code I'm working with http://jsfiddle.net/iggy12345/ao04gfne/9/
Here is the code pasted below:
My html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="header">
<a class="active" href="{% url 'home' %}">Home</a>
<div class="dropdown">
Profile
<div class="dropdown-content">
Logout
Customize Profile
</div>
</div>
</div>
</body>
</html>
My css file:
.dropdown {
float: left;
height: 55px;
display: inline-block
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: relative;
top: 55px;
background-color: #f9f9f9;
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;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.header {
background-color: #350752;
overflow-x: hidden;
overflow-y: visible;
}
.header > a, .dropdown > a {
float: left;
color: #dcb0f7;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.header a:hover {
background-color: #15bccf;
color: white;
}
.header a:active {
background-color: #c7860e
color: white;
}
Edit
I remodelled my css to look like Chaska's answer, but it still doesn't work, I had to make a few tweaks to get it to keep its original look, but now it adds a scrollbar whenever I hover over profile.
Basically, according to the w3 tutorial, the dropdown list should show up under the profile box, but instead, whenever I try to do it, the entries just sit over the profile button, covering it up, and then on top of that, they continue horizontally instead of vertically
Some revises applied to the css. Please read the relevant comment:
.dropdown {
float: left;
display: inline-block;
height: 55px; /* overflow: hidden will hide the dropdown menu, use fixed height instead */
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
top: 55px; /* must specify the top position */
background-color: #f9f9f9;
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;
text-align: left;
}
.header {
background-color: #350752;
overflow: visible; /* overflow: hidden will hide the dropdown menu */
}
.header > a, /* use > to select the direct child <a> instead of all of <a> child */
.dropdown > a {
float: left;
color: #dcb0f7;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.header a:hover {
background-color: #15bccf;
color: white;
}
.header a:active {
background-color: #c7860e;
color: white;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="header">
<a class="active" href="{% url 'home' %}">Home</a>
<div class="dropdown">
Profile
<div class="dropdown-content">
Logout
Customize Profile
</div>
</div>
</div>
</body>
</html>
.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;
}
.header{
background-color: #350752;
}
.header a:hover {
background-color: #15bccf;
color: white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="header">
<a class="active" href="{% url 'home' %}">Home</a>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div>
</body>
</html>
Try with this code with your CSS.
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 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>