I have the following code, and it works fine, except for the "Contact" link that needs to be the last link. However, the dropdown always seems to be placed last?
IT is basically the navbar at http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar that I want to create, with 2 additional links after the dropdown link.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
float:right;
}
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: #111;
}
.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);
}
.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;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<div class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<li>Products</li>
<li>Contact</li>
</ul>
</body>
</html>
It does not render correctly, i'm not sure how to change the css to accomplish this. Or perhaps there is another way?
Thanks
Try changing the tag of dropdown from div to li. Probably the browser renders all li first and then the div.
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
Try this
.dropdown {
display: inline-block;
float:left
}
<li>
<div class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
Put the <div> into an <li> try with this.
For you reference, here are 2 sites with examples.
Example 1
Example 2
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
float: right;
}
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: #111;
}
.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);
}
.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;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>
<div class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
<li>Products</li>
<li>Contact</li>
</ul>
</body>
</html>
Related
Please don't be rude, im new on here and dont know much about this site, if you do answer my issue, it would help if you leave a "explanation" of what you changed, added, etc. and what it would do
I want to have a menu that has a dropdown, but inside the dropdown will be another dropdown menu [Image of what I'm talking about, (red being the area of the dropdown menu that's inside the other dropdown menu)]
codes given below first is style.css, second is index.html
body
{
font-family: sans-serif;
background: #FFB6C1;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #FFC0CB;
}
label.logo
{
color: white;
font-weight: bold;
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
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: #ffaebd;
}
li.dropdown
{
display: inline-block;
}
li.dropdown a, .dropbtn
{
color: white;
}
.dropdown-content
{
display: none;
position: absolute;
background: #201e2a;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
}
.dropdown-content a
{
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown a:hover
{
background: #ffaebd;
}
.dropdown:hover .dropdown-content
{
display: block;
}
/* next */
body
{
font-family: sans-serif;
background: #FFB6C1;
}
/* FFA07A */
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #FFC0CB;
}
label.logo
{
color: white;
font-weight: bold;
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li
{
float: left;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<label class="logo">Test Page</label>
<li>Home</li>
<li class="dropdown">
Dropdown Menu
<div class="dropdown-content">
Link One
Link Two
Sub Dropdown
<!-- (set to this instead of a dropdown just for showcase/ss reasons) -->
</div>
</li>
</ul>
</body>
</html>
You can do it by putting your exact code of dropdown inside your sub dropdown
<li class="dropdown">
<a id="drpbtn" class="dropbtn">Dropdown Menu</a>
<div aria-label="drpbtn" class="dropdown-content">
Link One
Link Two
Sub dropdown btn
<div aria-label="drpbtn2" class="sub-dropdown-content">
Link One
Link Two
</div>
</div>
</li>
here is an example of how you can do this and I try to keep it as simple as possible to understand how it works :
ul {
margin: 0;
padding: 0;
display: none;
}
.menu {
display: block;
}
li {
padding: 16px;
}
li:hover > ul {
display: block;
}
<ul class="menu">
<li>
Hover me !
<ul>
<li>Menu Item</li>
<li>
Menu Item
<ul>
<li>Menu Item</li>
<li>
Menu Item
</li>
</ul>
</li>
</ul>
</li>
</ul>
codesandbox: https://codesandbox.io/s/vibrant-grass-1byw0b
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 went through W3Schools to attempt understanding the coding structure of dropdown menus. When opening the page and hovering your cursor to the 'Merch' text it is supposed to display the dropdown menu. For some reason, however, it is not showing. Please amplify for me and show me where I went wrong.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
overflow: hidden;
background-color: dimgray;
list-style-type: none;
}
li {
float: left;
}
li a {
text-decoration: none;
font-family: sans-serif;
display: inline-block;
color: white;
padding: 12px;
}
li a:hover {
background-color: gray;
}
#dropdown {
position: absolute;
display: none;
background-color: darkgray;
min-width: 140px;
}
#dropdown a {
color: white;
text-align: left;
padding: 10px;
display: block;
text-align: left;
}
#dropdown a:hover {
background-color: gray;
}
#dropbtn:hover #dropdown {
display: block;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Merch
<div id="dropdown">
Shirts
Pants
</div>
</li>
<li>About Us</li>
</ul>
</body>
</html>
You need this change in CSS
#dropbtn:hover + #dropdown {
display: block;
}
Dropdown is not a child, it is next element in your current html setup, so, this selector will find it.
Or, better, place id on li element (parent):
<ul>
<li>Home</li>
<li id="dropbtn"><a href="#" >Merch</a>
<div id="dropdown">
Shirts
Pants
</div>
</li>
<li>About Us</li>
</ul>
#dropbtn:hover #dropdown {
display: block;
}
Demo: https://jsfiddle.net/3bfgzf37/
If you use first solution, dropdown dissapears fast, and behave strange...
Explanation: hover on a is not hover on dropdown (a is sibling), hover on li element, is, in the same time, hover on dropdown (parent-child, dropdown is 'inside' li - that produces consistent, desired, behavior).
Second one is better.
ul {
margin: 0;
overflow: hidden;
background-color: dimgray;
list-style-type: none;
}
li {
float: left;
}
li a {
text-decoration: none;
font-family: sans-serif;
display: inline-block;
color: white;
padding: 12px;
}
li a:hover {
background-color: gray;
}
#dropdown{
position: absolute;
display:none;
background-color: darkgray;
min-width: 140px;
}
#dropdown a {
color: white;
text-align: left;
padding: 10px;
display: block;
text-align: left;
}
#dropdown a:hover {
background-color: gray;
}
#dropbtn:hover #dropdown {
display: block;
}
<ul>
<li>Home</li>
<li id="dropbtn"><a href="#" >Merch</a>
<div id="dropdown">
Shirts
Pants
</div>
</li>
<li>About Us</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
Your style tag should be outside the head tag. Plus, the dropdown in this code works now. Just do some slight changes to the colors to your desire. :)
<html>
<head></head>
<style>
ul {
margin: 0;
overflow: hidden;
background-color: dimgray;
list-style-type: none;
}
li {
float: left;
}
li a {
text-decoration: none;
font-family: sans-serif;
display: inline-block;
color: white;
padding: 12px;
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* 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: #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: gray;
}
</style>
<body>
<ul>
<li>Home</li>
<li>
<div class="dropdown">
<button class="dropbtn">Merch</button>
<div class="dropdown-content">
Shirts
Pants
</div>
</div>
</li>
<li>About Us</li>
</ul>
</body>
</html>
this is my first post. Hope I'm specific enough to get some help :)
I created a dropdown menu in my navigation bar for my clanwebsite. But I can't change the css in a way that it would be the same as my other titles from the navigation bar.
Also when I go over it with my cursor, the login button is being moved. And the css of my navigation is different when I go to the Main team page in the dropdown menu.
Thanks!
NOTE don't mind the php. Still working on that.
my HTML of the home page
<html>
<head>
<link rel="stylesheet" href="Opmaak.css">
<title>WKG</title>
</head>
<body>
<ul>
<li>Home</li>
<li>Line-ups</li>
<li><div class="dropdown">
<button class="dropbtn">Teams</button>
<div class="dropdown-content">
Main Team
Team 2
</div>
<li>Matchen</li>
<li>About</li>
<li>Games</li>
</ul>
</body>
</html
my CSS
p {
font-size: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: visible;
background-color: #444;
}
li {
float: left;
box-shadow: 15px 15px 50px #888888;
font-size: 20px;
}
li a {
display: block;
color: darkgray;
text-align: center;
padding: 20px 50px;
text-decoration: inherit;
box-shadow: 3px 3px 3px crimson;
border-color: crimson;
position: relative;
display: inline-block;
}
.dropdown-content a {
display: block;
background-color: slategray;
}
.dropdown-content {
display: none;
position: inherit;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn {
overflow: hidden;
background-color: slategray;
color: darkgray;
text-align: center;
padding: 20px 50px;
text-decoration: inherit;
box-shadow: 3px 3px 3px crimson;
border-color: crimson;
font-size: 20px;
position: relative;
display: inline-block;
}
. dropbtn:hover {
background-color: crimson;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: crimson;
padding: 20px 50px;
}
and my Main Team page
<html>
<head>
<link rel="stylesheet" href="Opmaak.css">
<title>WKG</title>
</head>
<body>
<ul>
<li>Home</li>
<li>Line-ups</li>
<div class="dropdown">
<button class="dropbtn">Teams</button>
<div class="dropdown-content">
Main Team
Team 2
</div>
<li>Matchen</li>
<li>About</li>
<li>Games</li>
</ul>
</body>
</html
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 !