html - 导航栏没有正确的风格

Question

我想创建一个像这个页面一样的导航栏。正如您在该网站上看到的那样，有一张图片。在该图片中，请参阅黑色导航栏。我想做同样的，但我做不到。这是我的代码：

CSS：

@CHARSET "UTF-8";

@IMPORT url("base.css");

a {

}

span, input, #small_navigation, nav, a {
    display: inline-block;
    margin: 5px;
}

#wrapper {
    width: 100%;
    height: 100%;
}

/* Large desktop */
@media (min-width: 1200px) {
    #header {
        width: 100%;
        height:50px;
        background-color: #f2e8e8;
        box-shadow: 0px 5px 5px 3px #aaa;       
    }
    #right_side #small_navigation {
        margin-top: -150px;
    }
    #header #right_side {
        float: right;
    }
    #header #dropdown ul li ul{
        text-align: center;
    }
}

HTML：

<div id="wrapper">
    <div id="header">
        <span id="icon"><!-- <img src="icon_src.png" /> -->Icon</span>
        <input type="search" placeholder="Search" id="search_site" />
        <span id="logo">Website Name</span>
        <div id="right_side">
            <div id="small_navigation">
                <a href="#">Home</a>
                <a href="#">Office</a>
            </div>
            <nav id="dropdown">
                <ul>
                    <li>
                        dropdown
                        <ul>
                            <li>Item 1</li>
                            <li>Item 2</li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>

请有人帮助我:)

谢谢， 阿雷布

Answer 1

像这样

演示

CSS

* {
    margin: 0px;
    padding: 0px;
}
#header {
    width: 100%;
    height: 50px;
    background-color: #f2e8e8;
    box-shadow: 0px 5px 5px 3px #aaa;
    vertical-align: middle;
}
#right_side #small_navigation {
    float: left;
    text-align: center;
}
#header #right_side {
    float: right;
}
#header #dropdown ul li ul {
    text-align: center;
}
.logo {
    text-align: center;
    vertical-align: middle;
  }