I have tried to post code here recently, but it is working for some code posted only. So I would like to see my site dropdown not show. In this site, the drop-down Services can't display its sub-menu. Please take a look at my site and guide me how to fix the dropdown menu?
I tried to set z-index with various value but it's not working.
You need to remove overflow: hidden; from .navbar-default. The submenu ul is overflowing the div.navbar-default, but you are hiding it.
Related
I'm building a website on the Github page.
I started to add a drop-down menu on the header.
But, if I hover on button, the menu appears, however, I cannot click or hover on the 3rd and 4th link.
The link to code and website are written below.
Website:
css:
Thank you
I recommend to add the actual code next time instead of providing links but the issue for you in the z-indexing
as an example you can see if you add:
.header {z-index: 2}
.main {z-index: 1}
You will see that it is what you are expecting...also you might want to fix the .dropdown-content margin so you wont have a slight spacing break.
I am working on a project and I am assigned to show a drop-down menu for the website , I mean Drop down menu but I dont know what am I doing wrong here. Can anyone help me out ?
enter image description here
I think the issue is with overflow hidden for this div ".content, .container. "
removing this will show the full dropdown but make sure this won't make any other issues for your website.
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!!
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