Thanks for the suggestion but I'm not targeting IE 6 if that is what you're referring to and my document validates as XHTML transitional as per client request :). I went ahead and changed the code based on this: http://www.htmldog.com/articles/suckerfish/dropdowns/ - so yes the drop down drops on hover now but it just wont stay there so one can hover over the submenu links, so it's still a problem.
Here is the revised code snippet and the url again: http://e7flux.com/dfd/index.html #main-nav { overflow: hidden; margin-top: 106px; padding: 0 98px; } #main-nav li { float: left; list-style-type: none; font-family: Arial, Helvetica, sans-serif; /* Whitney Medium */ font-size: 12px; /* 14pt in Whitney Medium */ text-transform: uppercase; color: #FFF; } #main-nav li.home, #main-nav li.about { margin-right: 72px; } #main-nav li.about a { /*display: block;*/ padding: 0; } #main-nav li.get-involved { margin-right: 326px; } #main-nav li.blog, #main-nav li.donate { margin-right: 72px; } #main-nav a { color: #FFF; font-style: normal; } #main-nav a:hover { color: #023f3b; background: none; } #main-nav li ul#sub-nav { position: absolute; left: -999em; background: url(../images/subnav-bg.png) no-repeat; margin-top: 3px; width: 117px; height: 136px; padding: 11px 15px 0; } #main-nav li:hover ul#sub-nav { left: auto; } #main-nav li ul#sub-nav li { margin: 0 0 9px; } #main-nav li ul#sub-nav, #main-nav li ul#sub-nav a { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; font-style: italic; text-transform: none; color: #0c4440; } #main-nav ul#sub-nav a:hover { background: url(../images/link-hover-bg.png) bottom repeat-x; } Elli Vizcaino Web Designer & Developer http://www.E7Flux.com The Best Compliment We Can Receive Is A Referral! ----- Original Message ----- > From: Kevin A. Cameron <[email protected]> > To: Elli Vizcaino <[email protected]> > Cc: CSS Discuss <[email protected]> > Sent: Friday, September 9, 2011 12:57 PM > Subject: Re: [css-d] Pure CSS Drop Down Menu Help > > Something along the lines of > #main-nav li:hover ul {display:block;} > should help. May also want to check the support for the :hover pseudo > element on LIs to make sure it accommodates your audienc ( > http://www.quirksmode.org/css/contents.html). > > Kevin > ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
