How To Customize Multilevel Dropdown Menu ?

In the Previous tutorial " How to create a Cool Multilevel Drop Down Menu In Blogger Template ? " i have taught you how to create it but in this tutorial i will show you how to customize it. But before explaining the tricks i want to inform you that i am dividing the code into four sections so that you can easily understand the customization process.

Also read: How to create a code box in Blogger ?

• Now, here i am pasting the code with sections:

  <!-- Section 1 Starts -->

<script src='http://santosh143.googlecode.com/svn/dropdown.js' type='text/javascript'></script> <style>

 .ddsubmenustyle, .ddsubmenustyle div {
    font: normal 13px Verdana;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    background: white;
    border: 1px solid black;
    border-bottom-width: 0;
    visibility: hidden;
    z-index: 100;
}

.ddsubmenustyle ul {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    border: 0px none;
}

.ddsubmenustyle li a {
    display: block;
    width: 170px;
   /*width of menu (not including side paddings)*/
    color: black;
    background-color: lightyellow;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom: 1px solid black;
}

* html .ddsubmenustyle li {
        display: inline-block;
    width: 170px;
 

}


.ddsubmenustyle li a:hover {
    background-color: black;
    color: white;
}


.downarrowpointer {
 /*CSS for "down" arrow image added to top menu items*/
    padding-left: 4px;
    border: 0;
}

.rightarrowpointer {
 /*CSS for "right" arrow image added to drop down menu items*/
    position: absolute;
    padding-top: 3px;
    left: 100px;
    border: 0;

}

.ddiframeshim {
    position: absolute;
    z-index: 500;
    background: transparent;
    border-width: 0;
    width: 0;
    height: 0;
    display: block;
}
   

<!--Section 1 Ends--> 

<!-- SECTION 2 Starts -->

  .mattblackmenu ul {
    margin: 0;
    padding: 0;
    font: bold 12px Verdana;
    list-style-type: none;
    border-bottom: 1px solid gray;
    background: #414141;
    overflow: hidden;
    width: 100%;
}


.mattblackmenu li {
    display: inline;
    margin: 0;
}


.mattblackmenu li a {
    float: left;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 6px 8px;
    border-right: 1px solid white;
    color: white;
    background: #414141;
}

.mattblackmenu li a:visited {
    color: white;
}

.mattblackmenu li a:hover {
    background: black;
      
}

.mattblackmenu a.selected {
    background: black;
}
</style>

 <!-- SECTION 2 Ends -->

<-- Section 3 Starts -->

 <div id="ddtopmenubar" class="mattblackmenu">
    <ul>
        <li>
        <a href="#">LINK1</a>
        </li>
        <li>
        <a href="#" rel="ddsubmenu1">LINK2</a>
        </li>
        <li>
        <a href="#" rel="ddsubmenu2">LINK3</a>
        </li>
        <li>
        <a href="#">Link4</a>
        </li>
        <li>
        <a href="#" rel="ddsubmenu3">LINK5</a>
        </li>
    </ul>
</div>

<!-- SECTION  3 Ends-->

<!-- SECTION 4 Starts here -->

<script type="text/javascript">
    ddlevelsmenu.setup("ddtopmenubar", "topbar") 

//ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<ul class='ddsubmenustyle' id='ddsubmenu1'>
    <li>
        <a href='#'>LINK2 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 2</a>
        <ul>
            <li>
                <a href='#'>LINK2 ITEM 2.1</a>
            </li>
            <li>
                <a href='#'>LINK2 ITEM 2.2</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 3</a>
        <ul>
            <li>
                <a href='#'>LINK2 ITEM 3.1</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 4</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu2'>
    <li>
        <a href='#'>LINK3 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 2</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 3</a>
        <ul>
            <li>
                <a href='#'>LINK3 ITEM 3.1</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 4</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 5</a>
        <ul>
            <li>
                <a href='#'>LINK3 ITEM 5.1</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 5.2</a>
                <ul>
                    <li>
                        <a href='#'>LINK3 ITEM 5.2 1</a>
                    </li>  
               </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 6</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu3'>
    <li>
        <a href='#'>LINK5 ITEM 1</a>
    </li>
</ul>

<!-- Section 4 ENDS--> 

• Section 1 Customizations: This section is generally meant for the sub menu's items as shown below in screenshot also for customization see the screenshots below.
  

  

  
  

  •  Red   : You can change the font size as per your requirements given in Pixels.
  • Orange  ⚜ : You can change the font style of your sub menu items for eg. Lucida Handwriting, Arial etc.
  • Green   : Here you can change the background color of your sub menu item, here you can use color names or you can use HTML color codes like #414141 etc.
  • Blue    : Here you can change colors and this color appears whenever you hover your mouse over it.

  • Pink   : Never change it ☠. 

• Section 2 Customizations: This section is generally meant for the Main Menu. 

• Red   : Here you can change the font type of your main menu i.e. Bold, italic etc.
• Green   : Here you can change the font size given in Pixels.
• Blue   : Here you can change the font style as mentioned in section 1's orange.
• Pink   : To change the background color of your Menu bar you have to change the two color codes shown in pink colors.
• Orange ⚜: You can change the color here for hover i.e. whenever somebody hover his/her mouse over the tab then it changes color to your specified color.
• Purple   : Here you can change color and this color appear when somebody selects a particular tab in menu bar.

• Section 3 Customizations: This section is generally for putting your links and titles in the main menu.
  
  • Red   : Here you can replace the '#' with your page URL.
  • Green   : Here you can replace the text with your TEXT.

• Section 4 Customization: This is also for putting your links and text but in the sub menu and also the menu inside the menu i.e. nested menu or you can say that sub sub menu.
  
  • Red   : Replace the '#' with your link.
  • Green   : Replace the given text with your text. 
   

This is it from my side for any queries please comment below or contact me via Contact Page.

Also read:

• How to create a free logo for your website or blog ?
• Stylish slide out don't forget to join our community widget for Blogger ?