Skip to main content

How to add drop down menu in blogger

How To add drop down menu in blogger

Follow the following steps to create a drop down menu in Blogger:

  1.  In the Blogger dashboard, go to Layout




  2.  Click on Add a Gadget



  3.  Select HTML/JavaScript


  4.  Under Content, paste the following code


  <div id='menubar'>
    <ul id='menus'>
      <li>
        <a href='#'>MenuItem</a>
      </li>
      <li>
        <a href='#'>MenuItem</a>
      </li>
      <li>
        <a href='#'>MenuItem</a>
      </li>
      <li>
        <a href='#'>MenuItem</a>
        <ul>
          <li><a href='#'>SubMenuItem</a></li>
          <li><a href='#'>SubMenuItem</a></li>
          <li><a href='#'>SubMenuItem</a></li>
        </ul>
      </li>
    </ul>
  </div>

  5.  Replace MenuItem with the appropriate menu label

  6.  Replace SubMenuItem with the appropriate sub-menu label

  7.  Replace # with the appropriate URL

  8.  Click Save

  9.  Move the HTML/Javascript object to where you want the menu to appear

  10.  Click Save arrangement



  11.  Click on Template



  12.  Click Edit HTML




  14.  Search for the following line:
          ]]></b:skin>


  15.  Paste the following code directly above that line


/*-------- Begin Drop Down Menu -------*/

#menubar {
    background: #FF0000;
    width: 1000px;
    color: #A4F2E9;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:1px solid #FF8A33;
        height:35px;
}

#menus {
    margin: 0;
    padding: 0;
}

#menus ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menus li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #FF7733;
        border-right:1px solid #FF7733;
        height:35px;
}
#menus li a, #menus li a:link, #menus li a:visited {
    color: #25BD04;
    display: block;
   font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

#menus li a:hover, #menus li a:active {
    background: #FFFD99; /* Menu hover */
    color: #BED50D;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;       
}

#menus li {
    float: left;
    padding: 0;
}

#menus li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}

#menus li ul a {
    width: 140px;
}

#menus li ul ul {
    margin: -25px 0 0 160px;
}

#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
    left: -999em;
}

#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li li.sfhover ul, #menus li li li.sfhover ul {
    left: auto;
}

#menus li:hover, #menus li.sfhover {
    position: static;
}

#menus li li a, #menus li li a:link, #menus li li a:visited {
    background: #28E8DC; /* drop down background color */
    width: 120px;
    color: #F4240A;
    display: block;
    font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px solid #1A6680;
}

#menus li li a:hover, #menusli li a:active {
    background: #130000; /* Drop down hover */
    color: #B2F7CC;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

/*-------- End Drop Down Menu -------*/



I hope this will help you become a greater publisher!!!


Enjoy your high school with - High School Pedia : www.highschoolpedia.com


Comments

Popular Posts

Top 5 Best PC Games

Hi, this is highschoolpedia, and today we are going to show you our list of top 5 PC games that you must play. So let's get started... 1) FIFA 17 FIFA 17 is the latest  football video game in the FIFA series. It released on 27 September 2016 in North America and globally. FIFA 17 will be the first FIFA game in the series to use the Frostbite game engine. It is the first FIFA game to have a story mode. It is available in 2 versions.

Top 5 Upcoming Cars In 2017

Hi guys!!!!! So in this post, we will talk about the upcoming cars of 2017... New Maruti Swift The new gen Swift will also debut in our market next year. This car will be bigger in size and available with a powerful set of engines. The Swift Sport with the 1.6L engine could also be on offer keeping the changing trend of the market in India.

Animal and Plant Cells

 Cells Cells are the basic functional, biological and structural unit of life. The word cell is a Latin word meaning ‘small room’. Cells are also known as building blocks of life.  The branch of science that deals with the form, structure, and composition of a cell is known as Cytology. All organisms around us are made up of cells. Bacteria, ameba, paramecium, algae, fungi, plants and animals are made up of cells.  Cells together form tissues. And tissue together makes an organ. History Of Cell The cell was discovered by Robert Hooke in 1665. He assembled a simple microscope and observed a very thin slice of cork under his primitive microscope. The cork was obtained from the outer covering of a tree called bark. Robert Hooke observed many little-partitioned boxes or compartments in the cork slice. These boxes appeared like a honey-comb. He termed these boxes as the cell. He also noticed that one box was separated from another by a wall. What Ho

Rutherford Alpha Ray Scattering Experiment

Rutherford Alpha Ray Scattering Experiment Hey, Guys, most of you might have heard about the alpha ray scattering experiment and if you want to know in detail about Rutherford's model and the experiment he conducted, this is the right place for you... But first: Things You Must Know Some basic information that will help you understand rutherford experiment properly: Proton is a sub-atomic particle which is positively charged and has a mass of 1u. Alpha particles are helium atom with a charge of +2 as they have lost 2 electrons. Alpha particles have an atomic mass  of 4u. Gold is highly malleable and can be beaten into very thin sheets. Experiment Rutherford conducted his experiment in the following way: Rutherford took a very thin gold foil and bombarded it with high energy alpha particles. He placed a layer of zinc sulphide on the walls where the experiment was taking place because when alpha particles strike zinc sulphide layer, it results i

Isotopes, Isobars and Isotones

Isotopes These are elements which have the same atomic number but different atomic mass . They have the same atomic number because the number of protons that are inside their nuclei remains the same. But, they have different atomic mass because the number of neutrons that are also inside their nuclei is different. As the number of protons inside nuclei remains same, therefore the overall charge of the elements also remains same as in isotopes: no of protons = no of electrons . Hence, as isotopes overall charge remains neutral, therefore their chemical properties will also remain identical.   Therefore, Isotopes are chemically same but physically different.

Cathode Ray Experiment

This experiment was conducted by J.J. Thomson (Sir Joseph John Thomson) in the year 1897. This experiment proved that atom is made up of fundamental particles which are much smaller than the smallest atom 'hydrogen' This experiment helped to discover electron. According to J.J. Thomson, the cathode rays consisted of very light, small and negatively charged particles. He named the particles "corpuscles" which were later known as electrons

Top 5 Highest Paid Actors in The World

Wanna know who are the top 5 highest paid actors in the world? You have come to the right place !! 1) LEONARDO DICAPRIO  ( $77 MILLION / MOVIE)