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>
Related
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>
I have simple navigation, where did it with :target pseudo. I have however some style for currently selected tab like .active. I also have styles for :target which about the same. The problem is that Actively selected tab uses some ::before pseudo to add down arrow. This is something I can't achieve in combination with :target. Is it possible?
I want to have ::before content on :target:
<nav>
<div class="nav nav-wrapper">
<ul role="navigation">
<li>Top 50</li>
<li>Mid</li>
<li>Bottom</li>
<li>About</li>
</ul>
</div>
</nav>
and have
.nav ul li a:hover,
.nav ul li a.active,
.nav ul li a:target {
background-color: white;
color: #585858;
position: relative;
}
.nav ul li a::before {
content: " ";
position: absolute;
top: 0;
left: 50%;
...
}
.nav ul li a.active::before {// will obviously not work, but it is something I can achieve}
Of course it works doing .active::before, and you can do :target::before, showed in below sample
.nav ul li a:hover,
.nav ul li a.active,
.nav ul li a:target {
background-color: white;
color: #585858;
position: relative;
}
.nav ul li a::before {
content: " ";
position: absolute;
top: 0;
left: 100%;
}
.nav ul li a:target::after {
content: " ...Hey there, 123";
white-space: nowrap;
}
<nav>
<div class="nav nav-wrapper">
<ul role="navigation">
<li>Top 50
</li>
<li>Mid
</li>
<li>Bottom - click me to show :target::before
</li>
<li>About
</li>
</ul>
</div>
</nav>
Updated with a sample based on a comment, how target 2 items using :target pseudo class
.nav ul li a:hover,
.nav ul li a.active,
.nav ul li a:target {
background-color: white;
color: #585858;
position: relative;
}
.nav ul li a::before {
content: " ";
position: absolute;
top: 0;
left: 100%;
}
div:target ~ nav #bottom1::after,
div:target ~ #bottom2::after {
content: " ...Hey there, 123";
white-space: nowrap;
}
<div id="bottom"></div>
<nav>
<div class="nav nav-wrapper">
<ul role="navigation">
<li>Top 50
</li>
<li>Mid
</li>
<li>Bottom - click me to show :target::before
</li>
<li>About
</li>
</ul>
</div>
</nav>
<section id="bottom2"></section>
I've looked at all of the questions already posed on this subject, but can't find anything wrong with my coding. I need another person's eye to find what's wrong. There must be something I am just not seeing, as I've successfully made drop down menus before...
Here is my html5 coding for my menu:
<nav id="menu">
<ul>
<li>Home</li>
<li>Biography</li>
<li>Artwork</li>
<ul>
<li>Paintings</li>
<li>Drawings</li>
<li>Sculpture</li>
<li>View All</li>
</ul>
<li>Exhibitions</li>
<li>Commissions</li>
</ul>
</nav>
And here is my CSS styling that is attempting to make a drop down menu:
/**** Main Menu ****/
#menu {
background-image: url(../images/paintbanner.png);
height: 55px;
width: 793px;
margin-left:125px;
margin-top: -25px;
}
#menu ul a {
color: #f7f5f1;
}
#menu ul a:hover {
color: #635ccb;
}
#menu ul {
margin-left: 75px;
}
#menu ul li {
float: left;
margin-right: 60px;
font-family: "Bell MT",
serif;
font-size: 1.1em;
margin-top: 20px;
}
#menu ul ul {
display: none;
position: absolute;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul ul li {
float: none;
margin-top: 0;
margin-right: 0;
position: relative;
background-image: url(../images/dropdown.png);
height: 100%;
width: 120px;
}
#menu ul ul a {
color: #1e1b1b;
font-size: .9em;
}
You closed a <li> before I think you meant to. Look here:
<li>Artwork</li>
<ul>
<li>Paintings</li>
<li>Drawings</li>
<li>Sculpture</li>
<li>View All</li>
</ul>
Should probably be:
<li>
Artwork
<ul>
<li>Paintings</li>
<li>Drawings</li>
<li>Sculpture</li>
<li>View All</li>
</ul>
</li>
This happens because the li:hover should enable <ul> with display:block's out of <li>
Try this:
<nav id="menu">
<ul>
<li>Home</li>
<li>Biography</li>
<li>Artwork
<ul>
<li>Paintings</li>
<li>Drawings</li>
<li>Sculpture</li>
<li>View All</li>
</ul>
</li>
<li>Exhibitions</li>
<li>Commissions</li>
</ul>
</nav>
example: http://jsfiddle.net/9zfsr/
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 making a horizontal menu that is three levels deep. It works as intended for the first and second levels. However, when you hover over any of the first or second level menus, the third menu items are displayed.
Even more so, all third level menu items that are within the first level menu are displayed (all of the second level submenus). I have no idea how to correct this (I do, but I can't figure out the combination of ul li...etc).
*I realize my CSS and html is sloppy (black ftw) - that is going to get fixed later. My main concern now is to get it working correctly.
#menu ul {
margin: 0;
padding: 0;
position:relative;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom-style:solid;
border-width:2.3px;
border-color:black;
padding-left:0px;
/*background:url(./images/fillers/vvv.png);*/
}
#menu ul li {
/* position: relative; */
}
#menu li ul {
position: absolute;
left: 149px; /*Set 1px less than menu width */
top: 0;
display: block;
}
#menu li:hover ul {
display: block;
}
#menu li:hover ul {
visibility:visible;
}
#menu ul ul {
visibility:hidden;
}
/* Fix IE. Hide from IE Mac \*/
* html #menu ul li { float: left; height: 1%; }
* html #menu ul li a { height: 1%; }
/* End */
/* Make-up syles */
#menu ul, li {
margin: 0 0 0 0;
}
/* Styles for Menu Items */
#menu ul a {
display: block;
text-decoration: none;
color: white;
padding: 4px;
border: 2.3px solid black;
border-bottom: 0;
}
/* Hover Styles */
#menu ul li:hover, #menu ul li a:focus {
background-color:#5a5a5a;
color:white;
background:url(./images/fillers/vvv.png);
}
/* Sub Menu Styles */
#menu li ul a {
text-decoration: none;
color: white;
text-align:center;
padding: 4px;
border: 2.3px solid black;
border-bottom: 0;
}
/* Sub Menu Hover Styles */
#menu li ul a:hover {
color: white;
}
#menu li ul a.noLink:hover, #menu li ul a.noLink, #menu .noLink, #menu li ul .noLink, #menu li a.noLink {
color: grey;
}
/* Icon Styles */
#menu ul a.submenu {background: url("r_arrow.gif") no-repeat right; }
#menu ul a.submenu:hover {background: url("r_arrow.gif") no-repeat right;}
<div id=menu>
<ul id=menuList>
<li>
Tournaments
<ul>
<li>
2011
<ul>
<li> 1, 2, 3</li>
<li> 4, 5, 6</li>
<li> 7, 8, 9</li>
<li> 10</li>
</ul>
</li>
<li>
2012
<ul>
<li>Season 1</li>
</ul>
</li>
<li><a class="noLink">2013</a></li>
<li><a class="noLink">2014</a></li>
</ul>
</li>
<li>---
<ul>
<li>
2011
<ul>
<li>1, 2, 3</li>
</ul>
</li>
<li><a class="noLink">2012</a></li>
<li><a class="noLink">2013</a></li>
<li><a class="noLink">2014</a></li>
</ul>
</li>
<li><a class="noLink" name="submenu" class="submenu">Leagues</a>
<ul>
<li><a class="noLink">2011</a></li>
<li><a class="noLink">2012</a></li>
<li><a class="noLink">2013</a></li>
<li><a class="noLink">2014</a></li>
</ul>
</li>
<li><a class="noLink" name="submenu" class="submenu">---</a>
<ul>
<li>
<a class="noLink" name="submenu" class="submenu">2011</a>
<ul>
<li><a class="noLink">---</a></li>
</ul>
</li>
<li><a class="noLink">2012</a></li>
<li><a class="noLink">2013</a></li>
<li><a class="noLink">2014</a></li>
</ul>
</li>
</ul>
</div>
I figured this solution out:
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{
display:none;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{
display:block;
}
I had the same issue - found the solution here and it worked for me
CSS Drop Down Navigation, 3rd level issue
You need to add an ">" between li:hover and ul
ie: li:hover > ul