How to display dropdown menu to exceed header div

I have problem in displaying drop-down menu. Please, see the example on:

http://staging.gwynconsulting.com/rif/hello-world-2/

When I hover 'Rent it finished', I can't display all menu items.

I tried to play with many css properties, but I ca开发者_StackOverflow社区n't make it work...

Thank you...

---

The first sub-item being cropped is due to two overflow: hidden; CSS instructions on #header and #nav.
Remove both instructions and you'll see sub-menus.

As your list-items are floating, #nav no longer have flowing content and thus has an height of 0: background has disappeared.
You should put your background-images on each individual floating list-item whether than ul or a parent.

From an accessibility point of view, you should not add title attributes on your links except if necessary. Here the text of your links are explicit as is and your titles are strictly identical to text: your titles are unnecessary.

<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 -->

---

You need to add a z-index and a positon to your main and content div's top push them back behind the nav div. See http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

And one of your style sheets throws a 404: http://staging.gwynconsulting.com/rif/wp-content/themes/rif/js/gallery/jquery.ad-gallery.css