How to Create Drop Down Menu in HTML CSS style

Post By: Hanan Mannan
Contact Number: Pak (+92)-321-59-95-634
-------------------------------------------------------

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.

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

How to Create Drop Down Menu in HTML [hmragroupengineers.blogspot.com]

 

Drop Down Menu in css html hmragroupengineers.blogspot.com]

if you have any question regarding this article.feel free to comment on us.we will help you ASAP.