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 { }
Related
My dropdown menu made using bootstrap is hiding behind the slider that I made. I want it to show in front.
I have tried using:
z-index
overflow:visible
position:relative
according to the various solutions posted online under a similar problem. I have found no success with any of the solutions I tried.
I have a JSFiddle here https://jsfiddle.net/8wq0ptrw/
remove the overflow:hidden from your nav-bar class. I hope this will help you.
.nav-bar {
list-style-type: none;
margin: 0;
padding: 0;
}
You can see it by removing display: none; from .navbar and .collapse.
I believe bootstrap provides a hamburger menu icon that you need to implement where you click it to remove the display: none; on these elements and show the the dropdown menu.
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'm trying to make a sidebar that only appears when a triangle is clicked and I've gotten to the point where you click the triangle and it appears using:
sidebar {
display: none;
}
a:active + .sidebar {
display: block;
}
However as soon as you let go it disappears. How can I make it stay visible until you click the triangle for a second time? Below is the link to full code.
http://jsfiddle.net/Vqmaw/
You will have to use JS to toggle the visibility of the sidebar - a CSS solution is not possible.
$('a').click(function () {
$('.sidebar').toggle();
});
You will also have to set display: none for the .sidebar element. I have updated your fiddle - http://jsfiddle.net/teddyrised/Vqmaw/3783/
Your modified fiddle has a few issues - you are using MooTools instead of jQuery, and your class selector is improperly formatted.
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 have a blog which is hosted at blogger.google.com.Recently i encountered a problem with the dropdown menu called "Categories". The children elements(sub menu items) auto disappear just when i move my cursor over them. I have tried the other answers to similar questions like this but they were not of great help in my case. I just want the dropdown elements to remain at their places when i move my mouse over them so that i can select them.
Can anyone please check the problem?
My website link is http://www.techtreck.in
Try to go to the Categories tab and you will see what exactly i am saying.
Many thanx in advance..
..hope to get a reply soon !!
There is a hidden gap between you main menu and sub menu.Inspecting you css with firebug, I found this in your code :
#top li ul {
background: none repeat scroll 0 0 #111111;
margin-top: 20px;
padding: 5px 0 3px;
width: 187px;
}
Now margin-top: 20px; is too far from main menu. So change it to:
#top li ul {
background: none repeat scroll 0 0 #111111;
margin-top: 14px;
padding: 5px 0 3px;
width: 187px;
}
And it will work fine.
If you move your mouse quick enough it works :P
But it looks like it is due to the gap between the categories and the actual drop down, when you move your mouse down, it goes in the gap so it no longer triggers the onmouseover event, hiding the drop down.
You should move the position of the dropdown up higher, so that it is perfectly align with the categories button.
The gap between the main menu and the submenu is indeed what causes the problem. #kakarott solutions is also what i would do, it is by far the easiest solution. If however the gap is there by design, you could still achieve the desired result by playing with your css. Something like this should do the trick:
remove the background color of the sub ul to make it transparent
change the margins of the sub ul into paddings
change the margins of the sub li into padding as well
set the background color that was on the sub ul on the sub li
add the padding that was on the sub ul to the corresponding padding of the sub li
(I did not test this, but it should do the trick i think, if i did not forget anything)
What this does is make the nested ul transparent and overlapping the parent li. This way the hover state remains triggered when you move the mouse onto the submenu. Visualy there should be no changes.