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

Important Mathematical Constants!

Important Mathematical Constants Mathematical constants are those numbers that are special and interesting because they come up in the various fields of mathematics like geometry, calculus etc. These mathematical constants are usually named after the person who discovered it and they are represented by a symbol that is usually picked up from the Greek alphabet. Mathematical constants are by definition very important. In this article we will take a look at certain mathematical constants that are more commonplace than others. 1.       π (pi) or Archimedes constant (~3.14159):   π is defined as the ratio of the circumference of a circle to its diameter. This is probably the most popular mathematical constant. So π is the circumference of the circle whose diameter is 1 unit. You might have seen it popping up when calculating the area of a circle (πr 2 ) or the circumference of a circle (2πr). It has many uses throughout mathematics from calcula...

High School Pedia

It is an initiative by some students to spread the light of knowledge to everyone and everywhere. It was started in the year 2015 and has grown rapidly in the past few months. By the means of this website, we try to provide information on every topic that we can reach up to. You can find different articles on this website. All these articles are written in simple language so that everyone can understand it and learn from it. We at High School Pedia believe in creative learning and this is the reason why we add our own edited graphical representations in every article. Once a very learned man said, “Knowledge increases by not keeping it to yourself but by sharing it with others”. And we follow the same motto “Share to Learn”. The team of High School Pedia tries its best to provide you with the best and original content. Unlike many other websites, High School Pedia is famous for its original and inspiring content.

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 ...

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 wa...

2-D & 3-D GEOMETRY

2-D & 3-D GEOMETRY We all have some amount of geometry. We know that any line can be represented on the Cartesian plane. Any figure can be drawn on it. But can we represent a 3-d object on it. Yes we can. A Cartesian plane has 2 axis. While representing in 3-D we need to add a third axis. This axis does not come in between the axis or in the same plane. It appears to be coming out of the paper as we cannot represent a 3-d object on a 2-d surface. This new z-axis represents a line coming out of the screen. Before understanding 3-d geometry you need to imagine this axis coming out of the screen.  REMEMBER : all the three axis are perpendicular .i.e there an angle 0f 90 between them and they meet at the origin If you are unable to imagine you can take a thick book as an example. Any corner becomes it origin and the three edges as the three axis REPRESENTING 3-D GEOMETRY Like in 2-d geometry we represent the value of the different axis as (x,y) we use the sa...

REALLY Fast & Accurate Multiplication!!!(Vedic math)

Multiplication- as it should be done (Vedic math)                    Ever been thwarted by a math exam because of your slow or inaccurate multiplication, even when u know your trigonometry ratios. Here’s a method to uncomplicate your life and save you the invaluable time in your math exam Principle: This method mainly states multiply diagonally wherever possible and if not, multiply vertically Brief history (as if you wanna know😏!): This method was obtained from the Sanskrit Vedas, and therefore is considered a part of Vedic math but you don’t want me babbling about its history, so here is the method…   Lengthy Tutorial: 1)       You would first want to take out a piece of paper 😛 Ok fine, I get it… for real now 1)       For this example, we’re going to multiply 141 and 132 2) ...

The Inverse & Reciprocal TRIGONOMETRIC Functions

So, this is my second post on trigonometry. In this post we're gonna cover the reciprocal and the inverse Trigonometric functions. If you haven't seen my first post you should definitely view it as it covers the basics of Trigonometry The Reciprocal Trigonometric Functions The reciprocal Trigonometric function of Sine is Cosecant, of Cosine is Secant & for Tangent it is Cotangent. Cosecant (Csc θ = 1/Sin θ) or (Hypotenuse/Opposite) Secant (Sec θ = 1/Cos θ) or (Hypotenuse/Adjacent) Cotangent (Cot θ = 1/Tan θ) or (Adjacent/Opposite) We can also represent Tan θ in another way. As Tan θ = opposite/adjacent  & Sin θ = opposite/hypotenuse  & Cos θ = adjacent/hypotenuse ∴ Tan θ = Sin θ/Cos θ (The hypotenuses cancel out) As Cot θ = 1/Tan θ  So, we can also represent Cot θ as Cos θ/Sin θ.