Drop down menu doesn’t work

2 Views

I made a wordpress template with a simple CSS drop down menu. The code I used is a code that I used regularly, but this time when you hover on the button and than wants to hover on the drop down menu that appears, the drop down menu will disappear.

Does somebody know how I can solve this problem and what’s wrong?

Read More

Link to template: http://bit.ly/1Ivcg2U 

#navigation ul {
	list-style: none;
	width: 800px;
	height: 40px;
	padding: 0;
	margin: 0 auto;
}

#navigation li {
	float: left;
	position: relative;
	z-index: 500;
	display: block;
	text-align: center;
	margin: 0px 40px;
	padding: 5px;
}

#navigation li ul {
    display: none;
    position: absolute;
  	max-width: 140px;
  	top: 40px;
	left: -20px;
}

ul#categories li {
	width: 100%;
 	float: left;
 	margin: 0;
 	background: #fff;
}

ul#categories a {
	padding: 10px;
	width: 200px;
}

ul#categories li:hover{
 	background: #000;
}

ul#navigation li:hover > ul,
#navigation ul li:hover > ul {
        display: block; /* display the dropdown */
}


#navigation a {
	font-family: 'Montserrat';
	color: #474747;
	text-decoration: none;
	font-weight: 300;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 10px;
}

li a:hover {
	color: #000;
	font-family: 'Montserrat';
}

ul#categories li a:hover {
	color: #fff;
}
<div id="bar">
<div id="navigation">
  <ul id="nav">
    <li><a href="http://todaysbeauty.nl">Home</a></li>
    <li>
      <a href="#">Categorieën</a>
      <ul id="categories">
        <li><a href="/category/travel/">travel</a></li>
        <li><a href="/category/beauty/">Beauty</a></li>
        <li><a href="/category/fashion/">Fashion</a></li>
        <li><a href="/category/lifestyle/">Lifestyle</a></li>
        <li><a href="/category/persoonlijk/">Persoonlijk</a></li>
        <div class="clear"></div>
      </ul>
    </li>
    <li>
      <a href="/over-mij" class="selected">Over mij</a>
      <div class="clear"></div>
    </li>
    <li>
      <a href="/contact">Contact</a>	
      <div class="clear"></div>
    </li>
    <li>
      <a href="/zakelijk" class="selected">Zakelijk</a>
      <div class="clear"></div>
    </li>
  </ul>
</div>
Post Views: 2

Related posts

1 comment

  1. The problem is that your 2nd level menu is too low from your top level :

    #navigation li ul {
    display: none;
    position: absolute;
    max-width: 140px;
    top: 40px;/* Change this to a lower value so it overlaps or doesn't leave a gap with menu above*/
    left: -20px;
}

    When the cursor moves to the gap, it’s no longer at the ‘hover’ state, so the dropdown disappears. Reducing the gap will fix the problem.

Comments are closed.