Почему background исчезает когда я задаю float: left?
Потому что плавающие блоки выпадают из родительского потока. Так как в потоке .nav больше ничего не остается, - он схлопывается до нуля по высоте, соответственно и фона не видно (который вовсе не пропадает на самом деле).
Примените к .nav клирфикс, или создайте новый контекст форматирования (с помощью overflow или inline-block)Ваш пример с клирфиксом
И еще: учите теорию htmlbook.ru css-live.ru
У вас не прописаны стили . clearfix. jsfiddle.net/L0javsw5/4