html - 如何创建下拉菜单(如本图片所示)

我如何创建一个下拉菜单，如该图片所示：


我已经尝试过的
看看这个jsfiddle
我真的无法使它正常工作，对于这个笨拙的问题感到抱歉，而我仅拥有JSFiddle中的代码。

CSS：

@import url(http://fonts.googleapis.com/css?family=Homenaje);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
    font-family: 'Open Sans', sans-serif;;
    color: #666666;
    font-size: 14px;
    background: url(../img/header.jpg) repeat-x;
    margin: 0;
}


/*=============================*/
/*=====   Functionality   =====*/
/*=============================*/

/*=====   Parents   =====*/

#navMenu,
#navMenu ul,
#navMenu li {
    display: block;
    color: black;
    font-size: 12px;
}

#navMenu ul {
    line-height:30px;
}

#navMenu li {
    list-style:none;
    float:left;
    position:relative;
    width: 120px;
    height:45px;
}

#navMenu ul li a {
    line-height:45px;
    display:block;
    background-color: #333333;
    margin-left: auto;
    text-align: left;
    color: white;
    padding-left: 10px;
}

#navMenu ul li a:hover {
    background-color: #03A6CF;
}


/*end Parents*/

/*=====   Children   =====*/
#navMenu ul ul {
    position:absolute;
    visibility:hidden;
    margin-left: -13px;
}

#navMenu ul li:hover > ul {
    visibility:visible;

}

/*end children*/

/*==========================*/
/*=====   Prettyness   =====*/
/*==========================*/

#navMenu ul li a {
    text-decoration:none;
}

最佳答案

那这样的东西呢？ http://fiddle.jshell.net/Egg4t/

    #navMenu ul,
    #navMenu li {
        display: block;
        font-size: 12px;
        margin: 0;
    }

    #navMenu {
        position: relative;
    }

    #navMenu ul {
        line-height:30px;
    }

    #navMenu li {
        list-style:none;
        float: left;
        padding-right: 20px;
        padding-left: 10px;
        font-size: 14px;
    }

    #navMenu li li {
        line-height: 25px;
        color: #03A6CF;
        float: left;
    }

#navMenu li li li {
    float: none;
    display: block;
}

#navMenu ul li a {
    display: block;
    font-size: 12px;
    line-height: 25px;
    margin-left: auto;
    text-align: left;
}

#navMenu ul ul {
    position:absolute;
    left: 0;
    padding: 0;
    width: 500px;
    background-color: #333333;
    visibility:hidden;
}

#navMenu ul ul ul {
    position: static;
    display: inline;
}

#navMenu ul li:hover ul {
    visibility:visible;
}

        <div id="navMenu" class="last-topnav">
            <ul>
                <li> Menu 1
                    <ul>
                        <li> Menu 1 Column 1
                            <ul>
                                <li><a href="#">item 1</a></li>
                                <li><a href="#">item 2</a></li>
                                <li> Level 2
                                    <ul>
                                        <li><a href="#">item 2</a></li>
                                        <li><a href="#">item 2</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li> Menu 1 Column 2
                            <ul>
                                <li>
                                    <a href="#">item 1</a>
                                </li>
                                <li><a href="#">item 2</a></li>
                                <li><a href="#">item 3</a><li>
                                <li><a href="#">item 4</a><li>
                            </ul>
                        </li>

                    </ul>
                </li>
                <li> Menu 2
                    <ul>
                        <li> Menu 2 Column 1
                            <ul>
                                <li><a href="#">item 1</a></li>
                                <li><a href="#">item 2</a></li>
                                <li> Level 2
                                    <ul>
                                        <li><a href="#">item 2</a></li>
                                        <li><a href="#">item 2</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li> Menu 2 Column 2
                            <ul>
                                <li>
                                    <a href="#">item 1</a>
                                </li>
                                <li><a href="#">item 2</a></li>
                                <li><a href="#">item 3</a><li>
                                <li><a href="#">item 4</a><li>
                            </ul>
                        </li>
                        <li> Column 3
                            <ul>
                                <li>
                                    <a href="#">item 1</a>
                                </li>
                                <li><a href="#">item 2</a></li>
                                <li><a href="#">item 3</a><li>
                                <li><a href="#">item 4</a><li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>