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:

Sure thing. manjaric-dorian.ssdr.avalon.hr/Zavrsni/index.php — BloodDrunk
– BloodDrunk, Commented Jan 2, 2016 at 18:50
FWIW, you dont need any of those vendor prefixes anymore - compatibility for border-radius and transition is now there on every browser. — serraosays
– serraosays, Commented Jan 2, 2016 at 20:13

score 3 · Accepted Answer · 2016-01-02 19:07:37Z

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 e.g. 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>

Thank you sir, this fixed my problem! It now works as intended.
@BloodDrunk Great, please accept the answer so that your question does not remain unanswered in the system. Also, what comes to your insecure database query, you might want to google something like "PHP safe MySQL query" or something similar to learn more about it, let's try to keep one question for one topic.

Mr Lister · Accepted Answer · 2016-01-04 21:34:56Z

1

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

edited Jan 4, 2016 at 21:34

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Jan 2, 2016 at 18:51

Niclas Larsson

1,3178 silver badges13 bronze badges

5 Comments

dakab Over a year ago

How would you play around with position and z-index?

BloodDrunk Over a year ago

Yes, I am. I've heard that not the safest way to do it. Actually it's not safe at all, and should be avoided as far as I've been told, but since this is for school project, it is okay to do it. :) POST is the way, right?

Niclas Larsson Over a year ago

Nope. You should do something like giveme.php?query=query2. And on the server-side if( $_GET['query'] == 'query2' ) return something;. What whould happen if I requested proizvodi.php?upit=DROP TABLE Proizvodi

BloodDrunk Over a year ago

You would destroy my entire table. I did not really understand this second part, can you give me a step by step to avoid that vurnerability? I'm after all just a begginer in this, and I want to learn proper ways of doing it. I have made a backup of my table just in case someone is as evil to destroy it..

Lee Taylor Over a year ago

@BloodDrunk Just Google "SQL Injection for beginners"

Collectives™ on Stack Overflow

Dropdown menu on mouse hover with CSS

2 Answers 2

3 Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Related