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>
Related
how to use position absolute for the first div skipping the parent div?
<ul>
<li>
<ul class="sub-menu">
</ul>
</li>
</ul>
How to use position absolute relate for the ul, not li?
Not realy sure what you want, but I suppose you mean something like this?:
ul.menu,
ul.sub-menu {
position: relative;
margin: 0;
padding: 0 0;
list-style: none;
background: #1486e7;
}
ul.menu li {
position: static;
float: left;
margin: 0 5px;
padding: 5px;
}
ul.menu li a {
display: block;
padding: 5px;
background: #fff;
}
ul.sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
}
ul.menu > li:hover ul.sub-menu {
display: block;
}
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
<ul class="menu clearfix">
<li>Item 1
</li>
<li>
Item 2
<ul class="sub-menu">
<li>Sub-Item 2-1
</li>
<li>Sub-Item 2-2
</li>
<li>Sub-Item 2-3
</li>
</ul>
</li>
<li>Item 3
</li>
<li>
Item 4
<ul class="sub-menu">
<li>Sub-Item 4-1
</li>
<li>Sub-Item 4-2
</li>
<li>Sub-Item 4-3
</li>
</ul>
</li>
</ul>
position: absolute;The element is positioned relative to its first positioned (not static) ancestor element
That means that the limust be position: static;(which is the default value)
Try .sub-menu ul {position: absolute;} for absolute positioning and
.sub-menu ul {position: relative;}
for relative positioning.
You set this in your css file
EDIT
<ul class ="sub-menu">
<li>list item</li>
</ul>
I have 3 drop-down menus under nav, and I want to align them left, middle, and right. The left and right alignment are working using float, but I'm having difficulty to align a drop-down menu to the middle. Please see the css selector
.inline-menu.middle-menu at https://jsfiddle.net/xv51vkc7/.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="css/theme_1.css">
</head>
<body>
<nav>
<ul class="inline-menu left-menu">
<li>Left-A
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>Left-B
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
<ul class="inline-menu middle-menu">
<li>Middle-A
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>Middle-B
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
<ul class="inline-menu right-menu">
<li>Right-A
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>Right-B
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
body{
background-color: #eee;
padding: 0;
}
.inline-menu,
.inline-menu ul{
list-style: none;
padding: 0;
margin: 0;
}
.inline-menu > li{
display: inline-block;
padding-right: 25px;
background-color: yellow;
position: relative;
}
.inline-menu a{
text-decoration: none;
}
.inline-menu > li > ul{
display: none;
position: absolute;
background-color: green;
}
.inline-menu > li:hover > ul{
display: block;
width: 100%; /* same width as parent */
}
.inline-menu.left-menu{
float: left;
}
.inline-menu.right-menu{
float: right;
}
.inline-menu.middle-menu{
}
Flexbox can do that:
body {
background-color: #eee;
padding: 0;
}
nav {
display: flex;
justify-content: space-between;
}
.inline-menu,
.inline-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.inline-menu > li {
display: inline-block;
padding-right: 25px;
background-color: yellow;
position: relative;
}
.inline-menu a {
text-decoration: none;
}
.inline-menu > li > ul {
display: none;
position: absolute;
background-color: green;
}
.inline-menu > li:hover > ul {
display: block;
width: 100%;
/* same width as parent */
}
.inline-menu.left-menu {
float: left;
}
.inline-menu.right-menu {
float: right;
}
.inline-menu.middle-menu {
float: left;
}
<nav>
<ul class="inline-menu left-menu">
<li>Left-A
<ul>
<li>1
</li>
<li>2
</li>
</ul>
</li>
<li>Left-B
<ul>
<li>1
</li>
<li>2
</li>
</ul>
</li>
</ul>
<ul class="inline-menu middle-menu">
<li>Middle-A
<ul>
<li>1
</li>
<li>2
</li>
</ul>
</li>
<li>Middle-B
<ul>
<li>1
</li>
<li>2
</li>
</ul>
</li>
</ul>
<ul class="inline-menu right-menu">
<li>Right-A
<ul>
<li>1
</li>
<li>2
</li>
</ul>
</li>
<li>Right-B
<ul>
<li>1
</li>
<li>2
</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 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.. :)
EDIT: in theory i think i could accomplish this by having a dummy ul between the 2 level and then positioning the 'second (now 3rd) level. Crude proof of concept > http://jsfiddle.net/petergus/jk7vU/
I have a horizontal dropdown menu that I am trying to get to stretch its parent div height.
The problem I run into is the child ul. In order to get it to sit on a line below the main menu I have to use position: absolute but that takes it out of the flow.
Is it even possible to have a multilevel horizontal list without set container height?
EDIT: Here is an illustration screenshot of what i am trying to accomplish. EXCEPT the content (black text behind) should slide down.
Here is how the content slides down >
as far as i can tell this is simple a problem of position: relative vs absolute
Please see a sample setup at http://jsfiddle.net/petergus/nC32t/
HTML:
<div class="mnavwrapper">
<div id="mnav">
<ul class="menu clearfix">
<li class="first expanded">
<span title="" class="nolink">Click me here</span>
<ul class="submenu clearfix">
<li class="first leaf">consultancy</li>
<li class="leaf">daylight</li>
<li class="leaf">solutions</li>
<li class="leaf">design</li>
<li class="leaf">something</li>
<li class="last leaf">team</li>
</ul>
</li>
<li class="expanded"><span title="" class="nolink">portfolio</span>
<ul class="submenu clearfix">
<li class="first leaf">all projects</li>
<li class="leaf">commercial</li>
<li class="leaf">public</li>
<li class="leaf">private</li>
<li class="leaf">something</li>
</ul>
</li>
<li class="expanded"><span title="" class="nolink">another</span>
<ul class="submenu clearfix">
<li class="first leaf">techniques </li>
<li class="last leaf">influences</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="contentbody">
<p>Hello text</p>
</div>
CSS:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
ul.menu {
/*display: inline-block;*/
list-style: none;
clear: both;
width: 100%;
display: block;
position:relative;
}
ul.menu li {
/*float: left;*/
padding: 0px 10px;
display: inline;
}
ul.menu li {
float: left;
}
ul.submenu {
list-style: none;
position: absolute;
width: 100%;
}
ul.submenu li {
float: left;
}
.mnavwrapper {
/*clear: both;*/
}
#mnav {
background: lightblue;
/*float: left;*/
width: 100%;
}
#contentbody {
background: pink;
}
p {
padding: 0px;
margin: 0px;
}
jQuery:
$('.active-trail').addClass('selected');
$('ul.menu .nolink').click(function() {
$(this).parent().toggleClass('selected').end().next('ul').slideToggle().parent().siblings('li').find('ul').slideUp(150).parent().removeClass('selected');
});
I think this is what you want:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8"
http-equiv="Content-Type" />
<title>test doc</title>
<style type="text/css">
ul {
display: table;
padding: 0;
}
li {
display: inline-block;
white-space: nowrap;
width: 13em;
}
li li {
display: none;
width: auto;
}
li:hover li {
display: inline-block;
}
</style>
</head>
<body>
<p>dfhg</p>
<ul>
<li>Hover here for sub-menu
<ul>
<li>daylight</li>
<li>solutions</li>
<li>design</li>
<li>something</li>
<li>team</li>
</ul>
</li>
<li>Yet another sub-menu
<ul>
<li>daylight</li>
<li>solutions</li>
<li>design</li>
<li>something</li>
<li>team</li>
</ul>
</li>
</ul>
<p>Hello text</p>
</body>
</html>
cheers,
gary
something like this?: http://jsfiddle.net/chanckjh/DDeRT/
html:
<div class="nav">
<ul>
<li class="nav1">nav
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
<li class="nav2">nav2
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
</ul>
</div>
css:
.nav > ul >li{
display: inline;
position: absolute;
}
.nav1{
left: 50px;
}
.nav2{
left: 100px;
}
.nav > ul >li > ul > li{
display: none;
}
.nav > ul >li:hover > ul > li{
display: inline;
}