цвета фона CSS игнорировал

Question

я следующий HTML:

<div id="menu"> 
    <ul class="sf-menu"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li><a href="#">Link 3</a></li> 
    </ul> 
</div> 

Как-то background-color: silver; и margin-bottom: 40px; на <div id="menu"> игнорируются или заменяются другим кодом CSS.

Мой CSS выглядит следующим образом:

#menu{background-color: silver;margin-top: 40px; margin-bottom: 40px;} 

#menu ul li a{padding:0px;margin:0px;font-family: Verdana, Geneva, Arial, Helvetica;} 

#menu .sf-menu {position:relative;} 
#menu .sf-menu, #menu .sf-menu * {margin: 0;padding: 0;list-style: none;z-index: 9499;text-shadow: none;} 

#menu .sf-menu li {display:inline-block;float:left;font-size: 14px;line-height:18px;text-transform:uppercase;} 
#menu .sf-menu li:last-child {margin-right: 0;} 
#menu .sf-menu li:hover,#menu .sf-menu li.active {visibility: inherit;} 
#menu .sf-menu li:hover,#menu .sf-menu a:focus, #menu .sf-menu a:hover, #menu .sf-menu a:active {outline:0;} 
#menu .sf-menu li, .sf-menu > li:last-child {} 

#menu .sf-menu li a {padding: 10px 12px 10px;display: block; text-decoration: none;} 
#menu .sf-menu li a, #menu .sf-menu a:visited {color: black;} 
#menu .sf-menu li a:hover,#menu .sf-menu li.active a {color: #ffa371;} 

#menu .sf-menu > li {position: relative;} 
#menu .sf-menu > li:last-child {} 
#menu .sf-menu > li > a {display: inline-block;} 

здесь ссылку на jsfiddle

Пожалуйста, помогите мне понять, где проблема.

Answer 1

Вы должны очистить float свойство, например:

• с overflow свойство #menu{overflow:auto;}

  JSFiddle

• или с помощью псевдо-элемента #menu:after{content:""; display:table; clear:both;}

  JSFiddle