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
Related
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've made the basic navbar but I'm having issues aligning everything and making the background opaque, so that the text and image come up brighter as shown in the [picture][1]. The [fiddle][2] is attached.
CODE SNIPPET
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav ul > li {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
.topnav a {
text-decoration: none;
font-size: 17px;
color: white;
display: block;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* dropdown menus hidden initially */
.topnav ul > li > ul {
display: none;
width: 200px;
padding: 0;
position: absolute;
background-color: #f76c38;
}
.topnav ul > li > ul > li {
float: left;
clear: left;
display: block;
text-align: left;
}
You may try it:
$(document).ready(function() {
$(".dropdown > a").click(function() {
$(this).siblings('.dropdown-content').slideToggle(200);
});
});
#font-face {
font-family: AvantGarde Demi;
src: url(AvantGarde Demi.woff);
}
#font-face {
font-family: AvantGarde;
src: url(AvantGarde.woff);
}
#font-face {
font-family: ITC Avant Garde Gothic;
src: url(ITC Avant Garde Gothic.woff);
}
/******************For Top Nav****************************/
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav ul > li {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
.topnav a {
text-decoration: none;
font-size: 17px;
color: white;
display: block;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* dropdown menus hidden initially */
.topnav ul > li > ul {
display: none;
width: 200px;
padding: 0;
position: absolute;
background-color: #f76c38;
}
.topnav ul > li > ul > li {
float: left;
clear: left;
display: block;
text-align: left;
}
/******************For Top Nav****************************/
li.dropdown{
margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav">
<nav>
<ul>
<li><img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png"></li>
<li class="dropdown">
<b>PROGRAMS</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>INDIVIDUAL</i>
</li>
<li><i>CORPORATE</i>
</li>
</ul>
</li>
<li class="dropdown">
<b>WORLD OF NORTHMAN</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>BE EXTRODINARY</i>
</li>
<li><i>RISK & REWARD</i>
</li>
<li><i>BLOG</i>
</li>
<li><i>OUR STORY</i>
</li>
</ul>
</li>
</ul>
</nav>
</div>
Please comment below, if you have some trouble with it. Or mark the CHECK mark if it is the solution :)
UPDATE
Here is the output
You can set it using flexbox. just update your CSS with following.
.topnav {
overflow: hidden;
background-color: #333;
display: flex;
justify-content: space-between;
align-items: center;
}
for updated fiddle click here
Display both elements as inline-block (or float:left) should do it:
.topnav > img, .topnav > nav {
display:inline-block;
vertical-align:middle;
}
You will also need to adjust the height on the nav menu items (either with line-height or padding top/bottom, or both)
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>
I've been trying to center the items within the navigation but no such luck. Every single solution turns my navigation bar from this: horizontal navigation bar to this: vertical navigation bar.
Any help would be greatly appreciated!
HTML with CSS code:
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<html>
<head>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
Just remove the float from the li and make the inline-block
li {
/* float: left; */
display:inline-block;
}
The first rule of centering is..."Don't use floats"
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
I removed your css on li tag with float and changed it to display and width:
li {
display: -webkit-inline-box;
width: 60px;
}
https://i.stack.imgur.com/LbYd4.png`
I hope this helped you #C. Lagos
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>