Regarding my navigation I have the problem that the second level is covered by the video or other elements that are created by javascript (visible when you hover "Hier lebe ich" or "Am Meer"):
http://www.ulrichbangert.de/orchid/mediaelement/2013-03-25_Pleione_Ueli_Wackernagel_Pearl.php
No problem, I thought, and gave the second level a higher z-index but lower than that one of the third level. But now the second level hides the third one partly although it's z-index is lower:
http://www.ulrichbangert.de/orchid/mediaelement/2013-03-25_Pleione_Ueli_Wackernagel_Pearl_zindex.php
(Hover the menu items below "Blumen und Pflanzen" and open the third level.)
CSS:
ul#Navigation li ul {
z-index: 998;
ul#Navigation li ul li {
z-index: 998;
ul#Navigation li ul li ul {
z-index: 999;
What is the reason for this and how can I fix it?
Best regards - Ulrich
remove z-index from ul#Navigation li ul li and the problem goes away
Related
Inherited a educational organization website and running into an issue with a dropdown submenu getting clipped by an inner-content div. It looks like there is a z-index of 100 for that inner-content div, but no matter what I set the submenu z-index to I can't get it to layer over the div.
The menu item that is getting clipped is Connect > Interest Section (IS) > *Clipped Menu (there should be 5 visible links).
The organization URL is http://minnetesol.org/.
Clipped subnav element
if you change the following it will work but there is more at play in the styles then z-index:-
#main-nav ul ul li ul {
left: 250px;
top: -50px;
}
#content {
margin: 0 auto -40px;
}
You would need to tweak the logo in the header after making these changes.
It looks like a z-indexing issue - #content #inner-content has a z-index of 100, so you'll need to do
#head{
z-index: 101;
}
I'd also recommend lowering your #inner-content z-index to 1 and #head to 2 just to prevent more z-index issues in the future.
CSS Dropdown menu does not stay visible on mouseover. I tried searching the answers but no codes work thus far. Here is the url: http://delawaresign.com.previewc40.carrierzone.com/about.html
but here's the clincher. It works FINE on another URL i made with the same flipping code!
http://delawaresign.com.previewc40.carrierzone.com/index-01-14-13.html
I can't figures this out! Why will it work on one but not the other??
It "shows" visible, but doesn't "stay" visible.
The problem is that you have a space between the menu item and drop down list. Put the drop down in other color and you will see the space.
The easiest solution to this is to remove this space putting the list up. Try to change the top: 2.5em to top: 1.5em in .sf-menu li:hover ul which is inside superfish.css file:
.sf-menu li:hover ul, .sf-menu li.sfHover ul {
left: 0;
top: 1.5em;
z-index: 99;
}
I've read replies for similar problems to mine, and I believe I've tried the steps mentioned but I'm still having problems with my dropdown menu disappearing when mouse off.
I've removed the formatting of the dropdown just so the code is bare bones, please take a look:
http://freerange.wesleypearce.co.uk
If you mouse over past productions you'll see my problem.
Thanks in advance for what probably is quite a simple fix, it's just alluding me!
Cheers,
Wes.
In the rule for your dropdown uls, use padding-top: <#>px; rather than top: 45px; to put spacing between the menu header and your list. The top value should be no more than the height of the menu header, otherwise you'll create a gap between it and the list, which will remove the list's visibility as soon as the cursor moves off the header and over the gap.
Try this one on style.css line 89
I have changed the top position of ul. The problem is there is a gap between your a tag (Past Products) and dropdown ul
#menu ul ul {
margin: 0 auto;
position: absolute;
top: 40px;
visibility: hidden;
width: 90px;
}
You're pushing your submenu too far from your main menu item, just declare it 100% to push your submenu exactly below your main menu item to fix the problem:
#menu ul ul {
top: 100%; /* fix */
}
You can check the problem here: http://jsfiddle.net/gkJAd/4/
I have an unordered list in where every li will have a max-height of 2.25em (I want it to be at most 2 lines). The list-type should show normally, on the outside, aligned on the first line. I tried a few things all with its on issues:
If I add the hidden, height, etc, codes to the li instead of the a, the disc disappears;
If I change the a to be display: block instead of display: inline-block, it shows correctly on Firefox but wrongly everywhere else;
If I change the a to be display: inline it puts the disc at the right place, but, since it is not longer a block, the height is ignored. Anyone got an solution?
Sol
All you need to do is add vertical-align: top to your ul li a selector code.
Updated JSFiddle. Working in FF, Chrome, and IE8/9.
I think this is what you want.
Basically, I floated and then cleared the lis.
Then I gave the ul li as a display:inline-block and a height and made sure to use vertical-align:top;
ul{
margin: 5px 10px 5px 20px;
background:green;
height:250px;
}
ul li{
list-style-type:disc;
float:left;
clear:both;
}
ul li a{
background:green;
line-height:1.25em;
overflow: hidden;
display:inline-block;
height:2.25em;
vertical-align:top;
}
Example: http://jsfiddle.net/jasongennaro/gkJAd/6/
Tested and works in Chrome and FF
I played with this a bit, but it basically comes down to that overflow: hidden will hide the list markers as well. Here's what I came up with: http://jsfiddle.net/N3JGg/
Basically used the display type of list-item, then instead of declaring the discs on the outside, pulled them into the box with inside so the overflow wouldn't hide them. It doesn't give you the same, nice line that you had before, but you've got the markers displaying now.
I have a css driven dropdown menu, and in Chrome when I hover over the last option the whole thing jumps to the left slightly. I assume it's because the dropdown menu is adding to the overall width of the main list even though it's styled to float. Is there any way to fix this? (it's not doing it in firefox interestingly)
I've noticed by using webdeveloper to outline elements that the last li appears to get wider when it's hovered, but none of the others do.
the applicable sourcecode is here:
http://jsfiddle.net/WsAEW/
It worked for me changing this:
#menu ul li {
display: inline;
position: relative;
}
to this:
#menu ul li {
display: inline-block;
position: relative;
}
Here is a modified jsfiddle. I think the issue is fixed. Give it a try.
http://jsfiddle.net/WsAEW/5/
BTW, I only changed the following style. The 'float left' gets the elements to line up horizontally and the 'display: block' gets the top element to size to include the drop down menu.
#menu ul li {
float: left;
display: block;
position: relative;
}