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.
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 having trouble getting my dropdown menu right.
Two issues:
1. In Firefox, the dropdown appear left of the header block, and not under the correct menu-item.
2. In browsers where it appears correctly, it pops under the carousel when it has scrolled.
Problems (and code) can be seen here: http://vizit-dev.mooo.com
Can anyone point me in the right direction? I don't have much experience in CSS.
Start from:
.nice-menu li { } change display: inline to inline-block;
set z-index for ul.nice-menu li { } higher than
.views_slideshow_cycle_teaser_section_banner_carousel-block { }
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". ;-)
I am using WordPress twentyeleven theme and developing my custom theme. The live demo of the site can be seen here. In that site you can see there are two types of menus. On the left and another one in the right side. In the right side menu you can see there is a drop-down menu.Here when you will hover on the parent menu drop down box will come but there is one problem with this. When you will hover on the parent menu the drop-down menu can be seen but with the arrow on the right side. So here I want there should be no arrow images on the sub menus when I will make hover on the parent menu. Can someone tell me how to do this?
I am really stocked with this point.
Define your child a span background-image:none;
Add this css
#access #header-right-menu ul li:hover ul a span {
background-image: none;
}
I think you should add !important after background-image: none;
#access #header-right-menu ul ul li a span {
background-image: none !important;
}
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;
}