Member Avatar for ben.matthews18

Hi could anyone help me with creating a really simple drop down css menu?

For example 1 main link and then when you hover over it a list of 3 appear below it.

I'm struggling to grasp the concept as ones i've seen around are really complicated.

Many thanks

  • 4 Contributors
  • 4 Replies
  • 132 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by saliha
Member Avatar for scrappedcola

Here is a very basic one:

<ul>
  <li>
     <a href='javascript:void(0)' id='firstLink'> 
         Link 1
         <ul>
            <li>Link2</li>
            <li>Link 3</li>
         </ul>
     </a>
   </li>
</ul>
<style>
li a ul{
   display:none;
}
li a{
   display:inline-block;
}
li a:hover ul
{
    display:block;
}
</style>

If you want to see it in action here is the jsFiddle for it: http://jsfiddle.net/pLKSw/

Edited by scrappedcola because: n/a
Member Avatar for ben.matthews18

thanks so much that's really helpful

Member Avatar for srajanbill

thanks for your valuable input

Member Avatar for saliha

Thanks for sharing the code.I am also new in it.It is helping me.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.