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/
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 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>
I am having trouble targeting the <li> of a <ul> that is a child of another <li> using a CSS child combinator selector - >.
I am needing to add a list_style_type:SomethingElse to only those list items and list-style-type: none; for all others.
I am already using the following to remove the list style:
.snap-drawer ul {
padding: 0;
margin: 0;
list-style-type: none;
}
And the following does'nt chang anything:
.snap-drawer ul > li {
list-style-type: disc !important;
}
The HTML:
<div class="snap-drawer">
<ul>
<li class="li-item">...</li>
<li class="li-item">...</li>
<li class="li-item">
<ul>
<li class="li-item">...</li> <==== Target all these only
<li class="li-item">...</li> <==== Target all these only
</ul>
</li>
</ul>
</div>
Option1
You are removing the padding then the bullet isn't visible.
Also target the ul inside li item. Try:
.snap-drawer ul > li > ul {
padding-left:25px;
list-style-type: disc !important;
}
.snap-drawer ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.snap-drawer ul > li > ul {
padding-left: 25px;
list-style-type: disc !important;
}
<div class="snap-drawer">
<ul>
<li class="li-item">...</li>
<li class="li-item">...</li>
<li class="li-item">
<ul>
<li class="li-item">...</li> <==== Target all these only
<li class="li-item">...</li> <==== Target all these only
</ul>
</li>
</ul>
</div>
Option2
You can try the > selector just for the first ul too:
.snap-drawer > ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.snap-drawer > ul {
padding: 0;
margin: 0;
list-style-type: none;
}
<div class="snap-drawer">
<ul>
<li class="li-item">...</li>
<li class="li-item">...</li>
<li class="li-item">
<ul>
<li class="li-item">...</li> <==== Target all these only
<li class="li-item">...</li> <==== Target all these only
</ul>
</li>
</ul>
</div>
What you need is this:
.snap-drawer ul ul > li {
list-style-type: disc !important;
}
Or more simply:
.snap-drawer ul ul li {
list-style-type: disc;
}
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