CODEWITHSUNDEEP
jquerydrop-down-menu
epm
epm

Reputation: 101

Jquery drop down menu - not working

I'm working on this jQuery drop down menu and the code is not working. I think it may have something to do with the css property .dropdown ul {display:none }

I'm not very good with jQuery (yet)...Any suggestions?

http://codepen.io/ElaineM/pen/Jokxb

Upvotes: 1

Views: 702

Answers (2)

Taimour Tanveer
Taimour Tanveer

Reputation: 408

Check this out http://codepen.io/anon/pen/qtaLi Is it what you wanted? Your HTML should be like 

 <li><a href="#">Item 1</a> 
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
     </ul>
</li>

And CSS:

.dropdown li:hover > ul{
  display:block;
}

Upvotes: 0

lebolo
lebolo

Reputation: 2160

I'm not sure which dropdown library you're using, but it seems that your HTML is wrong.

You have:

<li><a href="#">Item 2</a></li>
<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

Try this instead:

<li>
  <a href="#">Item 1  
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
    </ul>
  </a>
</li>

Upvotes: 1

Related Questions