Navbar沒有得到它的風格正確

Question

我想創建一個像this頁面的導航欄。正如你在該網站上看到的那樣，有一張照片。在該圖片中，請參閱黑色導覽欄。我想製作同一個，但我無法做到這一點。這裏是我的代碼：

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> 

請幫助我的人:)

感謝， Areeb

Answer 1

像這樣

DEMO

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; 
    }