OscarminiOscarmini
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
Facebook Twitter Instagram
  • Advertise With Us
  • Newsletter
Facebook Twitter Instagram
Oscarmini Oscarmini
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
OscarminiOscarmini
Home»Blogging»How to make a Drop Menu for your WordPress or Blogger Blog
Blogging

How to make a Drop Menu for your WordPress or Blogger Blog

Oscar FrankBy Oscar Frank3 Mins Read
Share
Facebook Twitter LinkedIn WhatsApp Pinterest Email

This tutorial would guide you through how to add a Drop Down Menu to your blog (Blogger or WordPress) or other websites just like the one on this blog shown below. It would involve a little knowledge of CSS and HTML.

drop menu

Adding Drop Down Menu to Blogger

How to add a drop down Menu to your blogger blog.

  1. Simply login to your blogger Dashboard.
  2. Proceed to Template > Edit HTML > Proceed . Then tick the Expand Widget Templates check box.
  3. Search for /* Posts , the in the line above it, copy and paste the below code.

    /* Pages Dropmenu */
    #dropmenu, #dropmenu ul {
    list-style-type: none;
    margin: 0px;
    display: block;
    width: 70%;
    height: auto;
    padding: 0px;
    float: left;
    }
    #dropmenu li {
    list-style-type: none;
    text-align: center;
    width: auto;
    display: block;
    float: left;
    height: auto;
    padding: 0px;
    list-style-image: none;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #3A1110;
    margin: 0px;
    }
    #dropmenu li li {
    margin: 0px;
    padding: 0px;
    float: left;
    list-style-type: none;
    width: 10em;
    text-align: left;
    background-image: none;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-bottom-color: #292929;
    }
    #dropmenu li li:hover {
    background-image: none;
    }
    #dropmenu li a {
    list-style-type: none;
    display: block;
    width: auto;
    text-decoration: none;
    font-size: 11px;
    height: auto;
    color: #FFFFFF;
    text-transform: uppercase;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    margin: 0px;
    font-weight: bold;
    text-shadow: 0px 1px 1px #000;
    padding-top: 12px;
    padding-right: 15px;
    padding-bottom: 12px;
    padding-left: 15px;
    }
    #dropmenu li a:hover, #dropmenu li#home a, #dropmenu li#home a:hover, #dropmenu li.current_page_item a, #dropmenu li#page_item a, #dropmenu li.menu-item-home a, #dropmenu li.current-menu-item a {
    text-shadow: 0px 1px 1px #000;
    background-image: url(../images/navbg-h.png);
    background-repeat: repeat-x;
    background-position: left top;
    }
    #dropmenu .current_page_item li a, #dropmenu #page_item li a, #dropmenu .menu-item-home li a, #dropmenu .current-menu-item li a {
    background-image: none;
    }
    #dropmenu li li a {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #FFFFFF;
    text-shadow: 0px 1px 1px #000;
    }
    #dropmenu li li a:hover {
    background-color: #B03030;
    background-image: none;
    }
    #dropmenu span {}#dropmenu ul {
    position:absolute;
    width: 10em;
    left: -999em;
    z-index: 9999;
    background-color: #1E1E1E;
    margin: 0px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-top-color: #292929;
    border-right-color: #292929;
    border-bottom-color: #292929;
    border-left-color: #292929;
    padding: 0px;
    }
    #dropmenu ul ul {
    margin-top: -1.95em;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 10em;
    }
    #dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {
    left: -999em;
    }
    #dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {
    left: auto;
    }
  4. Now search for<div id=’content’> , immediately before this line, paste the code below

    <ul id="dropmenu">
    <li><a href="yoursite.com" title="Home">Home</a>
    <ul>
    <li><a href="http://link1.com">Link1</a></li>
    <li><a href="http://link2.com">Link2</a></li>
    </ul>
    </li>
    </ul>

    Then Hit the Save button

Adding Drop Down Menu to WordPress

  1. Login to your wordpress Dashboard, click on Appearance > Editor on the left sidebar.
  2. Now click on style.css on the right sidebar, in the very last line paste the 1st code above, then save.
  3. Again, click on header.php on the right sidebar, search for <div id=”navigation”> then below it, paste the code below


    <ul id="dropmenu">
    <li><a href="<?php bloginfo('url'); ?>" title="Home">Home</a>
    <ul>
    <li><a href="http://link1.com">Link1</a></li>
    <li><a href="http://link2.com">Link2</a></li>
    </ul>
    </li>
    </ul>

  4. Then save it.

And that’s it. If you encounter any problem, feel free to use the comment box to let us know.

Get the most important happenings in your inbox weekly

Blogger tips webdesign Wordpress

Related Posts

5 Best Gadgets For Hobby-Bloggers In 2023

March 3, 2021

5 Best Writing Software And Gadgets For Writers In 2023

January 14, 2021

WordPress Blog Hosting made easy with SeekaHost Blog Hosting Control Panel

December 4, 2020
View 14 Comments

14 Comments

  1. DIckson on April 16, 2013 8:32 am

    Hello oscar i want that drop down menu to be as a label under the category for example
    category:Blogging
    then the labels are : wordpress,blogger,adsense because i am using blogger and i dont seem that get that part

    Reply
    • Oscar Frank on April 16, 2013 2:50 pm

      Do you mean labels as in categories?

      Reply
  2. mubarak aminu on February 8, 2014 7:24 am

    that is a gr8 tutorial oga scar.

    Reply
  3. Abhishek Mishra on February 8, 2014 1:10 pm

    helpful ! and great one cheers 🙂 for this one!

    Reply
    • Oscar Frank on February 10, 2014 2:37 am

      You are welcome down here Mishra

      Reply
  4. Yogiraj mishra on February 8, 2014 1:13 pm

    Really helpful I was thinking to add one and I got it on your Facebook profile 😀 old one but still helpful

    Reply
    • Oscar Frank on February 10, 2014 2:36 am

      Sure it is. 🙂

      Reply
  5. Aman on February 8, 2014 1:53 pm

    Must say, Awesome drop menu for wordpress bloggers..
    Thanks for sharing.. 🙂

    Reply
    • Oscar Frank on February 10, 2014 2:36 am

      You are welcome Aman and thanks for dropping by.

      Reply
  6. akintoye james on April 8, 2015 9:40 am

    0scar u are d best I av seen tnx a lot… I will make ur site my No. 1 for tuts

    Reply
    • Oscar Frank on April 9, 2015 2:27 am

      Thanks a ton for the compliment Akintoye. I appreciate. 🙂

      Reply
  7. akintoye james on April 9, 2015 12:35 pm

    Bt sir it iz nt working 4 me

    Reply
  8. akintoye james on April 9, 2015 12:41 pm

    Plz sir I added u on facebook am jameztech haxor I would lyk u 2 accept my frnd request so I can inbox u

    Reply
  9. Richmindblog on June 21, 2017 9:57 am

    nice one but it can work on my template

    Reply

Leave A Reply Cancel Reply

Latest Posts

Curacel, a Nigerian Insurtech Startup, Raises $3 Million

February 17, 2023

Google Redesigns and Upgrades Gboard Toolbar

February 16, 2023

Internet Explorer to be Permanently Disabled

February 16, 2023

iPhone 15 Pro to Feature Thinner Bezels

February 16, 2023
Get the best African tech newsletters in your inbox
Oscarmini
Facebook Twitter Instagram YouTube
© 2023 Oscarmini Co. Designed by illBytes.

Type above and press Enter to search. Press Esc to cancel.