Dropdown menu on mouse hover with CSS

Question

I have a very annoying problem, and it is bugging me for some time now, and I've tried everything to fix it, but I simply fail at doing so.

The problem is: I have a navigation which consists of many <div> elements inside <div> , which is inside another <div> and so on.

Here is the code for my navigation:

    <div class="nav-laptop"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' ORDER BY Proizvodac Asc;">Laptop</a><br />

  <div class="nav-bot"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' AND Proizvodac='Acer' ORDER BY Proizvodac ASC;">Acer</a></div>
  <br />
  <div class="nav-bot"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' AND Proizvodac='Apple' ORDER BY Proizvodac ASC;">Apple</a></div>
  <br />
  <div class="nav-bot"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' AND Proizvodac='Asus' ORDER BY Proizvodac ASC;">Asus</a></div>
  <br />
  <div class="nav-bot"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' AND Proizvodac='Dell' ORDER BY Proizvodac ASC;">Dell</a></div>
  <br />
  <div class="nav-bot"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' AND Proizvodac='HP' ORDER BY Proizvodac ASC;">HP</a></div>
  <br />
  <div class="nav-bot"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' AND Proizvodac='Lenovo' ORDER BY Proizvodac ASC;">Lenovo</a></div>
  <br />
  <div class="nav-bot"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' AND Proizvodac='Toshiba' ORDER BY Proizvodac ASC;">Toshiba</a></div>
</div>

I will attach a picture to give you a better view on what I have:

Now here is my CSS for those navigation <div> s:

    .nav-laptop, .nav-pc, .nav-tablet, .nav-periferije, .nav-dijelovi, .nav-audio, .nav-mobitel, .nav-monitor, .nav-televizor, .nav-usluge {
    transition: height 0.5s;
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    -o-transition: height 0.5s;
    -webkit-transition: height 0.5s;
    height: 20px;
    width: 72px;
    border-radius: 8px 8px 0px 0px;
    -moz-border-radius: 8px 8px 0px 0px;
    -ms-border-radius: 8px 8px 0px 0px;
    -o-border-radius: 8px 8px 0px 0px;
    -webkit-border-radius: 8px 8px 0px 0px;
    float: left;
    text-align: center;
    vertical-align: middle;
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: #F00;
    font-size: 1.05em;
    margin-top: 6px;
    overflow: hidden;
}

And here is :hover version for laptop nav only:

    .nav-laptop:hover {
    height: 186px;
    width: 72px;
    border-radius: 8px 8px 0px 0px;
    -moz-border-radius: 8px 8px 0px 0px;
    -ms-border-radius: 8px 8px 0px 0px;
    -o-border-radius: 8px 8px 0px 0px;
    -webkit-border-radius: 8px 8px 0px 0px;
    float: left;
    text-align: center;
    vertical-align: middle;
    font-size: 1.05em;
    margin-top: 6px;
}

Now this all navigation works awesome and beautiful and everything, but the problem is, whenever I hover with my mouse over any category, when the division drops down, it distorts all the content below, and makes a huge mess, and once I move my mouse, it all gets back to normal. How should I go about it? This may be very inefficient way to do it, and I'm open to all suggestions, and looking forward to learning more from you people.

Here's a normal content:

And here's distorted content due to hovering onto navigation:

Answer 1

You are floating the "dropdown" parts of the menu. And if all the rest of the content are also floating, all the things are in the same flow. Thus they get all "weird", even though this is not at all weird but rather exactly the expected behavior.

Instead, you should be using absolute positioning for the parts that you want to overlay on the other content. Absolute positioning removes the element from the document flow, and thus is does not affect the layout of anything else other than itself.

So, make the "dropdown" parts position: absolute and the main menu items position: relative , for example. This way the "dropdown" parts will get positioned relative to the main menu items.

Take a look at eg http://www.w3schools.com/css/css_positioning.asp or http://learnlayout.com for basic CSS layout tutorials.

Simple example of a hover menu:

 ul, li { list-style: none; padding: 0; margin: 0; } li { display: inline-block; width: 100px; background: #ddd; } ul li { position: relative; } li ul { position: absolute; display: none; } li:hover ul { display: block; } li ul li { background: #eee } 

 <ul> <li> <span>First</span> <ul> <li>First</li> <li>Second</li> </ul> </li> <li> <span>Second</span> <ul> <li>First</li> <li>Second</li> </ul> </li> </ul> <div class="content"> <p>Content content content content content content content<br>content content content content content content...</p> <p>Content content content content content content content<br>content content content content content content...</p> </div> 

Answer 2

I would play around with position:absolute; and z-index .

A normal way to do this is to use <ul> lists.

<ul>
    <li>
        <a href="#">Hover</a>
        <ul>
            <li>asdasd</li>
        </ul>
    </li>
</ul>

css:

ul li:hover ul{display:block;}
/* or ul li a + ul{display:block} */

ul li > a{position:relative;}
ul ul{display:absolute;display:none;}

Offtopic:

proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' AND Proizvodac='Toshiba' ORDER BY Proizvodac ASC;

Are you allowing a script to execute sql through a GET parameter? :O