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;
}
Related
I want to use only css, no javascript. When I mouse hover the top-level menu I can display the submenu, but as soon as I unhover the top-level menu the submenu disapper. How could I solve this without using javascript? Have I missed something?
I tried to use .has-children:hover + .sub-menu {display: block;} to display the submenu when I mouse hover the top-level menu, but I have no idea what I can code to keep visible the submenu.
The HTML code is:
.header ul {
list-style: none;
padding: 20px 30px;
}
.header li {
float: left;
position: relative;
}
.header li a {
padding: 20px 30px;
}
.menu {
clear: none;
float: right;
max-height: none;
}
.menu li ul {
position: absolute;
}
.sub-menu {
display: none;
}
.open-menu-link {
display: none;
}
.has-children:hover + .sub-menu {
display: block;
}
<header class="header">
<ul class="menu">
<li>Work</li>
<li>
<a class="has-children" href="#about">Haschildren</a>
<ul class="sub-menu">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
<li>Careers</li>
<li>
<a class="has-children" href="#careers">About</a>
<ul class="sub-menu">
<li>Child 3</li>
<li>Child 4</li>
</ul>
</li>
<li>end</li>
</ul>
</header>
Add the class has-children to the li and use the li's hover event to display the submenu.
.header ul {
list-style: none;
padding: 20px 30px;
}
.header li {
float: left;
position: relative;
}
.header li a {
padding: 20px 30px;
}
.menu {
clear: none;
float: right;
max-height: none;
}
.menu li ul {
position: absolute;
}
.sub-menu {
display: none;
}
.open-menu-link {
display: none;
}
.has-children:hover .sub-menu {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<header class="header">
<ul class="menu">
<li>Work
</li>
<li class="has-children">Haschildren
<ul class="sub-menu">
<li>Child 1
</li>
<li>Child 2
</li>
<li>Child 3
</li>
</ul>
</li>
<li>Careers
</li>
<li class="has-children">About
<ul class="sub-menu">
<li>Child 3
</li>
<li>Child 4
</li>
</ul>
</li>
<li>end
</li>
</ul>
</header>
</body>
</html>
Move you has-children class onto the li and then make your selector:
.has-children:hover > .sub-menu
Updated snippet:
.header ul {
list-style: none;
padding: 20px 30px;
}
.header li {
float: left;
position: relative;
}
.header li a {
padding: 20px 30px;
}
.menu {
clear: none;
float: right;
max-height: none;
}
.menu li ul {
position: absolute;
}
.sub-menu {
display: none;
}
.open-menu-link {
display: none;
}
.has-children:hover > .sub-menu {
display: block;
}
<header class="header">
<ul class="menu">
<li>Work</li>
<li class="has-children">
Haschildren
<ul class="sub-menu">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
<li>Careers</li>
<li class="has-children">
About
<ul class="sub-menu">
<li>Child 3</li>
<li>Child 4</li>
</ul>
</li>
<li>end</li>
</ul>
</header>
I am working on getting my CSS Menu setup, I have followed some tutorials but got myself stuck after hiding some secondary menu items. I just want the items to show up right below their parents. (Not to the side like most tutorials I've seen)
My code is here
http://codepen.io/anon/pen/pJMdqv
HTML
<nav>
<ul>
<li>Home</li>
<li>Lessons</li>
<ul>
<li>Lesson 1</li>
<li>Lesson 2</li>
</ul>
<li>Dictionary</li>
<ul>
<li>Phrases</li>
<li>Onomatopoeia</li>
</ul>
<li>Sentences</li>
<ul>
<li>Beginner</li>
<li>Intermediate</li>
<li>Advanced</li>
</ul>
</ul>
</nav>
CSS
nav {
width: 180px;
margin-top: 15px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
position: relative;
}
nav a {
color: 101010;
padding: 12px 0px;
display: block;
text-decoration: none;
transition:background 1s;
-moz-transition:background 1s;
-webkit-transition:background 1s;
-o-transition:background 1s;
font-family:tahoma;
font-size:13px;
text-transform:uppercase;
padding-left:20px;
}
nav a:hover {
background: #ececec;
}
nav ul ul {
display: none;
}
nav ul li:hover ul {
display: block;
}
Your nesting is off. Instead of:
<li>Lessons</li>
<ul>
<li>Lesson 1</li>
<li>Lesson 2</li>
</ul>
You need to include your submenu ul within the parent li that gets hovered over:
<li>
Lessons
<ul>
<li>Lesson 1</li>
<li>Lesson 2</li>
</ul>
</li>
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 trying to lessen the vertical space between items in the submenu of my drop down navigation bar. You can see what it currently looks like at http://www.mirandabee.com
I am trying to reduce the space vertically, but can't figure it out.
Here is my HTML for it:
<ul id ="nav">
<li><a href="http://www.mirandabee.com/search/label/About%20Me#.UuQfD-Io6Rs">About Me
<ul>
<li>About Me</li>
<li>Photo Album</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Blog%20Series#.UuPc3uIo6Rs1">Blog Series
<ul>
<li>Guest Post Monday</li>
<li>Infographic Monday</li>
<li>What I Wore Wednesday</li>
<li>Fun Friday Link Party</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Freebies#.UhDj0D92XiM">Freebies
<ul>
<li>Giveaways</li>
<li>Printables</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Recipes#.UuPyGOIo6Rt">Recipes
<ul>
<li>All Recipes</li>
<li>Appetizers</li>
<li>Snacks</li>
<li>Main Dishes</li>
<li>Sides</li>
<li>Drinks</li>
<li>Desserts</li>
<li>Other Recipes</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Projects%20%26%20Crafts#.UuP03OIo6Rt">Projects
<ul>
<li>For the Home</li>
<li>Kids & Family</li>
<li>Travel Solutions</li>
<li>Gift Ideas</li>
<li>Other</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Organize%20Your%20Life#.UuP2yuIo6Rt">Organization
<ul>
<li>One Space at a Time</li>
</ul>
</a></li></ul>
CSS:
/* ----- NAVMENU ----- */
#nav, #nav ul {
padding: 0px;
margin: 0;
z-index: 999;
margin-top: -80px;
margin-left: 100px;
list-style: none;
color: #007581;
}
#nav a {
display: block;
width: 6.5em;
}
#nav li {
float: left;
width: 6.5em;
font-size:18px;
color: #ff6962
}
#nav li ul {
position: absolute;
width: 6em;
font-size: 5px;
left: -999em;
}
#nav li:hover ul {
left: auto;
width: 7em;
font-size:18px;
color: #ff6962;
margin-left: -2px;
padding-top:-112px;
}
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
Keep in mind that I am very much a beginner, but I would appreciate any help I can get. Thanks so much!
Your HTML is totally broken. You have
<a><ul><li><a>...</a></li></ul></a>
you cannot have anchors inside anchors like that. Your css also doesn't make much sense. You've got position: absolute, but no position: relative anywhere else, so ALL of the nested <ul>'s are going to be in the wrong place.
Your HTML structure is bad. I'm sorry to say that. But here I try to fix it for you.
Fiddle
HTML:
<ul id="nav">
<li>
About Me
<ul>
<li>About Me</li>
<li>Photo Album</li>
</ul>
</li>
<li>
Blog Series
<ul>
<li>Guest Post Monday</li>
<li>Infographic Monday</li>
<li>What I Wore Wednesday</li>
<li>Fun Friday Link Party</li>
</ul>
</li>
<li>Freebies
<ul>
<li>Giveaways</li>
<li>Printables</li>
</ul>
</li>
<li>Recipes
<ul>
<li>All Recipes</li>
<li>Appetizers</li>
<li>Snacks</li>
<li>Main Dishes</li>
<li>Sides</li>
<li>Drinks</li>
<li>Desserts</li>
<li>Other Recipes</li>
</ul>
</li>
<li>Projects
<ul>
<li>For the Home</li>
<li>Kids & Family</li>
<li>Travel Solutions</li>
<li>Gift Ideas</li>
<li>Other</li>
</ul>
</li>
<li>Organization
<ul>
<li>One Space at a Time</li>
</ul>
</li>
</ul>
CSS:
/* ----- NAVMENU ----- */
#nav, #nav ul {
padding: 0px;
margin: 0;
z-index: 999;
margin-top: 0px;
margin-left: 100px;
list-style: none;
color: #007581;
}
#nav a {
display: block;
width: 6.5em;
}
#nav li {
float: left;
width: 6.5em;
font-size:18px;
color: #ff6962
}
#nav li ul {
position: absolute;
width: 6em;
font-size: 5px;
left: -999em;
}
#nav li:hover ul {
left: auto;
width: 7em;
font-size:18px;
color: #ff6962;
margin-left: -2px;
padding-top:-112px;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
I hope it will help you on solving this problem.. :)
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/