How to Create Drop Down Menu in HTML CSS style

How to Create Drop Down Menu in HTML

we learn today “How to Create Drop Down Menu in HTML“. Navigation is the most important factor of any user friendly website.

We use navigation to navigate or access website different parts.It must be user friendly and easy to navigate in order to make user experience good.

It is very easy and simple.You just need to make a css file and unordered list of pages to do so. you may also interested to read How to Make Fixed Navigation Bar in HTML and CSS

 

 

 

here is the css for drop down menu.you can change it on your requirements.

 

<style type=text/css>#Menu,
#Menu ul {
    list-style: none;
}
#Menu {
    float: left;
}
#Menu > li {
    float: left;
}
#Menu li a {
display: block;
background: #CEE3F6;

    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;
    
}
#Menu > li:hover > a {
    background: #f09d28;
    color: #000;}
#Menu ul {
    position: absolute;
    display: none;
    background: #f09d28
z-index: 999;
}
#Menu ul li a {
    width: 80px;
}
#Menu li:hover ul {
background: #ffc97c;
   display: block;
}
</style>

Here is the pages list of navigation

<ul id=”Menu”>
<li><a href=”#”>Dashboard</a></li>
<li>
<a href=”#”>Pages</a>
<ul>
<li><a href=”#”>Create Page</a></li>
</ul>
</li>
<li>
<a href=”#”>Menu</a>
<ul>
<li><a href=”#”>Create Menu</a></li>
</ul>
</li>

<li><a href=”#”>Logout</a></li>
</ul>

It would be look like this

I hope this article is helpful. Feel free to share your views and feedback. if you have any question regarding this article. feel free to comment on us.we will help you ASAP.

you may also like to read How to create Table in HTML – Table Alignment in HTML.