drop down menu pushing other links down when hovering over

Question

I am currently trying to create a drop-down menu in CSS.

 .navbar { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: #282828; margin-bottom: 25px; color: white; text-align: center; }.navbar ul { margin: 0px; padding: 0px; list-style: none; }.navbar ul li { display: inline-block; /*float: left;*/ color: #abcbe3; width: 200px; height: 40px line-height: 40px; color: white; }.navbar ul li a { display: inline-block; text-decoration: none; color: white; line-height: 40px; font-size: 25px; }.navbar ul li a:hover { color: #abcbe3; }.navbar ul li ul li { display: none; background-color: #282828; }.navbar ul li:hover ul li { display: block; }

 <div class="navbar"> <ul> <li><a href="#home">Home</a></li> <.--Dropdown Navigation Bar for Products--> <li><a>Products</a> <ul> <li><a href="pages/cpu.html">Processors</a></li> <li><a href="pages/cpu.html">Graphics Cards</a></li> <li><a href="pages/cpu.html">Motherboards</a></li> <li><a href="pages/cpu.html">Power</a></li> </ul> </li> <li><a href="pages/register.php">Login/Reigster</a></li> <li><a href="#home">Contact</a></li> <li><a href="#home">FAQ</a></li> </ul> </div>

The problem which I am having is when I hover over the drop-down menu it pushes the other links down.

I think it has something to do with how I am displaying the elements. However, I need the navigation bar centred in the middle of the.navbar class.

Here is the problem.

Thanks.

Answer 1

Add position:absolute to the <ul> that is showing on hover:) After doing that, this list will not be in the regular page flow and it will not push the rest of the elements down:)

https://jsfiddle.net/f84xwsd5/

Answer 2

Since .navbar ul li display is inline-block, you can add the property vertical-align: top to it and it will be fixed.

Something like that maybe?

 .navbar { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: #282828; margin-bottom: 25px; color: white; text-align: center; }.navbar ul { margin: 0px; padding: 0px; list-style: none; }.navbar ul li { display: inline-block; /*float: left;*/ color: #abcbe3; width: 200px; height: 40px line-height: 40px; color: white; vertical-align: top; }.navbar ul li a { display: inline-block; text-decoration: none; color: white; line-height: 40px; font-size: 25px; }.navbar ul li a:hover { color: #abcbe3; }.navbar ul li ul li { display: none; background-color: #282828; }.navbar ul li:hover ul li { display: block; }

 <div class="navbar"> <ul> <li><a href="#home">Home</a></li> <.--Dropdown Navigation Bar for Products--> <li><a>Products</a> <ul> <li><a href="pages/cpu.html">Processors</a></li> <li><a href="pages/cpu.html">Graphics Cards</a></li> <li><a href="pages/cpu.html">Motherboards</a></li> <li><a href="pages/cpu.html">Power</a></li> </ul> </li> <li><a href="pages/register.php">Login/Reigster</a></li> <li><a href="#home">Contact</a></li> <li><a href="#home">FAQ</a></li> </ul> </div>