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
Related
See my code and demo Here plz. I am not very used to with css but its simple, i have seen many demos working nearly with same code. But i am unable to catch the difference which is causing problem
I need a submenu to be opened under UserForm but its not getting visible on hover (using css)
Remove "top" and "left" from #main_nav ul ul like this:
#main_nav ul ul {
position: absolute;
visibility: hidden;
}
It is because of how "position: absolute" works. In your case the parent "li" has "position: static" (default) and in that case "position: absolute" makes the child ul placed absolute in the entire document. You can see this if you just remove "visiblity: hidden" and then it is placed at the bottom of the page. Another solution is to set "position: relative" to the parent li
When opening the navigation dropdown, the transformed fonts in the sidebar on the right sidebar: "UNSERE HEIMSPIELE 2014",... and so on in kassel-titans.de are displayed over the navigation dropdown.
Why is that?
It looks to me that by declaring top: 16px for .GDtitans, you're giving that element a position. #megaMenu has position: relative, but neither have a z-index set. Since the .GDtitan elements occur later in the document, they overlap #megaMenu.
Try adding a z-index to both, something like:
#megaMenu {
z-index: 20;
}
.GDtitan {
z-index: 10;
}
Now #megaMenu will have a higher z-index, and will overlap everything else.
By Removing below (or using desired value)
-webkit-backface-visibility: hidden;
From your GDtitans class and it will solve your problem.
Here you can find more explanation on that: http://css-tricks.com/almanac/properties/b/backface-visibility/
you should but z-index on your navigation div not on ul only
div#navigation{
position: relative;
z-index: 1;
}
that should work fine
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;
}
I'm trying to make a pure CSS dropdown menu, but it has one odd bug;
when the page loads, the text in the main menubar is slightly offset to the right.
It jumps back to the left when the page is modified or when a menu item is moused-over.
This includes right-click > inspect element, which makes it really hard to find out what's going on.
Here's an example of it: http://jsfiddle.net/m75p3/1/
As you can see, it's in the wrong position on load, but jumps to the correct one a few milliseconds after. This is because jsfiddle is modifying the page.
If loaded from its own file, it will not exhibit this jumping behaviour until moused-over.
Any ideas why?
The problem is that you have declared 'position:absolute' on your 'toplink' elements but not given any left value, so their position is determined by their parent's text-align:center rule. When the transition occurs, that disturbs the layout so they move. To fix it you need to declare the li as position:relative, so that it becomes the layout parent, and then set left:0 on the 'toplink' a element.
Addition:
To prevent the text from wrapping in the sub-menus, you can set their white-space to nowrap.
#head ul li {
position: relative;
...
}
.toplink {
left: 0;
...
}
#head li li, #head li li a {
white-space: nowrap;
...
}
http://jsfiddle.net/m75p3/5/
On this page: http://catonthecouchproductions.com/fish/boat-captain.html I have a list on the bottom right box in yellow, but it is not displaying as a list-style-type:circle, but i have it set in my CSS.
I am not sure why it is acting this way. Any ideas?
I have FireBug installed and it doesn't seem like anything is conflicting with it.
You need to add a left-margin to li to get them to show up.
ul li { margin-left: 10px; }
should do it
You haven't left any space for the circle to display - try margin:1px 10px; on the ul li instead
list-style-type:circle; should be defined for the ul and not the li.
Add a padding to the ul element that has been reset by reset.css.
Another detail, that I saw: your <ul> element has list-style-type:disc; and the <li> elements list-style-type:circle;. This property should only be declared for the <ul> element.
I had the same problem, when floating li.
As soon as I removed float from li element, the circles in ul showed up in IE7.