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


Labels:
Location: New Delhi, Delhi 110001, India

Comments

Post a Comment

Popular Posts

Android Versions Named After Sweet

Have you ever thought why are Android versions always named after sweet names ?? Everytime a new Android version is launched its name is kept after a sweet name. Many people have researched about this topic and many have asked Google also. Have you ever tried to find out the core reason behind this? If not then you would find the answer here . First of all let us first see what Google says about this : In 2008 i.e. the year when Android was launched a reporter asked the reason for the same. At that time Google said “It’s kind of like an internal team thing, and we prefer to be a little bit — how should I say — a bit inscrutable in the matter, I’ll say,” said Randall Sarafa, a Google spokesman. “The obvious thing is that, yeah, the Android platform releases, they go by dessert names and by alphabetical order for the most part."
21 comments
Read more

Anode Ray Experiment

→Anode ray experiment was conducted by E Goldstein. →These rays are also known as canal rays. →This experiment helped in the discovery of the proton. Apparatus Used A discharge tube  was taken in which there were 2 electrodes i.e. Anode(+ve) and the cathode (-ve). The tube was filled with an inert gas. A perforated or porous cathode was used. A layer of zinc sulphide was placed at the back of the cathode. There was a vacuum pump in the tube. High voltage (5000v-10000v) was allowed to flow through the system. It was observed that when the gas was at 1atm(atmospheric pressure ) no change was seen in the tube.  When the   pressure   was decreased inside the tube, a glow could be seen at the back side of the cathode.
3 comments
Read more

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
30 comments
Read more

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.
3 comments
Read more

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
5 comments
Read more

Paid Apps For Free ??

Everyone wants to play a game like GTA on iPad, it is easy on a computer to download such games but difficult on smart devices like iPad, tablet,  or smartphones. We can buy them but not everyone can buy games. But no worries guys there is a solution to this problem where one can have fun of playing games without spending their precious money .(underlined apps have downloading links  given at the end) iOS There many apps through which you can download these paid games for free. Also, there are many sites for the same. One of the most helpful apps is a Chinese app.It is called haimawan. If on a ios device, then you just have to click install which will redirect to settings  add a profile  and boom enjoy it as you wish . but it does not always work, it might work for few days and then the verification problem which may not cure. One more app is tutu which is a fantastic app and always work (99.9% sure .. nothing is perfect). X cross was the perfect app but is closed now an
6 comments
Read more

Pokemon Go 0.33.0

All Pokemon go fans get ready because again the latest version of Pokemon go is out. The Niantic has released a new version of Pokemon go i.e. 0.33.0.The size of the new version is 61.48MB.
13 comments
Read more