drop-down-menu - サブメニュー付きのCSSVerticlaメニュー

Question

私はCSSを厳密に使用して垂直メニューに取り組んできました。

ユーザーがトップメニューにカーソルを合わせると、すべてのサブメニューが親メニューとして垂直に表示されます。私が複製しようとしている例は、次のWebサイトで使用されている例です：http：//blackdoctor.org/

これが私が書いたHTMLコードブロックです：

 <!-- divPgContent STARTS -->
 <div id="divPgContent" style="height:200px;">

<!-- divTopMenu1 STARTS -->
<div id="divTopMenu1">

    <ul id="topmenu1" class="menu">
        <li class="current active"><a href="/">Home</a></li>
        <li><a target="_blank" href="#">Menu 2</a></li>
        <li><a target="_blank" href="#">Menu 3</a></li>
        <li><a target="_blank" href="#">Menu 4</a></li>
        <li><a target="_blank" href="#">Menu 5</a></li>
        <li><a href="javascript:void(0);">Menu 6</a>
            <ul>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a></li>
                <li><a href="#">Sub Menu 5</a></li>
                <li><a href="#">Sub Menu 6</a></li>
                <li><a href="#">Sub Menu 7</a></li>
                <li><a href="#">Sub Menu 8</a></li>
                <li><a href="#">Sub Menu 9</a></li>
            </ul>
        </li>
        <li><a href="javascript:void(0);">Menu 7</a>
            <ul>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a></li>
                <li><a href="#">Sub Menu 5</a></li>
                <li><a href="#">Sub Menu 6</a></li>
                <li><a href="#">Sub Menu 7</a></li>
                <li><a href="#">Sub Menu 8</a></li>
                <li><a href="#">Sub Menu 9</a></li>
            </ul>
        </li>
        <li><a href="javascript:void(0);">Menu 7</a>
            <ul>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a></li>
                <li><a href="#">Sub Menu 5</a></li>
                <li><a href="#">Sub Menu 6</a></li>
                <li><a href="#">Sub Menu 7</a></li>
                <li><a href="#">Sub Menu 8</a></li>
                <li><a href="#">Sub Menu 9</a></li>
            </ul>
        </li>
    </ul>

    <div class="divClr"></div>

</div>
<!-- divTopMenu1 ENDS -->

<div class="divClr"></div>

</div>
<!-- divPgContent ENDS -->

これが私のCSSです：

    #divPgContent
    {
        width:980px;
        height:auto;

        margin:0px auto 0px auto;
        padding:15px 15px;

        border:2px solid #E4E8EA;
    }

    /* divTopMenu1 STARTS */
    ul#topmenu1
    {
        width:100%;
        height:100%;

        margin:0px 0px;
        padding:0px 0px;
    }   
        ul#topmenu1 li
        {
            float: left;
            height: 36px;
            margin: 0 0px;

            display:inline;
            list-style:none;
            margin:0px 0px;
            text-shadow:-1px -1px 1px rgba(0, 0, 0, 0.4);
        }
            #divTopMenu1 ul li.current,
            #divTopMenu1 ul li a:hover
            {
                color:#FFFFFF;
                background-color:#6ABD45;
            }
            ul#topmenu1 a
            {
                display:block; 
                cursor:pointer; 

                padding:10px 10px;

                text-decoration:none;

                font-size: 90%;
                font-weight:bold;

                color:#FFFFFF;
            }


    ul#topmenu1 ul li
    {
        height:auto;
    }
    ul#topmenu1 li ul li span.separator
    {
        font-size:90%;
    }
    #topmenu1 li ul li span .img
    {
        display:none;
    }
    ul#topmenu1 li:hover>*
    {
        display:block;
    }
    ul#topmenu1 li:hover
    {
        position:relative;
        border-bottom:transparent;
    }


    ul#topmenu1 ul
    {
        margin:0px 0px;
        padding:0px 0px;

        display:none;
        position:absolute;
        left:-407px;
        top:100%;

        min-width:950px;    
        background-color:#6ABD45;
        z-index:50000;
    }

    ul#topmenu1 ul a
    {
        font-size:90%; 
        width:130px;
    }
    ul#topmenu1 ul li
    {
        height: 42px;
        margin: 0 0px;

        list-style:none;
        margin:0px 0px;
        text-shadow:-1px -1px 1px rgba(0, 0, 0, 0.4);
    }

    ul#topmenu1 ul li:hover>a
    {
        text-decoration:none; 
        background-color:#6ABD45;
    }



    ul#topmenu1 ul ul
    {
        position:absolute; 
        left:100%; 
        top:0;
    }



    ul#topmenu1>li, ul#topmenu1 li
    {
        margin:0;
    }
    #topmenu1 li .separator
    {
        cursor: pointer;
        display: block;
        font-size: 110%;
        font-weight:bold;
        text-transform: lowercase;
        text-decoration:none;
        padding:15px 15px;
        color:#FFFFFF;
    }
    ul#topmenu1 .deeper ul li:hover>a
    {
        text-decoration:none; 
        background-color:#105F7D;
    }
    /* divTopMenu1 ENDS */

どんな助けでもありがたいです。

ありがとうございました。