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/ln3mvmWhen 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 onli: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:
Common example:
https://codepen.io/bear-wolf/pen/YRvoWO?editors=1100#0