如何将菜单放在徽标旁边？

Question

需要这项工作的标题的屏幕截图：

如您所见，菜单位于徽标下方。我想要旁边的菜单，在徽标的右边。我不知道是否有可能，但如果是的话，我可以请一些帮助。

以下是为方便起见而分开的所有内容的代码。

div中的菜单和徽标：

<div id="wrapper">
    <div id="body-wrapper">
        <div class="head">
            <div class="head-wrapper">
                <div class="logo">
                    <img src="http://i.imgur.com/sDnntOE.png">
                        <ul>
                            <li><a href="http://www.chaotixstudios.x10.mx/">Home</a></li>
                            <li><a href="http://www.chaotixstudios.x10.mx/about/about-us.html">About Us</a>
                                <ul>
                                    <li><a href="http://www.chaotixstudios.x10.mx/about/the-team.html">The Team</a></li>
                                    <li><a href="http://www.chaotixstudios.x10.mx/about/history.html">History</a></li>
                                </ul>
                            </li>
                        <li><a href="http://www.chaotixstudios.x10.mx/products/products.html">Products</a>
                            <ul>
                        <li><a href="http://www.chaotixstudios.x10.mx/products/browser.html">Chaotix Browser</a></li>
                                <li><a href="http://www.chaotixstudios.x10.mx/products/useful.html">Useful Beta 1.7.5</a></li>
                                <li><a href="http://www.chaotixstudios.x10.mx/products/cleaner.html">Chaotix Cleaner 1.4</a></li>
                                <li><a href="http://www.chaotixstudios.forumotion.com">Forum</a></li>
                                <li><a href="http://www.chaotixstudios.x10.mx/products/web-dev.html">CDev</a></li>
                                <li><a href="http://www.infinite-pvp.net/">Infinite-PVP</a></li>
                                <li><a href="http://www.chaotixstudios.x10.mx/products/ulta-craft.html">Ulta-Craft</a></li>
                            </ul>
                        </li>
                            <li><a href="">Contact Us</a>
                                <ul>
                                    <li><a href="">E-Mail</a></li>
                                    <li><a href="">News Letter</a></li>
                                    <li><a href="">Social Mediar</a></li>
                                </ul>
                            </li>
                        <li><a href="http://www.chaotixstudios.x10.mx/main/divisions.html">Divisions</a>
                            <ul>
                                <li><a href="http://www.chaotixstudios.x10.mx/gaming/gaming.html">Gaming</a></li>
                                <li><a href="http://www.chaotixstudios.x10.mx/films/films.html">Films</a></li>
                            </ul>
                        </li>
                            <li><a href="http://www.chaotixstudios.forumotion.com/">Chaotix! Forum</a></li>
                            <li><a href="">Partnerships</a>
                                <ul>
                                    <li><a href="https://www.gamefanshop.com/partner-CHAOTIXSTUDIOS/">GameFanShop</a></li>
                                    <li><a href="http://www.forumotion.com/">Forumotion</a></li>
                                </ul>
                            </li>
                        </ul>

CSS：

    <style>
        *{
            background-image:url('http://i.imgur.com/0u7sBsT.png');
            background-color:#999999;
            font-family:Tahoma;color:white;
        }
        div.head{
            text-align:Center;
            padding-top:10px;
        }
        div.body{
            padding-top:100px;
            padding-left:300px;
            padding-right:300px;
            text-align:center;
        }
        div.logo{
            float:left;
        }
        a{
            color:white;
        }
        a:hover{
            color:gray;
        }
        /* Main menu
        ------------------------------------------*/
        ul{
            font-family: Lato,Tahoma,Arial, Verdana;
            font-size: 14px;
            margin: 0;
            padding: 0;
            list-style: none;
            padding-left:25px;
        }

        ul li{
            display: block;
            position: relative;
            float: left;
        }

        li ul{
            display: none;
        }

        ul li a{
            display: block;
            text-decoration: none;
            color: #FFFFFF;
            border-top: 1px solid #000000;
            padding: 5px 15px 5px 15px;
            background: #000000;
            margin-left: 1px;
            white-space: nowrap;
        }

        ul li a:hover{
            background: #999999;
        }
        li:hover ul{
            display: block;
            position: absolute;
        }

        li:hover li{
            float: none;
            font-size: 11px;
        }

        li:hover a{
            background: #000000;
        }

        li:hover li a:hover{
            background: #999999;
        }
    </style>

Answer 1

添加你的CSS

.logo img
        {
            float:left;

        }
        .logo ul
        {
            float:left;

        }

工作正常。希望这有帮助！