drop down menu floating issue

[casinojh]

Made this menu this afternoon. Tab number 1 has a drop down that consists of two divs that should each be floated left so there are two divs next to each other, however, it does not work and the second lines up underneath the first.This is the line which I thought would do the floating :/*sub container div*/.container ul li .drop div{float:left;}FiddleHTML<!-- start menu --><div id="top_menu"> <nav> <div class="container"> <ul> <li><a href="http://stackoverflow.com/#"><img class="home" alt="" height="20" src="http://stackoverflow.com/images/trans.gif" width="20"> </a></li> <li><a href="http://stackoverflow.com/number1">number 1</a> <div class="drop"> <div> <a href="http://stackoverflow.com/cat1">category 1</a> <ul> <li><a href="http://stackoverflow.com/1">test1</a></li> <li><a href="http://stackoverflow.com/2">test2</a></li> <li><a href="http://stackoverflow.com/3">test3</a></li> <li><a href="http://stackoverflow.com/4">test4</a></li> </ul> <a href="http://stackoverflow.com/cat2">category 2</a> <ul> <li><a href="http://stackoverflow.com/1">test1</a></li> </ul> </div> <div> <a href="http://stackoverflow.com/cat3">category 3</a> <ul> <li><a href="http://stackoverflow.com/1">test1</a></li> <li><a href="http://stackoverflow.com/2">test2</a></li> <li><a href="http://stackoverflow.com/3">test3</a></li> <li><a href="http://stackoverflow.com/4">test4</a></li> </ul> <a href="http://stackoverflow.com/cat4">category 4</a> <ul> <li><a href="http://stackoverflow.com/1">test1</a></li> </ul> <a href="http://stackoverflow.com/cat5">category 5</a> <ul> <li><a href="http://stackoverflow.com/1">test1</a></li> </ul> </div> <div> </div> </li> <li><a href="http://stackoverflow.com/number2">number 2</a></li> <li><a href="http://stackoverflow.com/number3">number 3</a></li> <li><a href="http://stackoverflow.com/number4">number 4</a></li> <li><a href="http://stackoverflow.com/number5">number 5</a></li> </ul> </div> </nav></div><!-- end menu -->CSS#top_menu{background:#cccccc url('/images/top_menu_bg.png') repeat;}.container{position:relative;z-index:1000;border-left:1px #b2b2b2 solid;border-right:1px #b2b2b2 solid;}.container ul{white-space:nowrap;/*display:table;*/}.container ul, .container li{padding:0;margin:0;list-style:none;}/*top level link*/.container ul a{display:block;color:#666666;text-decoration:none;padding:0 25px;line-height:40px;border-right:1px #b2b2b2 solid;}/*sub container*/.container ul li .drop{position:absolute;background:#fdfdfd;-moz-border-radius:0 0 8px 8px;-webkit-border-radius:0 0 8px 8px;border-radius:0 0 8px 8px;display:none;border-left:1px #b2b2b2 solid;border-right:1px #b2b2b2 solid;border-bottom:1px #b2b2b2 solid;}/*sub container div*/.container ul li .drop div{float:left;}.container ul li .drop li{display:block;border:0;}.container > ul > li{float:left;display:block;position:relative;}.container ul li:hover > .drop{top:auto;display:block;}/*sub level top link*/.container ul li .drop a{line-height:25px;border:0;padding:0 30px 0 10px;color:#000000;}/*sub level top link hover*/.container ul li .drop a:hover{color:#00396d;background:#c4dcec;}/*sub level link normal*/.container ul li .drop li > a{color:#666666;}/*sub level link hover*/.container ul li .drop li:hover > a{background:#c4dcec;color:#00396d;}/*top level link hover*/.container li:hover > a{ color: #000000;}/*home button*/.container ul li img.home{background:url('/images/top_menu_home.png') 0 0;width:20px;height:20px;}/*home button hover*/.container ul li:hover > a img.home{background:url('/images/top_menu_home.png') -20px 0;}