I am using a drop-down list using jquery when the user hover the main menu it will drop down and its working fine in all browsers except the IE7 and below i am using z-index to display the drop-down menu in-front of all elements but its wont works.
the menu items(dummydummy) goes behind the textbox and the button
style of the submenu items is
#sub-menu {
z-index: 1000;
}
and the textbox and buttons are grouped inside a div and the div's style is
#grouped {
left: 100px;
position: absolute;
z-index:1;
}
z-index only work with position relative, absolute & fixed. So, Give position:relative to your #submenu. Write like this:
#sub-menu {
position:relative;
z-index: 1000;
}
I would recommending trying out CSS3 Pie. We started using it and many of the IE7 wacky bugs disappeared.
http://css3pie.com/
I was amazed at the things that css3pie fixed in IE7.
You can also try applying higher z-index values to your #sub-menu ul and li values. This has worked on a superfish menu that was giving me the same problems in IE7.
use the below code
#sub-menu {
position:absolute;
z-index: 1000;
}
#grouped {
left: 100px;
position:relative;
z-index:1;
}
Related
I cannot seem to get the sub-menu to appear on this website I built: http://website-test-lab.com/sites/mirandaparsons/
If you use Dev tools/Firebug, and check .sub-menu to display: block; then you can see that the sub-menu does appear, but not in plain sight. I've tried adding z-index to several of the menu areas with no luck.
The odd thing is, that it does appear correctly in FF on Windows?!
I haven't pasted the code here because there would be so much to copy and paste.
Any help would be much appreciated.
Thanks
I think that what you need is a background-color to .sub-menu and position relative to .nav I just tried to set it and you can see the sub menu well :
.navigation .nav {
position:relative;
}
PS : Worked on firefox 33 Mac
You need to add this to your CSS:
.navigation .nav {
position: relative;
}
This would properbly be usefull to read: http://www.w3schools.com/css/css_positioning.asp
Add this css to your stylesheet
#site-navigation.main-navigation{
position:relative;
}
I'm using the JB DropDown Menu for Bootstrap module in Joomla.
I have the dropdown menu working however, when there is a photo. The menu shows under the image. ie.) blocking the Dropdown Menu. This currently happens in Chrome and Safari.
Update One-
No relative or z-index on article/photo css
Section for Dropdown on left
#_break ul{
z-index:1000;
}
---------- End Update One -----
(Old Code)
Section for photo on right
body.menu-events-and-activities article.post-45{
z-index: 2;
position: relative;
}
Section for Dropdown on left
#_break ul{
z-index:1;
background-color: yellow;
}
You have to try something higher to z-index like 1000.
Please try to add z-index to prior div than ul or the li to see if it get fixed.
Why the heck do your articles have a z-index? They shouldn't.
I have this html page: https://dl.dropboxusercontent.com/u/84321529/Fensternorm/index.html
There is a bigger div when you hover products and it contains more information about the product and one button. This content is hidden with overflow:hidden and everything is done with pure css solution.
I have no idea why is that problem with google chrome (Version 29.0.1547.66 m) and safari(5.1.7). Tested it on Firefox on mac & windows and on IE>7 and it works fine.
Do you have any idea how to fix this?
Put the position: absolute; in these class: .product-list li div {}
.product-list li div {
width:184px;
color:#999;
line-height:15px;
position:absolute; // <--
}
Disable absolute positioning on the div inside of the li and, in all probability, you should have a working solution.
i write an own wordpress theme at the moment and have a problem with the submenu. I want that the submenu appears after hovering over the "Events" link in the example below. In some browser's the submenu is displayed under the "Events" link, with a 5px margin to the left. This is fine. In other browsers (Firefox 17 on Win 7) the submenu is displayed on the right side from the "Events" link and not under the "Events" text like it should be.
Does somebody know why this happens and how i can get rid of it?
Thanks.
Example: http://codepen.io/anon/pen/pqAIy
It is this part of your code that you need to change:
.menu-item:hover .sub-menu {
display: inline-block;
position: absolute;
}
To this:
.menu-item:hover .sub-menu {
display: block;
position: absolute;
}
(so inline-block to block)
Tested and working in IE9+, Mz FF, Chrome & Safari
Now add this code
nav .menu li {
position:relative;
}
nav .menu li:hover .sub-menu {
display:block;
left:0;right:0;top:18px;
position: absolute;
}
Demo
This code is universal Run all Latest and Standard Browser
Here is my current jsfiddle for the navigation bar.
http://jsfiddle.net/EPh6j/28/
Please stretch the bar so it is a single line otherwise you will get mixed results.
The problem only occurs in ie9 as far as I know. What happens is when you hover over one of the main links the drop down comes down. However, as soon as the drop down passes the bottom of the main menu it turns invisible. What is even more confusing is that the ul border for the submenu shows but not the elements.
Here is an example of what I mean:
Notice how it is visible and then disappears past the bottom.
http://i.imgur.com/jXsoE.png
I did the above when I was trying to figure out my problem to start. In the jsfiddle, it moves all the way down as it should and is thus completely blank.
I'm completely stumped on getting this one to work.
My CSS:
.menu li li {
float:none;
position: relative;
}
.menu li ul {
left:0;
position:absolute;
top:0;
visibility:hidden;
}
.menu li:hover > ul {
top:100%;
visibility:visible ;
}
Suggestions?
I suspected a z-index issue, so I stripped them all from your fiddle. Seems to have fixed it.
BTW, "sponsorships". ;-)