How To Code A Dropdown Menu Within A Dropdown Menu Option?

I'm re-launching my blog and would ideally like to make changes to the navigations of the blog. I already have a hovering navigation bar with three tabs and two of these tabs have

Solution 1:

This works well for me, hope it will resolve your issue.

HTML CODE

<divstyle="float:right; margin-top:-4px; margin-right:350px"id="primary_nav_wrap"><ulstyle=" border:1px solid #FEB405"><listyle="background:#ffce00;"><ahref="#">Select Dropdown<imgwidth="9"height="5"align="absmiddle"alt=""style="margin-left:10px;"src="images/arrow_down.png"></a><ul><li><ahref="#1">Option 1</a></li><li><ahref="#1">Option 2</a></li><li><ahref="#1">Option 3</a></li><li><ahref="#1">Option 4</a></li></ul></li></ul></div>

CSS CODE

<style>#primary_nav_wrap {
        margin-top: 15px;
    }
    #primary_nav_wrapul {
        background: #fcfcfc none repeat scroll 00;
        border: 1px solid #e7e7e7;
        float: right;
        list-style: outside none none;
        margin: 0;
        padding: 0;
        position: relative;
    }
    #primary_nav_wrapula {
        color: #333;
        display: block;
        font-family: "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 12px;
        font-weight: 700;
        line-height: 32px;
        padding: 015px;
        text-decoration: none;
    }
    #primary_nav_wrapulli {
        float: left;
        margin: 0;
        padding: 0;
        position: relative;
    }
    #primary_nav_wrapulli.current-menu-item {
        background: #ddd none repeat scroll 00;
    }
    #primary_nav_wrapulli:hover {
        background: #f6f6f6 none repeat scroll 00;
    }
    #primary_nav_wrapulul {
        background: #fcfcfc none repeat scroll 00;
        display: none;
        left: -178px;
        padding: 0;
        position: absolute;
        text-align: left;
        top: 100%;
    }
    #primary_nav_wrapululli {
        border-bottom: 1px solid #f3f3f3;
        float: none;
        font-weight: normal;
        width: 340px;
    }
    #primary_nav_wrapulula {
        color: #666;
        font-weight: normal;
        line-height: 120%;
        padding: 10px15px;
    }
    #primary_nav_wrapululul {
        left: 100%;
        top: 0;
    }
    #primary_nav_wrapulli:hover > ul {
        display: block;
    }
</style>

Solution 2:

just add a class at your main ul (i added 'main-menu' for example) and then add this css:

.main-menu > li > ul,
.main-menu > li > ul > li > ul,
.main-menu > li > ul > li > ul > li > ul {
    display: none;
}

.main-menu > li:hover > ul,
.main-menu > li > ul > li:hover > ul,
.main-menu > li > ul > li > ul > li:hover > ul {
    display:block;
}