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.
Related
Please help me to fix these issues in CSS (without JS). I am studying and can't find answers to some problems with navigation. Please don't blame me :)
I created navigation and first screen for the site but stumbled with these questions. Here is a screenshot with all things: https://prnt.sc/ln3ytx and my pen on Codepen: https://codepen.io/a007mr/pen/mQKyYM
How to make background hover for all line?
My code is .menu-item ul a:hover {color: #000000; background: #d2d4d6;
but it doesn't work as well. How to make it like this: https://prnt.sc/ln3mvm
When I open the drop-down menu, part of navigation is jumping to the right. How to avoid this jump?
How to make navigation button in the corner for any desktop size? I am using
margin: 15px;
but it doesn't work well when I will make more screen resolution. It is not responsive. The button will not be in the right corner if I choose the larger desktop.
The same issue with all navigation. How to make a position for navigation
in one place for any desktop size?
How to open dropdown through click (not hover) and hide drop-down menu only through click? My code li:hover > ul. If I change on li:active > ul then drop-down menu appears only when I hold the button. How to make like *click button -> we show drop-down menu and can choose something -> *other click on "Learn more" and menu is hidden.
How to make margin for below the main button? :)
I wrote margin-top: 20px; but it doesn't work.
How to make the background of all navigation without margin?
What's wrong? How can I fix it? Please, help.
I will be try give you some reply:
How to make background hover for all line? My code is .menu-item ul a:hover {color: #000000; background: #d2d4d6; but it doesn't work as well. How to make it like this: https://prnt.sc/ln3mvm
1) Try uses block elements. Remember that css property
display: block; makes your element a block element.
When I open the drop-down menu, part of navigation is jumping to the right. How to avoid this jump?
2) Your items in the list must be made as blocks and it item (li>a) need to be
increased.
Common example:
https://codepen.io/bear-wolf/pen/YRvoWO?editors=1100#0
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.
I have a basic Bootstrap navbar here
What I want to do is this:
(Navbar)
-----Logo------Item----Dropdown----------------------------Login/Signup-----
(Dropdown menu)
-----Sub-item----Sub-item----Sub-item---------------------------------------
On hover I want to make the dropdown menu show full width right underneath the navbar. The hover event isn't what I'm having trouble with, I'm having trouble positioning it correctly to be full 100% width.
Update
I see that bootstrap adds position: relative to .nav > li, when I take that off in Chrome developer tools it goes full width off the screen starting at the position of the navbar element.
Solution
Working Example
The solution to my example was overriding Bootstrap's .nav>li to position: static.
I now know that this is called a mega menu :)
I dont know exactly what you need if my thought is right you want this link , check with the bootstrap mega menu
click here
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'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)