0

I have following 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>

Somehow background-color: silver; and margin-bottom: 40px; on <div id="menu"> is ignored or replaced by other css code.

My CSS looks like that: 

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

here is link to jsfiddle

Please help me understand where the problem is.

potashin
  • 44,205
  • 11
  • 83
  • 107
Solver
  • 169
  • 7
  • 23

1 Answers1

0

You should clear the float property, for example :

  • with overflow property #menu{overflow:auto;}

    JSFiddle

  • or using pseudo-element #menu:after{content:""; display:table; clear:both;}

    JSFiddle

potashin
  • 44,205
  • 11
  • 83
  • 107