Обрезание первого подпункта связано с двумя overflow: hidden; инструкциями CSS на #header и #nav.
Удалите обе инструкции, и вы увидите подменю.
Поскольку ваши элементы списка плавают, #nav больше не имеет текучего содержимого и, следовательно, имеет высоту 0: фон исчез.
Вы должны поместить свои фоновые изображения в каждый отдельный элемент плавающего списка, независимо от ul или родительского элемента.
С точки зрения доступности, вы не должны добавлять атрибуты заголовка в свои ссылки, кроме случаев, когда это необходимо. Здесь текст ваших ссылок является явным, как есть, и ваши заголовки строго идентичны тексту: ваши заголовки не нужны.
<a href="/" title="Home">Home</a> <!-- not OK. Title attribute should be removed -->
<a href="/brochure.pdf" title="Download our brochure (PDF, 1.53 MB)">Download our brochure</a> <!-- OK, 2 useful infos about format and size added -->
<a href="/brochure.pdf" title="(PDF, 1.53 MB)">Download our brochure</a> <!-- not OK, title should include the text of the link and add sth to it -->