I'm having a bit of difficulty trying to get my drop down (sub-menu) to appear above the content. I have tried z-index and still there is no fix.
Initially the sub-menu starts off with a height of 0 and overflow-hidden (so it isnt shown). I have added JQuery to add a class of open when the parent of the sub menu is clicked. Then I have put a height on. The menu appears fine along with the transition, however the drop down sits below the content and it cannot be clicked.
Can anyone please help?
CSS
.sub-menu{
height:0;
overflow:hidden;
}
.sub-menu li {
width: 100%;
display: block;
clear: both;
border-top:1px solid;
}
.sub-menu, ul.sub-menu, .sub-menu li, ul.sub-menu li{
z-index: 5000;
}
li.sub-menu-parent:hover .sub-menu {
height: 204px;
}
HTML
<div class="col navigation">
<nav>
<ul>
<li class="sub-menu-parent">Menu Item 1
<ul class="sub-menu">
<li class="sub-close">Back</li>
<li>Sub Item 1</li>
<li>Sub Item 1</li>
<li>Sub Item 1</li>
<li>Sub Item 1</li>
</ul>
</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li class="sub-menu-parent">Menu Item 5
<ul class="sub-menu">
<li class="sub-close">Back</li>
<li>Sub Item 5</li>
<li>Sub Item 5</li>
<li>Sub Item 5</li>
<li>Sub Item 5</li>
</ul>
</li>
</ul>
</nav>
</div>
You need to give your element some position before the z-index will kick into action. I'd suggest also adding this to your .navigation divider instead of the li elements:
div.navigation {
position: relative;
z-index: 5000;
}
You should then give a lower z-index to your content just to be on the safe side:
{contentSelector} {
position: relative;
z-index: 1;
}
z-index is not working without position you need to set a position for your element.
.sub-menu, ul.sub-menu, .sub-menu li, ul.sub-menu li{
position:relative;
z-index: 5000;
}
Reference
You won't see the transition, without the position,
you need it relative to affect the div.
..and I did it in a nice little rhyme for you too :)
Have a look at this FIDDLE
Also, because Im in a good mood, I've tweaked into a sample horizontal menu
You need to use:
ul ul{
position:absolute;
}
Without position set to absolute, the content is effectively being injected before the next list item. You dont necessarily need to use z-index for a vertical menu.
Related
How to get those li that have children ul. I want to set CSS to those li. I can't set class because li are dynamically print. When I set CSS as below so it set all parent li to plus.
.ul{
width:200px;
position:relative;
}
.ul li{
position:relative;
}
.ul > li:before{
content : '+';
position: absolute;
top: 0;
right: 7px;
}
<ul class="ul">
<li>List 1</li>
<li>List 2</li>
<li>List 3
<ul>
<li>Sub List 1</li>
<li>Sub List 2</li>
<li>Sub List 3</li>
</ul>
</li>
<li>List item 4</li>
</ul>
This is style for that.
You're very close actually. The trick is to style simply each ul that is inside a .ul. Then move the + to where you want it to appear (i.e. after the first line of the parent li).
.ul {
width: 200px;
position: relative;
}
.ul li {
position: relative;
}
.ul ul::before {
content: '+';
position: absolute;
top: 0;
right: 7px;
}
<ul class="ul">
<li>List 1</li>
<li>List 2</li>
<li>List 3
<ul>
<li>Sub List 1</li>
<li>Sub List 2</li>
<li>Sub List 3</li>
</ul>
</li>
<li>List item 4</li>
</ul>
This is style for that.
You can't do that because in CSS, you don't have a parent selector.
For instance you can't do something like:
ul < li { color: #ddd; }
or even something like:
ul:has(li) { color: #ddd; }
This is because there are a lot of performance issues like re-rendering the page if you have such a parent selector. That's why W3C guys have not added the parent selector tool.
Look here for reading more into it:
Is there a CSS parent selector?
Parent selectors in CSS
Starting from this situation:
<div id="wrapper">
<ul class="menu">
<li>item 1</li>
<ul>
<li>item 1.1</li>
<li>item 1.2</li>
</ul>
<li>item 2</li>
</ul>
</div>
#wrapper {
/*width: 218px;*/
margin: 0px auto;
background-color: #cccccc;
overflow:hidden;
position: absolute;
top: 100px;
left: 0;
z-index: 999;
width: 31px;
}
The second level menu is visible only on click on the first level item (say item 1). The first level list will make room to show the sublevel one.
First level list have a width of 31px; when I hover an item it gets 187 extra width on the right showing labels (item 1 for example) with css3 transition. The other items will keep the 31px width.
My goal is to style the second level list so that:
width is 187px;
it is positioned with top=0 and right=0 relative to the first level item (in other words it is aligned on the right with the first level item)
has a z-index higher than wrapper so that it will not move the other items when displayed.
I tried to give position relative to the first level item and absolute to the sublevel but with no luck.
The first level menu when hovered:
The second level menu displayed actually:
A simple demo of what you are looking for is here
<div id="wrapper">
<ul class="menu">
<li>item 1
<ul class="l2">
<li>item 1.1</li>
<li>item 1.2</li>
</ul>
</li>
<li>item 2</li>
</ul>
</div>
and the css:
ul.l2 {
background-color: grey;
display: none;
position: absolute;
z-index: 99;
}
.menu li:hover ul.l2{display:block;}
If this is the kind of behavior you want, we can take it further.
I have two divs. When I rollover on a link, I want to hide one div and show the other so it appears as if the background color has changed. Here is some example HTML:
<div id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="sub-nav">
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
</ul>
</div>
The sub-nav div is EXACTLY the same as the main-nav div, except the background-color is different.
#main-nav {
width: 500px;
height: 250px;
background-color: black;
display: block;
}
#sub-nav {
width: 500px;
height: 250px;
background-color: white;
display: none;
}
All I want to do is show the #sub-nav div whenever an item in the #main-div is hovered over. So the effect will be that the background-color appears to change from black to white on hover.
Can I do this using only CSS?
Basically I am wanting to know if I can change the display property of a containing div whenever an element inside that div (the <a> tag) is hovered over? That is, hovering on a link should cause its containing div #main-nav to change to display: none and the #sub-nav div to become display:block
No you can't do this just with CSS. You would need the subnav to be a child of the element you are hovering or directly adjacent to it.
You could use css selectors like
#main-nav li:hover .sub-nav{}
or
#main-nav li:hover + .sub-nav{}
Alternatively you could use javascript
Why not just change the background color? Like this:
<div id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
#main-nav:hover { background-color: black; }
Edit you can do exactly what you asked, but you'd need a wrapper for that:
<div class="navigation-wrapper">
<div class="main">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="sub">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
And in your css:
.navigation-wrapper .sub { display: none; }
.navigation-wrapper:hover .main { display: none; }
.navigation-wrapper:hover .sub { display: block; }
Fiddle demo
I have a menu with sub menus. I used nested uls to achive this. Now I'm facing this situation: I want all the items and subitems to be displayed horizontally at their respective level. The problem is that when an parent list has a children list, it's width grows so the next item at the same level goes far to the right.
To have things more clear here's a fiddle of what I'm taking about: http://jsfiddle.net/matias/n8gFT/
As you can see I would like to have the items B and C placed where the green dashed spaces are.
Is it possible to do this?
I would like to keep using nested uls and display: inline-block for itemes instead of float: left
SAMPLE HTML:
<ul>
<li>ITEM A
<ul>
<li>sub item A1</li>
<li>sub item A2</li>
</ul>
</li>
<li>ITEM B</li>
<li>ITEM C</li>
</ul>
SAMPLE CSS:
ul{border: 1px solid red; padding: 10px;}
li{display: inline-block; border: 1px solid blue; margin: 5px; padding: 10px; vertical-align: top;}
span{border: 1px dashed lime; margin: 0 10px; padding: 5px;}
EDIT 1: I forgot to tell you this: A, B and C have children. If I click on B, it's children are shown and A's and C's are hidden...and so on....
We will start off with a little CSS
#menu > li.sub ul {
list-style: none;
position: absolute;
top: -1000em;
left: 0px;
}
#menu li.sub ul li a {
display: inline;
}
#menu > li.sub:hover ul {
top: 3em;
}
#menu{
text-align:left;
}
li{
display:inline-block;
}
Finish with some HTML
<ul id="menu" >
<li class="sub">
ITEM A
<ul>
<li>sub A1</li>
<li>sub A2</li>
</ul>
</li>
<li class="sub">
ITEM B
<ul>
<li>sub B1</li>
<li>sub B2</li>
</ul>
</li>
<li class="sub">
ITEM C
<ul>
<li>sub C1</li>
<li>sub C2</li>
</ul>
</li>
</ul>
and a JSFIDDLE http://jsfiddle.net/ShADm/28/
You could style the lists that are being pushed over of margin-left: -20px; here is a working fiddle
http://jsfiddle.net/n8gFT/1/
Of course the amount it is pushed over can be edited by changing the margin-left
I achieved what I was looking for using display: table-cell to the li's and reducing ul's width.
See demo
Add a class to the sub lists and style them like this:
.sub { position: absolute; margin-left: -27px; }
I have 2 separate menu's. I want to display the links within menu #2 when hovering over certain buttons on Menu #1. I want to try and do this with CSS if possible. Some of the css I am using is below.
HTML:
<nav>
<ul>
<li>HOME</li>
<li>NEWS</li>
<li>FORUMS</li>
<li>GAMES</li>
<li>XECOM</li>
</ul>
</nav>
<div id="sub-menu-items">
<ul>
<li>Test 1</li>
<li>Test 2</li>
</ul>
</div>
CSS:
#sub-menu-items ul li {
list-style-type: none;
z-index: 99999;
margin-right: 15px;
padding-bottom: 8px;
padding-top: 8px;
display: none;
text-shadow: 2px 3px 3px #080808;
}
nav ul li:first-child:hover #sub-menu-items ul li {
display: inline;
}
how is this not working?
The sub-menu-items need to be a child of the li you are hovering. Thats what this selector means:
nav ul li:first-child:hover #sub-menu-items ul li
CSS drop down menus are done like this:
HTML
<ul>
<li>Parent Item
<ul>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
<li>Parent Item
<ul>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
</ul>
CSS
ul ul {
display: none;
}
ul > li:hover ul {
display: block;
}
You will need to nest the sub-menus within parent 'li'
Your code will be something like this:
<nav>
<ul class="parent-menu">
<li>HOME</li>
<li>NEWS
<ul class="sub-menu">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</li>
<li>FORUMS</li>
<li>GAMES</li>
<li>XECOM</li>
</ul>
</nav>
Then you can style sub-menu ul & li (preferably position:absolute) and css can be:
.parent-menu li:hover .sub-menu { display:block}
The ':hover' state of an element can only affect its child elements. To make use of :hover to affect external elements you can make use of javascript.
The CSS in this line
nav ul li:first-child:hover #sub-menu-items ul li {display: inline;}
is looking for "#sub-menu-items ul li" inside the first "li" of "nav".
Depending on your layout you can achieve the desired effect only if you move the second menu inside the first menu.