I can't figure this out. I'm trying to have a menu-item be displayed over top of it's submenu. By default wordpress has this code.
<div class="nav--primary">
<ul class="menu">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>
<a>List Item</a>
<ul class="sub-menu">
<li>subitem</li>
</ul></li>
</ul>
</div>
I'm using this CSS:
.menu {
position: relative;
background-color: orange;
z-index: 2;
}
.sub-menu {
position: absolute;
background-color: maroon;
z-index: 1;
top:45px;
}
Here is the jsfiddle. I need the maroon to be below the orange. I've seen some example solutions online but I cannot get any of them to work with this code.
Try this:
.menu {
position: relative;
background-color: orange;
}
.sub-menu {
position: absolute;
background-color: maroon;
z-index: -1;
top:45px;
}
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.
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>
To achieve this layout of a fully justified menu list, I can not use CSS pseudo-classes to display separators between list items; instead, I have to put the separator directly in the HTML.
Since according to HTML5 standard in an <ul> only <li> and script-supporting elements are allowed, I made the below code. It is valid HTML5 but it seems quirky to me. Any concerns?
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
}
li.home {
padding: 0;
}
li,
script::after {
vertical-align: middle;
padding-top: 10px;
}
nav {
border-bottom: 1px solid black;
border-top: 1px solid black;
height: 40px;
}
script.separator {
display: block;
}
script.separator::after {
content: "*";
}
<nav id="main-menu">
<ul>
<li class="home">
<img src="http://dummyimage.com/40x40/000/fff">
</li>
<script class="separator"></script>
<li class="second">Item 1</li>
<script class="separator"></script>
<li>Item 2</li>
<script class="separator"></script>
<li>One more Item</li>
<script class="separator"></script>
<li>Another Item</li>
<script class="separator"></script>
<li class="last">Contact</li>
</ul>
</nav>
Replace the <script> with another <li> and simply assign a style to it with
ul li:nth-of-type(even) {
display: block;
content: "*";
vertical-align: middle;
padding-top: 10px;
}
This will have the same effect but will look much neater on the code view.
<nav id="main-menu">
<ul>
<li class="home">
<img src="http://dummyimage.com/40x40/000/fff">
</li>
<li></li>
<li class="second">Item 1</li>
<li></li>
<li>Item 2</li>
<li></li>
<li>One more Item</li>
<li></li>
<li>Another Item</li>
<li></li>
<li class="last">Contact</li>
</ul>
</nav>
You may have to tweak the actual CSS in the rule above to suit your look and feel but as a concept I think it's neater and cleaner to have all <li> elements and then use CSS to intelligently select all of the correct ones. This also reduces the number of class=" ... " laying around too.
You can also potentially add further rules so that for example you do not do the seperator CSS on the last of type, so the final li would never be the seperator either:
ul li:nth-of-type(even), ul li :not(:last-of-type) {
display: block;
content: "*";
vertical-align: middle;
padding-top: 10px;
}
I'm not sure this is the exact layout you're after, but can you not use display: table and a border?
ul {
margin: 0;
padding: 0;
list-style: none;
display: table;
width: 100%;
}
li {
display: table-cell;
text-align: center;
}
li:not(:last-child) {
border-right: 1px solid #333;
}
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
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.. :)
I am trying to make a custom sidebar in wordpress, i have all the element and info in li's, what i am trying to do is try to shift the half of the total li's to left and half to the right...
What i am using is float/clear left and right, that not seems to work as i wanted...
HTML Structure:-
<ul>
<li class="left">Left</li>
<li class="left">Left</li>
<li class="left">Left</li>
<li class="left">Left</li>
<li class="left">Left</li>
<li class="right">Right</li>
<li class="right">Right</li>
<li class="right">Right</li>
<li class="right">Right</li>
<li class="right">Right</li>
</ul>
The CSS:-
.left { float:left; width:50%; clear:left; }
.right { float:right; width:50%; clear:right }
jsFiddle
If you're willing to give up your list style disc (depending on the browser), you can do this easily without floats or modifying your markup.
http://jsfiddle.net/Duejc/2/
ul {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
Why don't you brake it down like this, depending on the case :)
<ul class="left">
<li>Left</li>
<li>Left</li>
<li>Left</li>
<li>Left</li>
<li>Left</li>
</ul>
<ul class="right">
<li>Right</li>
<li>Right</li>
<li>Right</li>
<li>Right</li>
<li>Right</li>
</ul>
.left{
float: left;
width: 50%; }
.right{
float: right;
width: 50%; }
or do it as #Xander says :)
Shuffle you're HTML. when an element is cleared it does so against the previously floated element; in your case, it was the sixth element clearing the fifth:
<ul>
<li class="left">Left</li>
<li class="right">Right</li>
<li class="left">Left</li>
<li class="right">Right</li>
<li class="left">Left</li>
<li class="right">Right</li>
<li class="left">Left</li>
<li class="right">Right</li>
<li class="left">Left</li>
<li class="right">Right</li>
</ul>
jsFiddle
Done it with simple markup and styles
http://codepen.io/ruinunes/pen/bpgpZV
HAML:
%ul.chat
%li.stamp
Saturday
%span 20:32
%li.left Who is it?
%li.right It's Little Nero's, sir. I have your pizza.
%li.left Leave it on the doorstep and get the hell outta here
%li.stamp
Saturday
%span 20:33
%li.right Okay, but what about the money?
%li.left What money?
%li.right Well, you have to pay for your pizza, sir.
%li.left Is that a fact? How much do I owe you?
%li.left Keep the change, ya filthy animal!
%li.right Cheapskate.
SCSS
ul.chat {
font-family: sans-serif;
list-style:none;
margin: 0 auto;
padding: 0;
width: 50%;
li {
margin-bottom: 10px;
display: inline-block;
border-radius: 8px;
padding: 10px;
&.left {
background: #e3e3e3;
float:left;
margin-right: 50%;
width:50%;
border-top-left-radius: 0;
}
&.right {
background: #6CCE66;
color: #fff;
float: right;
width: 50%;
border-top-right-radius: 0;
}
&.stamp {
color: #666;
font-size: 80%;
text-align: center;
width: 100%;
span {
color: #999;
}
}
}
}