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>
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
Ok, so here we go again...
The elements in my sub-menu keep moving when I hover over them. I can't seem to find anything on this issue. I've asked this question before for my nav bar but the answer I received- (Have the same padding for the a tags and put a border around them- but have it transparent) does not work with the sub-menu. I've tried to play with the padding as well with no luck.
Another thing...(I apologize for all questions, I just hate asking on here.. Some can be condescending) I had assign a class to each element (or list item) of the nav bar because when I attempted to put a border around them, each of the sub-menu elements also inherited the border as well. Is the a "cleaner" way to do it? I tried the :not() tag but I can't seem to get that to work either.
Lastly, I ask questions on this site as a last option. I am a newbie programmer/web designer who is looking to network and would like to connect with people who are more experienced before I get banned from asking a question that someone else sees as futile. If this last request is against the terms of service please let me know - I will delete it.
HTML
/* Style The Dropdown Button */
.dropbtn {
background-color: transparent;
font-family: 'Homemade Apple',cursive;
color: pink;
padding: 4px;
font-size: 16px;
cursor: pointer;
border: 3px solid pink;
border-radius: 16px;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #DDDDEE;
border: 3px solid pink;
border-top: hidden !important;
border-radius: 16px;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #B76E79;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {color: #B76E79}
/* 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 {
color: #B76E79;
background-color: #DDDDEE;
}
</style>
</head>
<body>
<h1>Debi's Babies</h1>
<h2>A Mother's collection of Snow Babies</h2>
<ul class = "nav">
<li class= "one">Home</li>
<li class= "two">Original Figurines</li>
<li class= "three">Villages</li>
<div class = "dropdown">
<a href= "guest_collect.html"<button class="dropbtn">The Guest
Collection</button></a>
<div class = "dropdown-content">
<li class="c">Dr. Seuss</li>
<li class="d">Rudolph and Friends</li>
<li class="e">Santa</li>
<li class="f">Wizard of Oz</li>
</div>
</div>
</li>
<li class= "four">Oranments</li>
<li class= "five">Snow Bunnies</li>
</ul>
</body>
</html>
CSS
/*navbar*/
.nav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
display: block;
position: relative;}
.nav li{
display: inline-block;
}
.nav a {
display: inline-block;
color: pink;
font-family: 'Homemade Apple', cursive;
padding: 6px;}
.nav li a:hover {
color: #B76E79;
padding: 8px;
z-index: 1;
}
.one,.two,.three,.four,.five {
border: 3px solid pink;
border-radius: 16px;}
.one:hover,.two:hover,.three:hover,.four:hover,.five:hover {
background: #DDDDEE;
}
As far as I can tell, the 'positioning' change you're talking about is coming from the additional padding on hover. This is specifically coming from the declaration:
.nav li a:hover {
padding: 8px;
}
Removing this solves the problem. However, in addition to this, your <a> tag is missing the >, and you have one </li> too many.
Both of those have also been corrected in the following example:
/* Style The Dropdown Button */
.dropbtn {
background-color: transparent;
font-family: 'Homemade Apple', cursive;
color: pink;
padding: 4px;
font-size: 16px;
cursor: pointer;
border: 3px solid pink;
border-radius: 16px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #DDDDEE;
border: 3px solid pink;
border-top: hidden !important;
border-radius: 16px;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #B76E79;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
color: #B76E79
}
/* 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 {
color: #B76E79;
background-color: #DDDDEE;
}
/*navbar*/
.nav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
display: block;
position: relative;
}
.nav li {
display: inline-block;
}
.nav a {
display: inline-block;
color: pink;
font-family: 'Homemade Apple', cursive;
padding: 6px;
}
.nav li a:hover {
color: #B76E79;
/*padding: 8px;*/
z-index: 1;
}
.one,
.two,
.three,
.four,
.five {
border: 3px solid pink;
border-radius: 16px;
}
.one:hover,
.two:hover,
.three:hover,
.four:hover,
.five:hover {
background: #DDDDEE;
}
<h1>Debi's Babies</h1>
<h2>A Mother's collection of Snow Babies</h2>
<ul class="nav">
<li class="one">Home</li>
<li class="two">Original Figurines</li>
<li class="three">Villages</li>
<div class="dropdown">
<a href="guest_collect.html"><button class="dropbtn">The Guest
Collection</button></a>
<div class="dropdown-content">
<li class="c">Dr. Seuss</li>
<li class="d">Rudolph and Friends</li>
<li class="e">Santa</li>
<li class="f">Wizard of Oz</li>
</div>
</div>
<li class="four">Oranments</li>
<li class="five">Snow Bunnies</li>
</ul>
As for your second question, you don't have to assign a class to each list item element. You can target the li directly. Depending on exactly which <li> elements you're trying to target, you can increase the specificity.
The problem for you is that .nav li won't work, as that will target any <li> element that is a child of .nav. In order to only target the direct children (excluding grandchildren), you need to make use the child combinator (>), with .nav > li.
Finally, I'm afraid that StackOverflow is a question-answer website, not a place to connect with other developers. If you're looking to connect to other programmers, there's no better place than StackOverflow Chat.
Hope this helps! :)
It is not correct use of div in ul, ul accepts li as children only.
See this: More
so, use li instead of div like this:
<li class = "dropdown">
<a href= "guest_collect.html">The Guest
Collection</a>
<ul class = "dropdown-content">
<li class="c">Dr. Seuss</li>
<li class="d">Rudolph and Friends</li>
<li class="e">Santa</li>
<li class="f">Wizard of Oz</li>
</ul>
</li>
And insert this css code:
li {
position: relative;
}
li:hover ul {
display: block;
padding: 0;
z-index: 999;
}
li ul {
position: absolute;
display: none;
list-style: none;
background-color: #DDDDEE;
border-radius: 5px;
top: 42px;
}
.nav li ul li {
width: 100%;
}
And other css codes:see code snippet
.nav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
display: block;
position: relative;
margin: 0 auto;
width: 100%;
}
.nav li{
display: inline-block;
}
.nav a {
display: block;
color: pink;
font-family: 'Homemade Apple', cursive;
padding: 6px;}
.nav li a:hover {
color: #B76E79;
padding: 8px;
z-index: 1;
}
.one,.two,.three,.four,.five,.dropdown {
border: 3px solid pink;
border-radius: 16px;}
.one:hover,.two:hover,.three:hover,.four:hover,.five:hover,.dropdown:hover {
background: #DDDDEE;
}
li {
position: relative;
}
li:hover ul {
display: block;
padding: 0;
z-index: 999;
}
li ul {
position: absolute;
display: none;
list-style: none;
background-color: #DDDDEE;
border-radius: 5px;
top: 42px;
}
.nav li ul li {
width: 100%;
}
<h1>Debi's Babies</h1>
<h2>A Mother's collection of Snow Babies</h2>
<ul class = "nav">
<li class= "one">Home</li>
<li class= "two">Original Figurines</li>
<li class= "three">Villages</li>
<li class = "dropdown">
<a href= "guest_collect.html">The Guest
Collection</a>
<ul class = "dropdown-content">
<li class="c">Dr. Seuss</li>
<li class="d">Rudolph and Friends</li>
<li class="e">Santa</li>
<li class="f">Wizard of Oz</li>
</ul>
</li>
</div>
</li>
<li class= "four">Oranments</li>
<li class= "five">Snow Bunnies</li>
</ul>
I am trying to make a menu which contains one menu-item with a dropdown, however I can't seem to get it quite right.
I started off with combining my existing menu bar to a piece of code for a dropdown, I have managed to get de drop down item in the menu bar, but I don't know how to get the menu bar back to the top again and it still has a blank on the left.
There is also an extra empty item in my drop down menu and I don't know how to get rid off it?
Can someone please help me I feel like I am overlooking something
.menu-bar {
position: fixed;
width: 100vw;
background-color: #134c95;
color: white;
display: flex;
flex-direction: row;
justify-content: center;
opacity: 0.8;
}
.menu-item {
padding: 10px;
cursor: default;
font-size: 15pt;
margin-left: 15px;
margin-right: 15px;
}
.menu-item:hover,
a:hover {
background-color: white;
cursor: pointer;
color: 234c95;
}
.menu-bar a {
color: white;
}
.menu-bar a:visited {
color: white;
}
.menu-bar a:link,
.menu-bar a:visited {
text-decoration: none;
}
/*
.menu-bar a:hover {
color: #134c95;
}
*/
/* Dropdown Button */
.dropbtn {
background-color: inherit;
color: white;
/* padding: 16px;*/
/* font-size: 16px;*/
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
/*
.dropdown {
position: fixed;
display: inline-block;
}
*/
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: white;
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: #234c95;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: 234c95;
color: white;
}
/* 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: white;
color: #234c95;
}
<div class="menu-bar">
<a href="instructiestest.html">
<div class="menu-item">Welkom</div>
</a>
<a href="instructie2.html">
<div class="menu-item">Aanmelden Portbase</div>
</a>
<a href="instructie3.html">
<div class="menu-item">De App</div>
</a>
<a href="testing.html">
<div class="dropdown">
<button class="dropbtn">
<div class="menu-item">Het team</div>
<div class="dropdown-content">
Google
Facebook
YouTube
</div>
</button>
</div>
</a>
</div>
Remove the a tag from your dropdown item, like below:
<div class="menu-bar">
<a href="instructiestest.html">
<div class="menu-item">Welkom</div>
</a>
<a href="instructie2.html">
<div class="menu-item">Aanmelden Portbase</div>
</a>
<a href="instructie3.html">
<div class="menu-item">De App</div>
</a>
<div class="dropdown">
<button class="dropbtn">
<div class="menu-item">Het team</div>
<div class="dropdown-content">
Google
Facebook
YouTube
</div>
</button>
</div>
</div>
Also, your .dropdown-content a:hover rule is missing a # in your background-color attribute:
.dropdown-content a:hover {
background-color: #234c95;
color: white;
}
Here is a working Fiddle
Something seems to have an extra margin or similar. Try to load the code, and check with the inspector. It'll show you the different spacing types in nice colours: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model
In all honesty, you might be better re structuring this menu completely. I don't mean to be harsh but the code isn't structured well enough and is a little confusing to work with.
Ive just tweaked your code a little to make it easier to work with. I'm not exactly sure what it is your trying to achieve but here is something for you to take a look at:
CSS
#menu-bar {
position: fixed;
width: 100vw;
background-color: #134c95;
padding: 15px;
}
#menu-bar ul {
list-style: none;
padding: 0;
margin: 0;
font-size: 22px;
font-family:sans-serif;
}
#menu-bar ul li {
margin-bottom: 10px;
width: 100%;
}
#menu-bar ul li a {
display: block;
padding: 10px;
color: #fff;
text-decoration: none;
}
#menu-bar ul li a:hover {
color: #134c95;
background-color: #fff;
}
#menu-bar ul li ul {
display: none;
}
#menu-bar ul li:hover ul {
display: block;
}
HTML
<nav id="menu-bar">
<ul>
<li>Welkom</li>
<li>Aanmelden Portbase</li>
<li>De App</li>
<li class="">Het team
<ul>
Google
Facebook
YouTube
</ul>
</li>
</ul>
</nav>
As you can see this is much easier to understand and follow. The ID of the nav element is all you need to style the child elements.
Hope that helps as a starting point!
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>