I'm having what I believe to be a simple problem but I'm not sure how to fix it.
Basically, while hovering over links on the menu, the drop-down menus "go behind" the other elements on my page. I've tried implementing float css but it doesn't seem to work.
If you visit my site just for a second and hover on the navigation menu you'll see what I mean.
How do you fix something like this?
Will appreciate any help.
Thanks.
In your css, set your z-index to a really big number like 9005, so it's above everything else on the page.
Like: z-index: 9005;
add z-index:9999; to the #page-bar css
it solves the problem (tested in chrome)
Related
I got one really annoying bug, that I couldn't find an answer for. I have a menu slider that has a drop-down menu attached to each item. The slider itself is custom made, but the drop-downs functionality is provided by UI-Bootstrap.
Here is a simple fiddle, that I've made to get more about the problem:
https://jsfiddle.net/Lus92rqm/7/
If you can see in the CSS tab, I've added some comments about where I think the problem comes from and a possible solution that I ran into. So basically, all the thing is not working because of the overflow: hidden style attached to the .menu-slider-wrapper. I needed it though, because I want to hide all the items that are not in the visible area - the 570px width of this container.
I also tried to add position: fixed to the .dropdown-menu class and thought it was working perfectly, until I tried to scroll the page down... The shown menu is scrolling with the page which is not the behavior I'm searching for.
One more thing is that I definitely need a position: relative attached to .menu-slider class, because in that way I can move the slider from left to right and opposite - changing the left property of it.
Sooo, anyone with any ideas how I can manage to workout this thing?
Thanks! :)
You need to use dropdown-append-to-body, see the example on the docs page.
Am using the below drop down for my site header menu.
https://www.script-tutorials.com/demos/364/index.html
In this, When mouse hovering below spaces of the menu also Dropdown menu appearing.
I used this code in my site. I wasn't able to find out whats the solution.
I tried z-indexing and position as relative but still it appears. please guide me.
Thanks.
yes z-index but it a minus value like z-index:-100;
I checked the plugin the problem is your action happens when you hover li and the sub-menu is present inside li. So that is the reason whatever element that comes inside of li will be part of li.
You can do 1 thing in this scenario:
Best Solution:
.submenu{height:0;}
Let me know if this works!!
The picture shows the problem area I have with my website. That little black line protrudes out from behind my dropdown menu and in Firefox the word resources will appear underneath home, but it IE and Chrome the menu looks as it should, except for that little black line that sticks out. The template I'm using is a modified Dreamweaver template. It didn't used to do this, but I breaked it :/
edit: all fixed.
You need to clear your floats.
If you add overflow: hidden to your top menu UL and the sidebar div, you will notice the HR moves down.
Edit
Just an FYI, there is probably a better way to clear your floats then just adding overflow: hidden everywhere like I showed in this answer. It really depends on how you are laying out the page, and I don't know what your plans are. Therefore, here are some links below that explain what floats are, how they work, and how to clear them, which should give you a better understanding.
http://www.quirksmode.org/css/clearing.html
http://css-tricks.com/all-about-floats/
I've been working on a new version of my website, and to make it cleaner I installed a jQuery Dropdown menu, so the navigation looks cleaner.
The thing is, the links appear underneath the following content div, and I'm not sure how I can fix this.. I've looked into the z-index property, and I tried setting the position and z-index of both divs, but to no avail, they stay improperly stacked.
Here's the link of the page, so you can see what I mean :
http://minecrafteurope.com/?theme=compositio
Any idea on how I can fix this ?
Thanks !
Mark
Remove overflow: hidden; from .menu
I have a css menu, pretty standard functionality. I have implemented it within a Netsuite site im working on.
The menu is visible here:
http://www.gardensandhomesdirect.co.uk
Its the one just under the header.
Ive been trying to get the only part of the menu with dropdowns to come left instead of right when hovered so that it is not being 'hidden' underneath the wrapper.
What is the best way to get this menu showing correctly? I there a way i can get it hover over the top of everything else instead of underneath like now?
Any help appreciated.
-Wayne
You need to have overflow: visible on #outerwrapper if you want to show anything outside that div.
Alin