The simplest way to add a dropdown menu to the website

11/09/2018 09:16:00 PM 0

*NOTE: This blog is not for commercial purpose.We share knowledge free of cost.

Dropdown menu is very important part of a blog. It give better look to the blog.And it provide easiness to the subscriber to open and watch the posts on that blog. I made this tutorial because many new blogger may have to face some problems in doing so. So, keep learning and if you have any query, ask me in the comment section
We will discuss a simplest way to add a dropdown menu to the blog.

A simple way to create dropdown to the blog header :

1. Go to blogger.com

2. Select the blog from upper-left corner that you would lie to edit

3 Click on "Layout"

4. In the Cross-column click on "add a gadget".

5. Select the "HTML/JAVA SCRIPT" gadget from the gadget list.

6. Copy the following text codes and paste in the shown box adn click "save".

<style>

/* Main */
#menu {
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;  
    background-color: #111;
    background-image: linear-gradient(#444, #111);
    border-radius: 50px;
    box-shadow: 0 2px 1px #9c9c9c;
}

#menu li {
    float: left;
    padding: 0 0 10px 0;
    position: relative;
}

#menu a {
    float: left;
    height: 25px;
    padding: 0 25px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#menu li:hover > a {
    color: #fafafa;
}

*html #menu li a:hover { /* IE6 */
    color: #fafafa;
}

#menu li:hover > ul {
    display: block;
}

/* Sub-menu */
#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;    
    background-color: #444;   
    background-image: linear-gradient(#444, #111);    
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li {
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    box-shadow: 0 1px 0 #111111, 
                0 2px 0 #777777;
}

#menu ul li:last-child { 
    box-shadow: none;    
}

#menu ul a {    
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a { /* IE6 */   
    height: 10px;
    width: 150px;
}

*:first-child+html #menu ul a { /* IE7 */    
    height: 10px;
    width: 150px;
}

#menu ul a:hover {
    background-color: #0186ba;
    background-image: linear-gradient(#04acec, #0186ba);
}

#menu ul li:first-child a {
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after {
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after {
    border-bottom-color: #04acec; 
}

#menu ul li:last-child a {
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

</style>
<body>

<ul id="menu">
<li><a href="#">Home</a></li>
<li>
        <a href="#">Categories</a>
        <ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>

7. Open the preview.
8. You have all done.

*NOTE: This blog is not for commercial purpose.We share knowledge free of cost.

The simplest way to add a dropdown menu to the website

A simple way to create dropdown to the blog header :

Post a Comment

Latest

Featured

Digital Citizenship and Media Literacy in the Age of Social Media6/26/2024 10:01:00 PM

Popular

Pharmacognosy II Notes B Pharmacy 5th Semester PDF Download5/08/2021 09:54:00 PM

To prepare and submit Sulphanilamide from acetanilide - Practical Medicinal Chemistry5/05/2021 10:24:00 AM

How to add Floating and Fade in effects in blogger post/page/theme/template5/15/2021 10:08:00 AM

Unit II, BP504T Pharmacognosy and Phytochemistry II - Notes Handwritten 5/01/2021 04:24:00 PM

Unit III, BP504T Pharmacognosy and Phytochemistry II - Notes Handwritten 5/01/2021 06:11:00 PM

Medicinal Chemistry-II PV (PeeVee) B.Pharm 5th sem Free PDF Download Ebook9/25/2021 07:00:00 PM

Unit IV, BP504T Pharmacognosy and Phytochemistry II - Notes Handwritten 5/01/2021 06:29:00 PM

Medicinal Chemistry-I PV (PeeVee) B.Pharm 4th sem Free PDF Download Ebook9/25/2021 07:00:00 PM

Unit I, BP504T Pharmacognosy and Phytochemistry II - Notes Handwritten 5/01/2021 03:07:00 PM

Instrumental Method of Analysis Thakur Publication B.Pharm 7th semester PDF Download Free Ebook9/24/2021 05:18:00 PM

Labels

Footer Copyright

Contact Form

The simplest way to add a dropdown menu to the website

A simple way to create dropdown to the blog header :

You may like these posts

Post a Comment

Contact Form