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.
Related
[i am new to website design, any help is appreciated]
This code is for having the dropdown button links appear in a list form, what i am trying to do is when you hover over the "More about Us", the links will show on the right side of the button
[HTML]
<div class ="Links">
<div class="dropdown">
<button class="dropbtn">More About Us</button>
<div class="dropdown-content">
Employees
What we do
FAQ
</div>
</body>
</html>
[CSS]
/* Dropdown Button */
.dropbtn {
background-color: brown;
color: white;
padding: 10px;
font-size: 40px;
border: outset;
font-family: Agency FB;
}
/* 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: #f1f1f1;
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;
}
/* 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: #B9DADC;}
OK, if now i understand what do you want you can solve this adding the position at the .dropdown-content.
.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;
left: 100%;
top:0;
}
/* Dropdown Button */
.dropbtn {
background-color: brown;
color: white;
padding: 10px;
font-size: 40px;
border: outset;
font-family: Agency FB;
}
/* 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: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
/*SET POSITION TO THE RIGHT AND TOP OF PARENT BOUNDARIES*/
left: 100%;
top:0;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
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: #B9DADC;}
<html>
<body>
<div class ="Links">
<div class="dropdown">
<button class="dropbtn">More About Us</button>
<div class="dropdown-content">
Employees
What we do
FAQ
</div>
</body>
</html>
I loose the fact that you want the link displayed all inline. To achieve this you have to set a fixed dimensione of .dropdown-content like :
width: 350px;
and the display of a element, like
display: inline-block;
/* Dropdown Button */
.dropbtn {
background-color: brown;
color: white;
padding: 10px;
font-size: 40px;
border: outset;
font-family: Agency FB;
}
/* 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: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
/*SET POSITION TO THE RIGHT AND TOP OF PARENT BOUNDARIES*/
left: 100%;
top:0;
width:350px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
display:inline-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: #B9DADC;}
<html>
<body>
<div class ="Links">
<div class="dropdown">
<button class="dropbtn">More About Us</button>
<div class="dropdown-content">
Employees
What we do
FAQ
</div>
</body>
</html>
This is not sure the best solution but at the moment it is the only solution that comes to my mind.
Maybe you can try playing with
display: flex;
adding it to the .dropdown-content and then working on child element
I need to create menu like shown in this screenshot:
So as you can, the cursor hover opens large sub menu with two sub sections. Will be glad for any similar examples to my issues. Thanks for your answers!
Here is a very simple example to get you started. It needs more styling of course and more content, but this should give you all the tools to have a dropdown on hover in your menu
HTML:
<header>
<a href="/url">
Hover to see dropdown
</a>
<div>
<section></section>
<section></section>
</div>
</header>
CSS:
header {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 50px;
}
header > a {
padding: 0 2em;
height: 50px;
display: grid;
place-content: center;
}
header > div {
display: hidden;
background-color: white;
}
a:hover + div {
display: inherit;
}
Something like this should work. It utilizes the :hover attribute in the navbar tab 'Dropdown' to reveal more content (in this case it'll be just some links).
HTML:
<div class="navbar">
<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>
CSS:
.navbar {
overflow: hidden;
background-color: #333;
}
.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;
}
You can find more information on the W3School website for more!
There is this W3schools example of dropdown in the top navigation bar. In the CSS section of the code, the navbar has property overflow set to hidden. In the HTML section of the code, the dropdown section is a part of the navbar section.
Now as I hover over the dropdown button, the dropdown-content(hidden section) becomes visible(changed the property, display, from none to block) and there is an overflow as the dropdown-content overflows from the navbar section (I even checked using inspect elements the height of the navbar does not change when the dropdown-content is visible).
Now the question is since the overflow property of navbar is hidden, why is the dropdown-content is visible( it is an overflow)? And why the height of navbar not changing (height of navbar is not specified in the styling) and an additional division of significant height got added into it?
Here is the code from the example:
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
display: block;
}
.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;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
Well a few things, the .down-content class is set to position: absolute; which essentially ignores overflow: hidden; as well as the height of the navbar and essentially most other things. Also the navbar does not have a specified height so there really isn't anything limiting it's size.
In this example below I removed position: absolute; from the .down-content class and also added a height of 75px to the .navbar class. Check it out
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}
.navbar {
overflow: hidden;
background-color: #333;
height: 75px;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
display: block;
}
.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;
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;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
The dropdown is not considered overflow here. Overflow occurs when the content of an element is too big to fit its specified area. The nav bar does not have a fixed height - the height is determined by its content (including padding). Therefore the dropdown does not "overflow", as the navbar is "flexible" so to speak.
Hi I have made a web page with a navigation bar. There is mouse hover drop down menu on a navigation bar. I have take the code for this navigation bar from w3school web site. The code is
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
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;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div style="display:flex">
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<div class="dropdown-content">
List 4
List 5
List 6
</div>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
Now the problem is that I want to add second column in front of first column in the drop down list.For this I add second div but all the stuff of the second div appears in place of first div and hides the content of first div. Please tell me that how can I place the second div in next to first div so that they appear parallel to each other.Please answer this question. I will be very thank full to you.
You can place it by wrapping the .dropdown-content div with a flexbox.
I have added .wrapper a class you can change it to whatever you like.
Here is the code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.wrapper {
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;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .wrapper{
display: flex;
justify-content: center;
}
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="wrapper">
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<div class="dropdown-content">
demo
demo
demo
</div>
</div>
</li>
</ul>
P.S. In the same way you can create multiple, side by side divs using flexbox. You can learn about flex here
i have a question for you guys , i have made a navbar for my website , but i can't cope with the dropdown menu . The problem is that when I want all the links to be in the middle of the navbar , but when i hover over the navigation dropdonw menu , it won't stay open on hover. I know i can fix this by adding li float:left instead of li display:inline, but then all the links go to the left , so my question is: is there a way in which all my links could be centered in the middle of my navbar and my navigation dropdonw menu could stay open on hover ? This is my code:
nav {
font-size:75%;
text-align: center;
}
ul {
width:100%;
list-style-type: none;
margin-left: -8px;
padding: 0px;
overflow: hidden;
background-color: black;
}
li {
display: inline;
}
li a {
display: inline-block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
color:darkgrey;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 134px;
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;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<ul>
<li>Начало</li>
<li class="dropdown" >
За фирмата
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li>За собствениците</li>
<li>Продукти</li>
<li>Поръчки</li>
<li>Мнения</li>
</ul>
</nav>
</body>
</html>
I actually have no idea how does it work in this online editor , but it does not work for me when i do it ! Please halppp !