How to Create Mouse Over Drop Down in HTML


HTML stands for hypertext markup language. You can design a very cool website by just using HTML and CSS.

HTML5 and CSS3 has included some powerful inbuilt features, Which is pretty hard to write the same code in JAVA SCRIPT !

So, you might have seen some websites having drop down features in there navigation bar, have you ever thought that how they're doing this.

Also See :- How to Hack Facebook Account

Well the answers is they're doing it by Simply writting CSS and HTML Code !

In the above snap shot I've shown 5 Menu's in which Menu 2 has drop down of 4 Sub Menu's on mouse over event. Now, you can create this type of simple drop down by using HTML tags i.e <ul> and <li> .
  1. <ul> stands for unordered list
  2. <li> stands for list items 

Also See :- How to Hack Wifi Password in 2 Minutes 

Simple Drop Down Using HTML and CSS !

The above is HTML Code in which I've simply used <ul> and <li> tag, Now let's see CSS Code.


The Output of the above code will look a like this,

You can set your own background and font color in the "Link Appearance" part of code in CSS.

But, Do remember one thing you need to add CSS Code inside <head> and <style> tag. look at the example,

                           CSS CODE HERE !!!

Also See :-


  1. thank for the post. :) Good post.
    is very useful and can be understood
    obat jerawat

    1. Hello Srisuherman,
      Pleasure is mine. Glad to help you :)
      Keep Visiting !

  2. Optimus. I need and automatic dropdown to convert a bootstrap navbar from onclick to hover.

  3. Hello Sabun,

    Thanks for stopping by. Sabun thanks for your kind words. I'm glad to liked this post.

    Sabun I also recommend you to read the below mentioned post to learn awesome coding stuff.

    Hope this helps :)

    Keep Visiting !