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;
}
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>
guys i have dynamic navbar . submenu will be availbe if menu have submenu. i want open submenu under related menu which is hovered and want keep submenu visible to select their item.
with this code submenu will show always at that css style position and menu will disapear when my mouse move to it... how can i solve this issue?
this is my navbar :
<nav>
<div class="nav-wrapper grey darken-3">
<ul class="right hide-on-med-and-down second-nav">
<li *ngFor="let cat of categories">
<a (mouseover)="hover($event, cat)" (mouseleave)="unhover($event)" class="dropdown-button" >{{ cat.title }}</a>
</li>
</ul>
</div>
</nav>
<!-- Dropdown -->
<div *ngIf="hoveredCategory" class="content">
<ul id="hoveredCategory" class="collection">
<li class="collection-item avatar" *ngFor="let sc of hoveredCategory.sub">
<span>
{{ sc }}
</span>
</li>
</ul>
</div>
mycss :
.content {
background-color: #FFFFFF;
margin: 0;
width: 300px;
position: absolute;
right: 0;
min-width: 300px;
max-height: inherit;
margin-left: -1px;
overflow: hidden;
white-space: nowrap;
z-index: 1;
}
hover and unhover :
hover(event, category) {
this.hoveredCategory = category;
}
unhover(event) {
this.hoveredCategory = null;
}
.navigation ul,.navigation li{
list-style: none;
margin: 0;
padding: 0;
float: left;
}
.navigation li{
background:rgba(0,0,0,0.3);
position: relative;
}
.navigation li a {
padding: 15px;
display:block;
text-decoration:none;
}
.navigation ul ul{
display: none;
position: absolute;
top: 100%;
left: 0;
}
.navigation li:hover ul{
display: block;
}
<div class="navigation">
<ul>
<li>
Menu Item
<ul>
<li>Sub Item</li>
<li>Sub Item</li>
<li>Sub Item</li>
</ul>
</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</div>
Try this one.
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 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 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.. :)