I seem to be having a problem with my Wordpress CSS Menu. I am trying to create a dropdown element in the menu, which is conveniently wrapped in a div automatically called "sub-menu".
When normal, the menu looks like this:
However, when I try to access the drop-down menu under "Photography", this happens:
I have tried everything and am unable to get it to correctly show up under Photography. Any help would be much appreciated:
#header li ul.sub-menu {
display:none;
position: absolute;
top: 10px;
left: 50%;
width: auto;
}
#header li:hover ul.sub-menu {
display:block;
}
You need to make sure the container element (#header li) is set to a position as well. I would use relative becasue it will (hopefully) not break other positioning:
#header li {
position: relative;
}
#header li ul.sub-menu {
display:none;
position: absolute;
top: 10px;
left: 50%;
width: auto;
}
header li:hover ul.sub-menu {
display:block;
}
Absolute elements will position itself based on the nearest parent who's position is set explicitly.
Related
I have a horizontal list boxes which is overlapped by a pop up overlay. And horizontal boxes are structured using ui li
Now the question is, how to get the single box above the overlay using z-index. In my example I need to get the li which has class name .test above the overlay div.
.wrapper { position: relative }
ul li {
margin:0;
padding:0
}
li {
background:yellow;
display:inline-block;
width:60px;
height: 60px;
}
.overlay {
background: rgba(0,0,0,0.5);
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:10
}
.test {
z-index:100 /*not working */
}
DEMO
z-index property works on positioned elements. You could add position: relative; to the element to get the z-index property to work:
.test {
z-index:100;
position: relative;
}
WORKING DEMO
Add a position: relative; to your test class
Trying to make 'tab2' move with the nav bar. (when you hover the nav the box moves out with it)
http://jsfiddle.net/Bz5mn/
Help!
#nav
{
min-width: 60px;
width:5%;
height:100%;
background-color: rgba(1,1,1,0.3);
position: absolute;
top: 0;
left: 0;
transition-duration:0.4s;
overflow: hidden;
}
Try the adjacent sibling selector. You can do something like
#nav:hover + #tab2 {
margin-left: 5%;
}
You'd also want to add your transition to the #tab2 declaration so that the animation matches.
Also note that this selector only works in IE 9+
Here's a live demo
I've faced a problem putting a horizontal sub menu bar. Basically, I can do vertical dropdown menubar, But I haven't any idea how to make horizontal dropdown menu bar. This is what I can:
http://jsfiddle.net/eSxT9
But I need this: https://www.dropbox.com/s/idx2r5bkbuzd1t0/horizonatl-sub-menubar.png
I want to do with CSS. I thought, I would have to change this code:
.nav ul ul {
position: absolute;
left: 0;
right: 0;
display: none;
z-index: 5;
}
I removed left:0, right: 0, gave width 100%. But, it won't work. I can't get the idea what should I do. Please, help me.
Give a width to the inner UL and float the LI for that inner UL http://jsfiddle.net/eSxT9/1/
.nav ul ul {
position: absolute;
width:1000px;
left: 0;
right: 0;
display: none;
z-index: 5;
}
.nav ul ul li {
float:left;
margin: 0;
}
You need to use display: inline for that particular <ul>
Heres a simmilar example of the logic http://jsfiddle.net/kevinPHPkevin/te5AU/268/
I have top menu with drop down navigation(sub menu) and drop down comes right side of main menu.
css:
ul.dropdown ul {
width: 220px;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
How can change position to left for a last menu because if i hover on last menu, drop-down comes with horizontal scroll because there is no space on right side to display menu?
Please help
ul.dropdown li {
position: relative;
}
ul.dropdown li ul {
position: absolute;
top: 20px; /* assign the correct value of the top line height */
left: 0px;
}
This should work^^ When assigning position:absolute; to an child element of an element with position:relative the absolute positioning is relative to its parent and not to the body.
My fault, somehow overread the last part with "last child".
This could work:
ul.dropdown li:last-of-type ul {
position:absolute;
left:0px;
}
You can use jquery to fix the problem,try this
$(function(){
$(".dropdown:last").css("left","-120px");
})
You should use last-child selector to set right property instead of left:
.dropdown > li:last-child:hover ul {
left: auto;
right: 0;
}
You don't provide a fiddle so I've set up this simple example to demonstrate the principle: http://jsfiddle.net/6eBd2/
I'm making a CSS dropdown navigation and I can't get the dropdown to show up above the content in the div below the navigation div. How do I do this, without positioning both divs absolutely and specifying a z-index? You can see my example here:
http://stage.fourwallsla.com/in-the-neighborhood
You have already used absolute positioning I see, but anyways why not add z-index to it?
#container #top_nav .subnav {
position: absolute;
top: 37px;
width: 100%;
z-index: 1000;
}
That fixes it, you just need to work on a better background color for it now!
You can't do it without z-index specifing or swapping blocks in your markup
Add to your css
#container #nav_container {
z-index: 2;
}
#container #nav_container li a {
background-color: #fff;
}
Giving the "feature" div a negative z-index would also work (tested in Chrome Firebug)
z-index:-1
#container #top_nav .subnav{
z-index: 2;
}
#container #top_nav .subnav li > a{
background: #fff;
}