I have tried to add position:relative and z-index:1000 to my ul navigation elements but it continues to display behind the logo and content which is set to position relative.
I found a small script which positions all the ul elements to 1000 and that did not work either.
Example: http://islands.kellykruschel.com/directory/accommodations/
Hover over Things to Do >> Outdoor Sports
Any solutions would be very helpful!
on #topbar add this:
#topbar{
z-index: 1000;
}
This should make it sit on top of the logo. It works in chrome.
Add #topbar z-index;
#topbar{
z-index:999;
}
Related
I have a portfolio site here:
http://mrliger.com/index2.php
I have an issue whenever I hover of the menu li elements on the left side. The hover state changes the background color of the li to a darker grey but at the same time covers the arrow just to the right of the menu item. I'd like the arrow to always be visible. I've tried using z-index but no joy. Any suggestions?
The z-index property only works on positioned elements (position:absolute, position:relative, or position:fixed). This simple CSS should work for you:
.topnavi {
position: relative;
z-index: 1;
}
OR:
.arrow-up {
position: relative;
z-index: 1;
}
Note: For future questions, it's better if you add the code here instead provide a link.
I'm struggling with positioning on a pure css driven drop down menu: My left hand side options are working fine - and this code is based on code i found online - It does the job ok.
I'm trying to make my far right hand menu drop down and NOT be clipped off/screen - I believe i will need to use a combination of relative positioning and float right but have tried lots of combinations without the desired effect.
I've put my code into a JSfiddle to show a live example (in-fact it's pretty much identical to what i'm working on) - I have added a batch of css resets to the top to make jsfiddle behave properly (on my live site i'm using an external css reset).
JS Fiddle: http://jsfiddle.net/g7Lk7/1/
.pit_toolbar_ul ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
list-style-type:none;
margin: 0;
}
Any recommendations on how to get the far right drop down to align up against the right edge of the screen would be appreciated.
Thanks for your time!
You should use right: 0 instead of left: 0 for the right menu item. You can fix it adding this styles:
.pit_toolbar_ul li:hover ul.rightside {
left: auto;
right: 0;
}
.pit_toolbar_ul li:hover ul.rightside li {
margin-right: 0;
}
and add rightside class to corresponding ul.
http://jsfiddle.net/g7Lk7/2/
.pit_toolbar_ul li:hover ul.alignRight li
{
position:relative;
left:-30px;
}
Add this class to your style sheet this may help you. I have positioned your dropdown li.
I'm trying to edit the default menu for Wordpress TwentyTwelve theme. So far I have made the sub-menus horizontal but they don't align the same in Firefox than Chrome.
In Ff it looks as I want, but in Chrome, the sub menu align with the Menu item previously clicked, NOT to the far left of the main menu.
basically, I want a horizontal two-lines menu. I can' t get the "position:"" properly.
Here's how it looks in both browsers:
Here's how it looks in both browser:
Chrome:
http://imageshack.us/photo/my-images/248/cssmenuchrome.jpg/
I can't post more links because I need 10 reputation but the second image (menu in Firefox) in there too.
And here's a fiddle of my code so far:
http://jsfiddle.net/ZN9my/
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation .menu-item li {
display: none;
margin-right: 14px !important;
}
Your problem, as you say, is that both browsers seem to be dealing with your position:absolute; differently. position:absolute should be calculated in regards to the most recent parent element with an explicitly set position, which means that it's actually Chrome which is interpreting it right.
In this case, you've given .main-navigation li a position:relative, which means that Chrome is positioning the submenu, li.sub-menu, relative to it. If you remove position-relative from the CSS for .main-navigation li and add it to ul#menu-main, then li.sub-menu will be positioned relative to the main navigation ul, and should behave as you want it to across browsers. You'll probably want to change .main-navigation li ul's top from 100% to something like 37px so it still sits in the right place.
I've made the changes to your jsfiddle as well: http://jsfiddle.net/ZN9my/1/.
EDITED
So basically I was able to create the drop down shown above in html css, but when i converted it into a wordpress theme the drop down didnt work anymore,can someone help me out? Thank!
`homeabout
work
by client
by category
clients
contact
`
I did it here using a pseudo element that is positioned absolutely to the left of the li element. This then butts it up right up to the border on the parent UL element. In order to get the line on the bottom li to align with the bottom of the border I had to bump the li's down with a top position property, so I added some margin so it wont overlap with anything underneath it.
ul{
padding:16px 8px 0px 0px;
border-left:1px solid #000;
}
li{
display:block;
padding-left:12px;
position:relative;
top:9px;
height:20px;
}
Other then using images, this is probably the easiest way involving the least amount of css.
http://jsfiddle.net/PfChj/4/
EDIT
Here's the modified fiddle. I pretty much redid your css because it was a little hard for me to follow with all those sub ul and li children. Sometimes it's better to use a class for readibility, so you're going to have to redo your styles a bit. The sub menu is positioned in the center of the top li which has a set width now. If you don't want it at the center and what your top li's to flex with the link widths, you can modify this.
http://jsfiddle.net/FYnS4/2/
I tried to create a drop down menu. That's what I did so far:
http://gegensinn.org/test.html
(I made the drop down menu visible at all time for "debugging")
I think the problem is quite obvious: The menu is behind the text.
First I thought I could fix this with z-index.
Although I'm not quite sure which element has to get the z-index property.
I tried to set the whole menu to z-index:100; and at the same time set the z-index:1; of .main.
Afterwards I tried to set only the z-index of <li> and <a> but nothing worked.
add position:relative on #header :)
I think applying z-index like so should work.
CSS
#menu a
{
z-index: 100;
}
#menu ul li ul
{
position: absolute;
}
#main
{
z-index: 10;
}
Some browsers ignore z-index if it is not set on both elements in question.
add position relative to li and position absolute to sub ul and then z-index
For anyone else with this issue, just add !important and the z-index to the menu/header area:
position:relative !important;z-index:999