Make dropdown menu from existing css menu

Question

ul li ul.dropdown{
	min-width: 125px;
    background: #f2f2f2;
    display: none;
    position: absolute;
    z-index: 999;
    left: 0;
}
ul li:hover ul.dropdown{
    display: block;
}
ul li ul.dropdown li{
	display: block;
    }

<div class="navigation">
 


	<ul>
	<li><a href = 'index.html'>Home</a></li>
	<li><a href = 'media.html'>Media Design</a></li>
	<li><a href = 'innovatie.html'>Innovatieroutes</a></li>
	<li><a href = 'info.html'>Informatie</a></li>
	        <ul class="dropdown">
            <li><a href="#">Open dagen</a></li>
            <li><a href="#">Beroepen</a></li>
            <li><a href="#">Studie</a></li>
			</ul>
	<li><a href = 'contact.html'>Contact</a></li>
</ul>

I'm trying to make a CSS menu with a dropdown, but somehow I am not able to let to menu drop down when I hover the mouse over the tab "Informatie", the sub menus will just display after "Informatie". Maybe some of you guys are able to help me with my menu.

Xahed Kamal · Accepted Answer · 2015-10-16 18:24:40Z

1

Fixed your code

ul li ul.dropdown{
	min-width: 125px;
    background: #f2f2f2;
    display: none;
    position: absolute;
    z-index: 999;
    left: 0;
}
ul li:hover ul.dropdown{
    display: block;
}
ul li ul.dropdown li{
	display: block;
    }

<div class="navigation">
 


	<ul>
	<li><a href = 'index.html'>Home</a></li>
	<li><a href = 'media.html'>Media Design</a></li>
	<li><a href = 'innovatie.html'>Innovatieroutes</a>
	<li><a href = 'info.html'>Informatie</a>
	        <ul class="dropdown">
            <li><a href="#">Open dagen</a></li>
            <li><a href="#">Beroepen</a></li>
            <li><a href="#">Studie</a></li>
			</ul>
     </li>
	<li><a href = 'contact.html'>Contact</a></li>
</ul>

Your mistake was, you wrote the ul outside li's closing tag </li>. You've to put ul's code right after ending of a tag's closing tag </a>

edited Oct 16, 2015 at 18:24

answered Oct 16, 2015 at 8:28

Xahed Kamal

2,2231 gold badge23 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

SmashingJummy Over a year ago

Hi Xahed, somehow when I hover over the tab information, my dropdown won't show up.

Xahed Kamal Over a year ago

I see its working fine on my answer. If you hover on Information, you see the submenu

showdev Over a year ago

A little explanation would be helpful. What was the problem and how does your answer solve it?

Xahed Kamal Over a year ago

added explanation at the end of answer

Jacob Parker · Accepted Answer · 2015-10-16 08:27:44Z

1

You need to put the ul inside the li.

answered Oct 16, 2015 at 8:27

Jacob Parker

1117 bronze badges

Collectives™ on Stack Overflow

Make dropdown menu from existing css menu

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related