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>
Related
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've searched around and found a lot of questions about this problem, but none of the answers I tried seemed to work in my case. So I have a unordered list inside of the nav tag and I want the list to be centered relative to the parent nav tag. But the list is always a bit to the right and never in the center no matter what I tried.
HTML pretty straight forward:
<nav>
<ul>
<li>MENU</li>
<li>Opt 1</li>
<li>Opt 2</li>
<li>Opt 3</li>
</ul>
</nav>
Here is the CSS so far:
nav {
float: left;
width:15%;
margin: 0;
padding:0;
background:gray;
text-align:center;
}
nav ul {
list-style-type: none;
color:blue;
}
Any ideas how can I get this to work?
try this
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
this is because ul have a padding and margin applied to it by browsers by default you need to remove them
nav {
float: left;
width: 50%;
margin: 0;
padding: 0;
background: gray;
text-align: center;
}
nav ul {
list-style-type: none;
color: blue;
margin: 0;
padding: 0;
}
<nav>
<ul>
<li>MENU</li>
<li>Opt 1
</li>
<li>Opt 2
</li>
<li>Opt 3
</li>
</ul>
</nav>
Test this:
<nav>
<ul>
<li>MENU</li>
<li>Opt 1</li>
<li>Opt 2</li>
<li>Opt 3</li>
</ul>
</nav>
nav {
display:table;
margin:0 auto;
padding : 10px;
}
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 a menu which needs to expand to show the child elements on hover. According to the design the expanded child ul needs to expand across the full width of the page so needs to be absolutely positioned in order to break out from the width of the parent li.
The problem is that I need the child ul to remain visible as you hover over it. Because it is absolutely positioned it no longer contained by the parent li, so as soon as my mouse moves off that it disappears.
If I change the parent li to position:relative the ul remains visible when the mouse moves over it, but the child ul no longer fills 100% width of the page.
Here is a fiddle to demonstrate:
https://jsfiddle.net/sx2aouht/12/
Here is abbreviated markup (full code on the fiddle link above):
<nav class="priority-nav">
<ul class="menu">
<li class="first expanded active-trail active menu-mlid-178 help">Help & Advice
<ul class="menu">
<li class="first leaf menu-mlid-526">Find your local services</li>
<li class="leaf menu-mlid-528">Join CarerSmart</li>
<li class="leaf menu-mlid-527">Join our online community</li>
</ul>
</li>
</ul>
</nav>
Here is the css:
.priority-nav ul li {
//if this is uncommented the ul will remain visible when
//the mouse is over it, but the ul will not fill the page 100%
//position: relative;
float: left;
padding: 0 10px;
list-style-type: none;
}
.priority-nav ul li ul {
display: none;
position: absolute;
top: 40px;
left: 0;
background-color: red;
width: 100%;
padding: 50px 130px;
}
.priority-nav ul li:hover ul {
display: block;
}
The menu already stays open when you hover the submenu, the problem is that when the mouse goes down to the submenu, it leaves the hovered li element, in order to avoid this make sure that when the mouse enters the submenu, it will not leave the main li you hover, the submenu is in the li item, so hovering it is considered hovering the main li.
You just have to avoid leaving the main li until you enter the submenu, I used some padding in your example:
.priority-nav ul li {
//if this is uncommented the ul will remain visible when
//the mouse is over it, but the ul will not fill the page 100%
//position: relative;
float: left;
padding: 0 10px 5px;
list-style-type: none;
}
.priority-nav ul li ul {
display: none;
position: absolute;
top: 35px;
left: 0;
background-color: red;
width: 100%;
padding: 50px 130px;
}
.priority-nav ul li:hover ul {
display: block;
}
<nav class="priority-nav">
<ul class="menu"><li class="first expanded active-trail active menu-mlid-178 help">Help & Advice<ul class="menu"><li class="first leaf menu-mlid-526">Find your local services</li>
<li class="leaf menu-mlid-528">Join CarerSmart</li>
<li class="leaf menu-mlid-527">Join our online community</li>
<li class="leaf menu-mlid-530">Help and advice topic 4</li>
<li class="leaf menu-mlid-531">Help and advice topic 5</li>
<li class="leaf menu-mlid-532">Help and advice topic 6</li>
<li class="leaf menu-mlid-533">Help and advice topic 7</li>
<li class="leaf menu-mlid-534">Help and advice topic 8</li>
<li class="last leaf menu-mlid-535">Help and advice topic 9</li>
</ul></li>
<li class="expanded menu-mlid-184 community">Online Community<ul class="menu"><li class="first leaf menu-mlid-536">Discussion board</li>
<li class="last leaf menu-mlid-537">Chat</li>
</ul></li>
<li class="last expanded menu-mlid-176 get-involved">Get Involved<ul class="menu"><li class="first leaf menu-mlid-529">Donate</li>
<li class="leaf menu-mlid-538">Events</li>
<li class="leaf menu-mlid-539">Volunteer</li>
<li class="last leaf menu-mlid-540">Corporate opportunities</li>
</ul></li>
<li class="more"><span>More</span></li>
</ul>
</nav>
If the submenu is to be 100% width of the page but the top-level menu is not then we can still position the submenu in relation to the parent menu and not the li.
.priority-nav >.menu {
position: relative;
}
But we size the submenu to the width of the page with viewport units.
.priority-nav ul li ul {
display: none;
position: absolute;
top:100%;
left: 0;
background-color: red;
width: 100vw;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.cf:before,
.cf:after {
content: " ";
display: table;
/* clearfix */
}
.cf:after {
clear: both;
}
.priority-nav {
position: relative;
width: 70%;
}
.priority-nav > .menu {
background: #c0ffee;
}
.priority-nav ul li {
float: left;
padding: 0 10px;
list-style-type: none;
padding: 10px;
}
.priority-nav ul li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: red;
width: 100vw;
}
.priority-nav ul li:hover ul {
display: block;
}
<nav class="priority-nav">
<ul class="menu cf">
<li class="first expanded active-trail active menu-mlid-178 help">Help & Advice
<ul class="menu">
<li class="first leaf menu-mlid-526">Find your local services
</li>
<li class="leaf menu-mlid-528">Join CarerSmart
</li>
<li class="leaf menu-mlid-527">Join our online community
</li>
<li class="leaf menu-mlid-530">Help and advice topic 4
</li>
<li class="leaf menu-mlid-531">Help and advice topic 5
</li>
<li class="leaf menu-mlid-532">Help and advice topic 6
</li>
<li class="leaf menu-mlid-533">Help and advice topic 7
</li>
<li class="leaf menu-mlid-534">Help and advice topic 8
</li>
<li class="last leaf menu-mlid-535">Help and advice topic 9
</li>
</ul>
</li>
<li class="expanded menu-mlid-184 community">Online Community
<ul class="menu">
<li class="first leaf menu-mlid-536">Discussion board
</li>
<li class="last leaf menu-mlid-537">Chat
</li>
</ul>
</li>
<li class="last expanded menu-mlid-176 get-involved">Get Involved
<ul class="menu">
<li class="first leaf menu-mlid-529">Donate
</li>
<li class="leaf menu-mlid-538">Events
</li>
<li class="leaf menu-mlid-539">Volunteer
</li>
<li class="last leaf menu-mlid-540">Corporate opportunities
</li>
</ul>
</li>
<li class="more"><span>More</span>
</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.. :)