How to fix these issues in CSS in navigation menu?

242 Views Asked by At

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

  1. 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

  2. When I open the drop-down menu, part of navigation is jumping to the right. How to avoid this jump?

  3. 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.

  4. The same issue with all navigation. How to make a position for navigation in one place for any desktop size?

  5. 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.

  6. How to make margin for below the main button? :) I wrote margin-top: 20px; but it doesn't work.

  7. How to make the background of all navigation without margin?

What's wrong? How can I fix it? Please, help.

1

There are 1 best solutions below

0
On

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