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