aslam sonu laxminiya

Sunday, 2 October 2016

MY PERSONAL

Make Drop Down Menu Bar In Blog

Make Drop Down Menu Bar In Blog

  • Go to Layout



  • Click on    Add a Gadget  of  HTML/JavaScript



  • Then write these code




    Code:

  • Menu

    • Sub-Menu1

      • Then click save 
      • And Go To the Template and click on Edit HTML





        • Find this code         ]]>









        • Write this code:

        Code: :


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

        #menubar {
                margin: 0px;
                padding: 0;
                position: relative;
        height:auto;
        }

        #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;
        height:auto;
        }
        #menus li a, #menus li a:link, #menus li a:visited {
            display: block;
           font:normal 12px "Arial Black", Gadget, sans-serif;    margin: 0;
            padding: 9px 12px 10px 12px;
                text-decoration: none;
        }

        #menus li a:hover, #menus li a:active {
        /* Menu hover */
            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: 180px;
            margin: 0;
            padding: 0;
        }

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

        #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 {
        /* drop down background color */
            width: 150px;
            display: block;
            font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
            margin: 0;
            padding: 9px 12px 10px 12px;
                text-decoration: none;
        z-index:9999;
        }

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

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

        • Then save it :
        • Then again go to the Layout and Edit HTML you see page like given below, You just replace (#) by your url address then save it and enjoy drop down menu .

                                               

        No comments:

        Post a Comment