问CSS:当我需要垂直显示时，菜单下拉列表水平显示

EN

#nav                            {overflow:hidden;
                                 margin:0px auto;
                                 text-align:center;}

#nav ul li                      {display:inline-block;
                                 list-style:none;
                                 vertical-align:top;
                                 width:100px;}

#nav>ul>li>a>img                {text-align:center;
                                 width:100px;
                                 height:100px;}

#nav a                          {text-decoration:none !important;}

#nav a:hover                    {text-decoration:underline !important;}

#nav > ul > li > ul             {display:none;
                                 z-index:999;
                                 position:absolute;}

#nav li:hover ul                {display:block;}

.submenu li                     {border-bottom:solid 1px #333333;
                                 font-size:12px;}

.submenu img                    {display:inline;
                                 vertical-align:middle;
                                 width:25px;
                                 height:25px;
                                 float:left;
                                 margin:5%}

.submenu li:hover               {background-color:#CCC;}

<div id="nav">
    <ul>
            <li>
            <a href="">
                <img src="images/placeholder.png">
                Home
            </a>
            </li>
            <li>
            <a href="">
                <img src="images/placeholder.png">
                Menu w/ Submenu
            </a>
      <ul class="submenu">
                <li>
                <a href="">
                <img src="images/placeholder.png">
                Submenu Item
                </a>
                </li>

                <li>
                <a href="">
                <img src="images/placeholder.png">
                Submenu Item
                </a>
                </li>

            </ul>
            </li>

            <li>
            <a href="">
                <img src="images/placeholder.png">
                Menu Item
            </a>
            </li>

            <li>
            <a href="">
                <img src="images/placeholder.png">
                Menu Item
            </a>
            </li>
    </ul>
</div>