My drop down menu blocked my comment tab. Any css / jquery can let the menu show in front ?
Try setting z-index value for the menu in CSS
li
{
z-index:10;
}
The tag with higher z-index value is shown above the ones with lower z-index value. Read this
Related
I'm using jqueryui's menu feature, and the submenu overlaps other elements on the page. The problem is when I select the menu item which brings up the submenu, the submenu is displayed beneath the other elements.
I'm not sure how menu is to be configured, or if I have to override some jqueryui css elements, in order to get this to display as expected (over top of the other page elements).
The problem can be seen with the Tools menu at http://jsbin.com/hexuw/2/
Sorry the code is more complex than is necessary to show the minimal problem, but the menu call can be seen just a few lines down in the javascript file.
Thinking that this is a stacking problem I tried setting the navigation element z-index to a high number using the .ontop class, but that didn't help.
Add the line z-index:9999; under the selector .ui-menu
The CSS code will be
/* put navigation to the left (jquery ui) */
.ui-menu {
width: 10%;
float: left;
z-index:9999;
}
JS Bin Live demo
The title said everything, any ideas how can I fix it? Thanks. here's a print.
set position relative or absolute to both of them and set z-index value higher to the dropdown menu
for more about z-index visit here
I just can assume, without your code.
Try this in your CSS
.topNavigation{
z-index:99999;
}
Just read about Z-index Properties
at the same time please concern about other css properties as well
I'm adding a new dropdown div to an existing WordPress theme with it's own dropdown menu.
The new dropdown is activated and "dropping down" from an area above the menu.
The menu is set to z-index:99, but whatever value i give "my dropdown", the menu still appears on top of it.
Only exception is if i give the menu z-index:0, then all works fine except that the menu's dropdowns, of course, does not overlap items further down the page :/
Help appreciated!
Update: I have tried different position values, the menu needs to be "relative" to work.
The dropdown is now absolute, but relative gives the same result.
You have the following declared in your styles.css stylesheet on line: 316:
#section-tophat, #section-footer, #section-sub-footer { position: relative; z-index: 1; } /* Setup for :after double bgs below */
You're setting your #section-tophat to z-index:1 and thus at a lower level than your menu, so just remove your #section-tophat id from that line and your dropdown works fine.
z-index only work on position relative, absolute & fixed. So, give position:relative to your dropdown DIV.
Do you have an example page that we can check? You also may have stacking context issues.
Check my answer about how z-index works.
In the below image my drop down menu is not displaying over the content.It is very transparent know.Can anyone help me what I have to add to make this drop down menu un-transparent.
Your dropdown is probably a div in the html dom. You could find the name of that `div' and then apply a background to it using css:
.dropdown_div_name { background-color: white; }
Edit:
Re looking at the image you posted it is most probably a problem with the z-index as others also suggested, since for example if you look at the 'Technology/Connected TV' header, that shows over the menu contents. That could be fixed by changing the z-index of the dropdown menu
.dropdown_div_name { z-index:100; }
where 100 should be a number bigger than the z-index of the rest items that you want it to overlap
A background-color. Without one, the default colour is transparent, hence you see everything behind it.
Stack,
I'm having difficulty creating a good drop down navigation menu using only css. The menu is simple, it needs to only have a few things in it, and only needs to drop down (no need to go down and over etc).
The menu is somewhat working, but whenever I hover over it to drop it down, the menu gets overlapped by the wrapper div directly below the header div where the menu is located. I've tried setting the z-index of the drop down menu to like 20000 and it is still being overlapped.
Here is a direct link to the test page I am working on:
http://www.lolbrary.com/workspace/dropdownheader.php
Any ideas?
Thanky,
billmalarky
In #fullheaderbar and #profilemenu you need to remove overflow:hidden; and in .profile-menu ul you need to change position:relative to position:absolute;
then tweak from there :)