I have a Drop Down menu and a slide show. I want my DD menu to be over the slide show, not the oposite.
I have tried z-index, but it didn't work.
Thanks.
EDIT: I solved it, z-index wasn't in the right place.
That's a common one, I recommend you use Chrome Developer Tools or Firebug to inspect your element and see what css properties are being applied.
Another gotcha is that elements must have a CSS position. If an item has a position of static or no position is specified, it won't be affected by the z-index.
Related
I am running WordPress 5.2 on the default theme and made a custom nav bar where I used CSS so the dropdown menu is invisible unless its parent is hovered over. Recently it stopped working (when I hover over it doesn't appear).
When I use the Chrome console to turn the element:hover on and inspect the dropdown menu, it shows the element is there (CSS attribute display is indeed set to block instead of none). I checked z-index and opacity (2 and 1 respectively) so I don't think that is the issue.
http://ess.ccmcanada.org
Page while inspecting element:
You have to remove overflow-y: hidden from #main-nav, because this is hiding the dropdown menus that are outside its dimensions.
Remember: common properties that may be hiding an element that you can investigate are usually these: display, visibility, position, z-index, opacity, transform and overflow.
I have created a dropdown menu but the problem I'm having is that when I hover over the top navigation menu, the drop-down menu items are hidden behind the slider and content.
I looked online and trying to figure out the problem but cannot fixes.
Does anyone can hel me? Please if is possible explain really well.
Thanks in advance,
Helen
This is most likely down to the css z-index of the various elements on the page. Higher z-index values will position stuff on top of lower z-index values (providing they have a positioning value). However, you have to bear in mind that child elements cannot gain a higher z-index than their parent element, or at least you can assign the z-index to any value but they will always remain within the parent element at the parent elements z-index value. Most likely the slider on your page has a higher z-index than your header/menu bar.
Also, make sure you have position:relative, position:absolute or position:fixed or the z-index will be ignored.
If you're using a HTML list e.g. <ul> try adding a higher z-index to your list to bring it over everything else.
.dropdown li {
z-index:999;
position:relative;
}
I had a similar problem when working with my drop down menu and it showing up behind the slider. The slider z-index ranged from 1-5 so I made the z-index of the drop down much larger and it now displayed correctly.
I am trying to create an element with either :before or :after and position it at the bottom of its parent, halfway out of the element, to hide the box shadow there. This seems to work, except for IE.
Demonstration: http://jsfiddle.net/XV6pT/
The white border from :before should overlay the bottom border and its box-shadow. However, in Internet Explorer, the parts of the element below the bottom boundary of the button are not displayed.
There is no filter or similar which would set something to hidden (according to How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?). The CSS is copied as-is.
The general aim (maybe someone has a better idea) is, that below the button, there is a dropdown navigation, that should look like the dropdown and the button are "one part", so there should not be any border or box shadow between the button and the dropdown.
It seems that the problem occurs in IE9 and IE10. Switching from absolute to relative positioning also didn't help.
Any hints?
Take a look at this: Creating a CSS3 box-shadow on all sides but one
It involves a bit more html, but IE and pseudo-elements can drive you nuts. That answer also includes a shadow for the menu "baseline" but without deeply looking into it, I think it can be safely removed.
Good luck!
I'm trying to figure out where an element's location is being computed, like hovering over the element's line of code in the code window so that the margin, padding, etc, are shown. Is there a way to do this for pseudo-elements?
Edit: What I should say is I want to see something like the metrics, properties, etc window for pseudo-elements :before and :after. All I really want is to see their location on the screen.
Support for before/after elements is coming very soon! You should have it within the next month or so on Canary!
Yes, there is a way to force an elements state using chrome devtools; if you look on the right side you should see an icon that looks like the cursor with a broken box behind it on the 'styles' tab.
When you click on it, it will have a dropdown menu that will allow you to toggle the selected code's hover, active, focus and visited pseudo-classes.
I have a container div with z-index of -1 (because above this container is a menubar with a menuitem with dropdown list). I have a hyperlink (a href text) inside this container. It is not getting clickable on Chrome. In IE, its Ok.
Any suggestions, please?
Ok, I solved the problem myself. For anyone interested, what I did is I made the z-index of the menubar div +100 rather than making the z-index of the container div to -1. However, now, the opposite phenonmenon occurred i.e. worked in chrome but not in IE. Then, I found this site :
http://briancray.com/2009/04/16/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/
which explains how to target the css explicitly for IE. So, with sort of binary switching the z-index for each browser type, I managed to do it.