I'm trying to learn to build a drop-down menu for a navigation bar. I want a main element that says Music, then 2 sub menus called Songs, and Albums, then I'd like a list of links(songs, albums) to appear on hover. When I hover over my main element however, all sub content of my elements are also displaying, and I'd like to stop this from happening, until the sub-menu(Albums, or Songs) is hovered over.
I've tried flipping some things around in CSS, tried every combo I can come up with. I'm assuming I'm missing something.
HTML
nav ul ul li li {
display: none;
background-color: yellow;
}
nav ul ul:hover li li {
display: block;
}
nav ul ul li {
display: none;
background-color: red;
}
nav ul {
position: relative;
background-color: pink;
}
nav ul :hover li {
display: block;
}
<div class="wrapper">
<nav>
<ul>
<li>Music
<ul>
<li>Songs
<ul>
<li> Blue slide park</li>
<li>Albums
<ul>
<li>KIDS</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
****EDIT*****
I fixed my HTML, please just focus on CSS.
You use child combinator > to select the immediate children of the element.
nav > ul ul{
display: none;
}
nav > ul li:hover > ul{
display: block;
}
<header>
<H2>My Web Page</H2>
</header>
<body>
<div class="wrapper">
<nav>
<ul>
<li>Music
<ul>
<li>Songs
<ul>
<li>Blue side parks</li>
<li>Albums</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
?
nav ul ul li li {
display: none;
background-color: yellow;
}
nav ul ul:hover li li {
display: block;
}
nav ul ul li {
display: none;
background-color: red;
}
nav ul {
position: relative;
background-color: pink;
}
nav ul :hover li {
display: block;
}
nav ul li ul li ul{
display:none;
}
nav ul li ul li:hover ul{
display:block;
}
nav ul li ul li ul li .x2{
display:none;
}
.x1:hover .x2{
display:block;
}
<header>
<H2>My Web Page</H2>
</header>
<body>
<div class="wrapper">
<nav>
<ul>
<li>Music
<ul>
<li>Songs
<ul>
<li><a
href="#"> Blue slide park</li>
<li class="x1">Albums
<ul class="x2">
<li><a
href="#">KIDS</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
Related
I have created a recursive menu in angular using ngtemplates.
I want to make menu which displays the sub menu on hover. However, I am having trouble when I exit hover of the main menu, the sub menu disappears.
Here is a sample code structure I was generating.
a+ul {
display: none;
}
a:hover+ul {
display: block
}
<ul>
<li>
<a>a</a>
<ul>
<li>
<a>b</a>
<ul>
<li><a>c</a></li>
</ul>
</li>
</ul>
</li>
</ul>
The problem here is that once you start hovering over the c Text you no longer hover over the a. So a:hover + ul isn't valid anymore and the ul disappears. To solve this you can put the ul inside a wrapper and adapt the selectors and html like this:
.menu-wrapper>ul {
display: none;
}
.menu-wrapper:hover>ul {
display: block
}
<ul>
<li>
<div class="menu-wrapper">
<a>a</a>
<ul>
<li>
<div class="menu-wrapper">
<a>a</a>
<ul>
<li><a>c</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
Try the below piece of code for the expected output:
a+ul {
display: none;
}
a:hover+ul {
display: block
}
#menu a {
display: block;
text-decoration: none;
}
#menu:hover ul,
#menu:hover ul li:hover ul,
#menu:hover ul li:hover ul li:hover ul {
display: block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="menu">
<ul>
<li>
a
<ul>
<li>
b
<ul>
<li>c</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
nav li {
cursor: pointer;
position: relative;
width: 8vw;
}
nav > ul > li {
position: relative;
display: block;
}
nav > ul > li ul {
position: absolute;
display: none;
}
nav > ul li:hover > ul {
position: absolute;
display: block;
}
nav > ul > li > ul li:hover > ul {
position: absolute;
display: block;
}
</style>
</head>
<body>
<nav>
<ul >
<li>
<a>a</a>
<ul>
<li><a>b</a>
<ul>
<li><a>c</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
I can't get the hover in my menubar to work. The html and css is below. I can get the display: none to work by itself. I can get the hover to work by itself. They just won't work together. Not sure what I am doing wrong.
This is the html:
<nav>
<ul>
<li><img class="mainbar"src="images/logov6v2.png" width="175" height="150" padding="0" text-align="center" vertical-align="text-top">
<li id="menudrop" class="rightbar">Menu</li>
<ul data-toggle="">
<li>Account Settings</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</li>
</ul>
</nav>
This is the css:
#menudrop.rightbar ul li a {
color: red;
display: block;
text-decoration: none;
}
nav ul li ul {
display: none ;
background: #5f6975;
position: relative;
top:100%;
}
nav ul li ul:hover li {
display: block;
}
Besides fixing some missing closing tags the main adjustment is to change this
nav ul li ul:hover li {
display: block;
}
into that
nav ul li:hover ul {
display: block;
}
As the nav ul li ul ist set to display:none; it's not possible to set a hover on it.
Adjusted in Fiddle
And without the image:
#menudrop.rightbar ul li a {
color: red;
display: block;
text-decoration: none;
}
nav ul li ul {
display: none;
background: #5f6975;
position: relative;
top:100%;
}
nav ul li:hover ul {
display: block;
}
<nav>
<ul>
<li id="menudrop" class="rightbar">Menu
<ul data-toggle="">
<li>Account Settings
</li>
<li>About Us
</li>
<li>Contact
</li>
</ul>
</li>
</ul>
</nav>
So I'm trying to create a css menu, where the children are in a column format. But I cannot seem to get the child li's to float, displaying their ul's underneath them. I can't seem to get the parent ul to be the width of the child, it seems to want to remain the width of the parent (I hope this is making sense).
Here's the HTML:
<div class="header">
<ul class="nav menu">
<li class="item-101 current active">Home</li>
<li class="item-112 deeper parent">Accommodation
<ul class="nav-child unstyled small">
<li class="item-161 deeper parent">Property Type
<ul class="nav-child unstyled small">
<li class="item-149">Apartments</li>
<li class="item-150">Suites</li>
<li class="item-151">Penthouses</li>
</ul>
</li>
<li class="item-179 deeper parent">Information
<ul class="nav-child unstyled small">
<li class="item-152">Inclusions</li>
<li class="item-162">Gallery</li>
</ul>
</li>
</ul>
</li>
<li class="item-113">Contact</li>
</ul>
</div>
and the CSS:
.header ul{margin:0;padding:0;list-style:none}
.header ul li{position:relative;float:left;display:inline;margin:0;padding:0}
.header ul li > a{padding:25px 15px;font-size:20px;line-height:20px;color:#666;font-weight:800;text-transform:uppercase;display:block}
.header ul li.item-101 > a{padding-left:0}
.header ul li.active > a,
.header ul li > a:hover{color:#1a2440}
.header ul li > ul{position:absolute;left:-9999em;width:auto;min-width:100%;max-width:500px;background:rgb(255,255,255);background:rgba(255,255,255,0.95);border:solid 1px #eaeaea}
.header ul li > ul li{float:left;display:inline-block;background:#f0f}
.header ul li > ul li:last-child{border-bottom:none}
.header ul li > ul li > a{padding:13px 15px;margin:0;font-size:16px;line-height:16px;color:#006699;font-weight:800;text-transform:uppercase;background:none;display:block;white-space:nowrap}
.header ul li > ul li.active > a,
.header ul li > ul li > a:hover{color:#009fe3}
.header ul li > ul li > ul{position:relative;float:none;display:block;top:0;left:0;background:none;border:none}
.header ul li > ul li > ul li{float:none;display:block;top:0;left:0;border-top:solid 1px #d7d7d7;background:#f9f}
.header ul li.parent:hover > a{color:#1a2440}
.header ul li.parent:hover > ul{left:0}
I've created a jsfiddle of what I've currently got, but I want the children of the Accommodation drop down to behave like columns. Which it's currently not doing. Any help would be appreciated!
Here you go.
WORKING SOLUTION
The HTML:
<div class="header">
<ul class="nav menu">
<li class="item-101 current active">Home</li>
<li class="item-112 deeper parent">Accommodation
<ul class="nav-child unstyled small">
<li class="item-161 deeper parent">Property Type
<ul class="nav-child unstyled small">
<li class="item-149">Apartments</li>
<li class="item-150">Suites</li>
<li class="item-151">Penthouses</li>
</ul>
</li>
<li class="item-179 deeper parent">Information
<ul class="nav-child unstyled small">
<li class="item-152">Inclusions</li>
<li class="item-162">Gallery</li>
</ul>
</li>
</ul>
</li>
<li class="item-113">Contact</li>
</ul>
</div>
The CSS:
.header ul{margin:0;padding:0;list-style:none}
.header ul li{position:relative;float:left;display:inline;margin:0;padding:0}
.header ul li > a{padding:25px 15px;font-size:20px;line-height:20px;color:#666;font-weight:800;text-transform:uppercase;display:block}
.header ul li.item-101 > a{padding-left:0}
.header ul li.active > a,
.header ul li > a:hover{color:#1a2440}
.header ul li > ul{position:absolute;left:-9999em;width:auto;min-width:100%;max-width:500px;background:rgb(255,255,255);background:rgba(255,255,255,0.95);border:solid 1px #eaeaea}
.header ul li > ul li{float:left;display:inline-block;background:#f0f}
.header ul li > ul li:last-child{border-bottom:none}
.header ul li > ul li > a{padding:13px 15px;margin:0;font-size:16px;line-height:16px;color:#006699;font-weight:800;text-transform:uppercase;background:none;display:block;white-space:nowrap}
.header ul li > ul li.active > a,
.header ul li > ul li > a:hover{color:#009fe3}
.header ul li > ul li > ul{position:relative;float:none;display:block;top:0;left:0;background:none;border:none}
.header ul li > ul li > ul li{float:none;display:block;top:0;left:0;border-top:solid 1px #d7d7d7;background:#f9f}
.header ul li.parent:hover > a{color:#1a2440}
.header ul li.parent:hover > ul{left:0}
.header ul li > ul {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.95);
border: 1px solid #EAEAEA;
left: -9999em;
max-width: 1010px;
min-width: 356px;
position: absolute;
width: auto;
}
.header ul li > ul li {
background: none repeat scroll 0 0 #FF00FF;
display: inline-block;
float: left;
width: 178px;
}
.header ul li > ul li {
background: none repeat scroll 0 0 #FF00FF;
display: inline-block;
float: left;
width: 178px;
}
Hope this helps.
EDIT
To work with dynamic width, here is the WORKING SOLUTION
here I make a menu with a submenu with all columns that you want ;)
HTML
<ul id="wrap">
<li>
Menu Item
<div class="subwrap">
<ul>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
<ul>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
<ul>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
<ul>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</div>
</li>
<li>
Menu Item
<div class="subwrap">
<ul>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
<ul>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
<ul>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
<ul>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
<ul>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</div>
</li>
CSS
#wrap {
min-width: 200px;
background-color: yellow;
}
#wrap > li {
float: left;
display: block;
background-color: orange;
margin-left: 20px;
}
#wrap li:hover .subwrap {
display: block;
}
#wrap li .subwrap {
display: none;
height: 200px;
background-color: pink;
position: absolute;
}
#wrap li .subwrap ul {
float: left;
margin-left: 20px;
padding: 0;
}
#wrap li .subwrap ul:first-child {
margin-left: 0;
}
#wrap li .subwrap ul li {
display: block;
float: none;
}
Example: http://jsfiddle.net/Hendrymc/8D5T4/
I am trying to target the header element of a drop down menu which I load in jfiddle here: http://jsfiddle.net/DZLtm/16/
I am trying to get it so when you roll over nav ul li it show black instead of red. Here are the lines that I would have thought would do it.
nav ul li {float: right; width: 172px; height: 35px; background-color: red;}
nav ul li:hover > ul {display: block; text-align: left; background-color: black;}
Here is the HTML:
<nav>
<ul>
<li>BUTTON IMAGE
<ul>
<li>Accreditation Client Login</li>
<li>Training Client Login</li>
<li>Training Registration</li>
<li>Guardian Tracking</li>
</ul>
</li>
</ul>
</nav>
Can someone please tell me why nav ul li:hover wont work and what is > ul have to do with it. When I remove it it breaks the menu. Thank you Frank!
Just add nav ul li:hover {
background-color:black;
}
http://jsfiddle.net/weissman258/DZLtm/17/
can some one explain why the box around my links are acting up
code is
CSS
#navigationbar ul{
margin:0;
padding:0;
}
#navigationbar ul li {
display: inline-block;
height: 20px;
}
#navigationbar ul li a {
padding: 10px;
}
HTML
<div id="navigationbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<ul>
</div>
the box around the links is 19px in height.. the padding makes it 39px, or 41 if i change padding to 11px.. so how do i get it to be 40px like my main navigation container?
or maybe a more efficient way to do all this?
Like this
you use li but forget close li and you do end tag.
please use <li></li> can't use <li></div>
DEMO
CSS
#navigationbar ul{
margin:0;
padding:0;
}
#navigationbar ul li {
display: inline-block;
height: 20px;
}
#navigationbar ul li a {
padding: 10px;
}
HTML
<div id="navigationbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
DEMO1
CSS
#navigationbar ul{
margin:0;
padding:0;
}
#navigationbar ul li {
display: inline-block;
background-color:red;
height:40px;
}
#navigationbar ul li a {
padding:11px;
vertical-align:middle;
}
Try this css the height of anchor is 40px now ,
CSS
#navigationbar ul{
margin:0;
padding:0;
}
#navigationbar ul li {
display: inline-block;
height: 19px;
}
#navigationbar ul li a {
padding: 10px 0px 11px 0px;
}
HTML
<div id="navigationbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="navigationbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<ul>
</div>