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 On Fri, Sep 9, 2011 at 9:46 AM, Elli Vizcaino <[email protected]> wrote: > Hello CSS Discuss, > > I have a site all coded up and the only besides cross browser checking left > to do is integrate a drop down behavior to one of the menu items: About. I > found a couple of articles and I can't the sub menu to work and drop when > one hovers over "About". I have tried the methods in the following two > articles: > > http://www.htmldog.com/articles/suckerfish/dropdowns/ - the code semi > works for this one with the exception that once the sub menu drops down once > and is hovered over again, it won't stay open if you try to hover over it > again the second time around. > > So I then decided to give this one a try: > http://matthewjamestaylor.com/blog/centered-dropdown-menus -even though my > menu isn't center aligned thought I could still incorporate the part for the > drop down behavior but I can't get that one to work either. > > > Please take a look here for the coded page and try hovering over About - > nothing happens: http://e7flux.com/dfd/index.html > > Here is the snippet of code related to the navigation: > > > #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; > } > #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 { > display: none; > position: absolute; > right: auto; > background: url(../images/subnav-bg.png) no-repeat; > margin-top: 3px; > width: 117px; > height: 136px; > padding: 11px 15px 0; > } > #main-nav li ul#sub-nav li { > margin: 0 0 9px; > left: auto; > } > #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; > } > > > > If anyone can help I'd greatly appreciate it - this is due today and this > is the one issue that is holding me up!!! I am working off of FF3.6 > > TIA, > > > Elli Vizcaino > Web Designer & Developer > http://www.E7Flux.com > The Best Compliment We Can Receive Is A Referral! > > ______________________________________________________________________ > 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/ > ______________________________________________________________________ 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/
