Wednesday, January 9, 2019

How to Create a Drop Down Menu in Simple Blogger Template in 2019

How to Create a Drop Down Menu in Simple Blogger Template in 2019

Hello Friends aap sb kaise hai, friends aaj me aapke liye bhut hi achi post lekar aaya hu, friends jaisa ki aapne post title me hi padh liya hoga ke yeh post drop down menu ke liye hai, friends aap blogger pr apna blog likhte hai, parantu uske liye aap drop down menu bar chahte hai taki aapka blog bahut hi aacha dikhe, uske liye aapko templates ko khridna padta hai,jo bhut hi jyada costly hote hai, friendskya aapko pta hai, aap koi bhi template me drop down menu bus ek choti si html setting karke lga sakte hai, to aaiye friends jante hai kaise,

www.behtreenkhabar.com
How to Create a Drop Down Menu in Simple Blogger Template in 2019


How to Create a Drop Down Menu in Simple Blogge Step by Step


Here are the steps to create a drop down menu in Blogger:

#1 Open Your Blog Layout Setting And #2 Click On Add Gadget,





#3 Select Html/JavaScript,#4  Under Content, paste the following code




First Code Here 

<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 Click Save Arrangement


#6 Open Theme Template and #7 Click Customize



#8 Click Advance #9 Click Add CSS 


#10 Under the CSS Box Paste The Second Code And Click Apply to Blog

Second Code Here



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

#menubar {
    background: #8E8E8E;
    width: 840px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:1px solid #B2FFFF;
        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 #1A6680;
        border-right:1px solid #1A6680;
        height:35px;
}
#menus li a, #menus li a:link, #menus li a:visited {
    color: #FFF;
    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: #130000; /* Menu hover */
    color: #FFF;
    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: #B3B3B3; /* drop down background color */
    width: 120px;
    color: #FFF;
    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: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

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


To Friends Is trh aap html me setting karke koi bhi simple template me drop down menu lga sakte hai, wo bhi free .

0 comments:

Friends, if you want to share any thoughts with us, then you can comment and tell us.Along with the comments, do not skip to like this article and subscribe to our website.