Hello, I am trying to build a dropdown menu with the primary LI being a div (with a background image). However I cannot for the life of me figure out how to keep the active/hover class that I have defined whenever the drop down displays! I would like for the red shape behind the text to remain while you mouse over the menu items, rather than disappearing as it does now. Here is an example of what it WOULD look like: Here is a link to a live page and here is the HTML: <!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="menu.css"> <script src="js/vendor/modernizr-2.6.1.min.js"></script> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="js/jquery.orbit-1.2.3.min.js"></script> <!--[if IE]> <style type="text/css"> .timer { display: none !important; } div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; } </style> <![endif]--> <!-- Run the plugin --> <script type="text/javascript"> $(window).load(function() { $('#featured').orbit(); }); </script> <!--[if lt IE 7]> <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p> <![endif]--> </head> <body> <!-- header starts here --> <!--[if lt IE 7]> <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p> <![endif]--> <!-- Add your site or application content here --> <div id="all"> <div id="nav"> <div id='cssmenu'> <ul> <li><div id="about"><a href='#'>About</a></div> <ul> <li><a href='#'>Press</a></li> <li><a href='#'>Our Mission</a></li> <li><a href='#'>History</a></li> <li><a href='#'>Staff Listing</a></li> <li><a href='#'>Employment</a></li> </ul> </li> <li id="events"><a href='#'>Events</a></li> <li><div id="exhibitions"><a href='#'>Exhibitions</a></div> <ul> <li><a href='#'>Current</a></li> <li><a href='#'>Upcoming</a></li> <li><a href='#'>Past</a></li> <li><a href='#'>Traveling </a></li> <li><a href='#'>Catalogs</a></li> </ul> </li> <li><div id="learn"><a href='#'>Learn</a></div> <ul> <li><a href='#'>Our Philosophy</a></li> <li><a href='#'>University Students</a></li> <li><a href='#'>University Faculty</a></li> <li><a href='#'>Youth</a></li> </ul> </li> <li id="join"><a href='#'>Join & Give</a></li> <li id="publications"><a href='#'>Publications</a></li> </li> <li id="visit"><a href='#'>Visit</a></li> </ul> </div></div></div> </body> </html> Code (markup): and here is the CSS: #nav { width: 680px; height: 34px; padding:0; margin-top: -5px; margin-right: 30px; float: right; } #nav li { display: block; float:left; } #about a { text-indent: -9999px; text-decoration: none; display:block; background: url(img/btn-about.png) no-repeat left top; width: 77px; height: 25px; background-position: 0px 5px; } #about a:hover, #aboutActive { text-indent: -9999px; text-decoration: none; display:block; background: url(img/btn-about.png) no-repeat left top; background-position: 0px -21px; width: 77px; height: 36px; } .about { text-indent: -9999px; text-decoration: none; display:block; background: url(img/btn-about.png) no-repeat left top; background-position: 0px -21px; width: 77px; height: 36px; } #events a { text-indent: -9999px; text-decoration: none; display:block; background: url(img/btn-events.png) no-repeat left top; width: 82px; height: 25px; background-position: 0px 5px; } #events a:hover, #eventsActive { background-position: 0px -21px; width: 82px; height: 36px; } #exhibitions a { text-indent: -9999px; text-decoration: none; display:block; background: url(img/btn-exhibitions.png) no-repeat left top; width: 112px; height: 25px; background-position: 0px 5px; } #exhibitions a:hover, #exhibtionsActive { width: 112px; height: 52px; background-position: 0px -21px; } #learn a { text-indent: -9999px; text-decoration: none; display:block; background: url(img/btn-learn.png) no-repeat left top; width: 77px; height: 25px; background-position: 0px 5px; } #learn a:hover, #learnActive { width: 77px; height: 52px; background-position: 0px -21px; } #join a { text-indent: -9999px; text-decoration: none; display:block; background: url(img/btn-join.png) no-repeat left top; width: 106px; height: 25px; padding-left: 5px; background-position: 0px 5px; } #join a:hover, #joinActive { width: 106px; height: 52px; background-position: 0px -21px; } #publications a { text-indent: -9999px; text-decoration: none; display:block; background: url(img/btn-publications.png) no-repeat left top; width: 127px; height: 25px; background-position: 0px 5px; } #publications a:hover, #publicationsActive { width: 127px; height: 60px; background-position: 0px -21px; } #visit a { text-indent: -9999px; text-decoration: none; display:block; background: url(img/btn-visit.png) no-repeat left top; width: 73px; height: 25px; background-position: 0px 5px; } #visit a:hover, #visitActive { width: 73px; height: 60px; background-position: 0px -21px; } /* CSS MENU STYLES */ #cssmenu{ border:none; border:0px; margin:0px; padding:0px; font-family: arial,helvetica,sans-serif; font-size:14px; } #cssmenu ul{ height:43px; list-style:none; margin:0; padding:0; } #cssmenu li{ float:left; } #cssmenu li a{ color:#666666; display:block; line-height:35px; text-align:center; text-decoration:none; } #cssmenu li a:hover{ color:#000000; text-decoration:none; } #cssmenu li ul{ background:#e0e0e0; display:none; height:auto; filter:alpha(opacity=95); opacity:0.95; position:absolute; width:225px; z-index:200; /*top:1em; /*left:0;*/ } #cssmenu li:hover ul{ display:block; } #cssmenu li li { display:block; float:none; padding:0px; width:225px; } #cssmenu li ul a{ display:block; font-size:12px; font-style:normal; padding:0px 10px 0px 15px; text-align:left; } #cssmenu li ul a:hover{ background:#949494; color:#000000; opacity:1.0; filter:alpha(opacity=100); } #cssmenu p{ clear:left; } #cssmenu .active > a{ color:#ffffff; } #cssmenu .active > a:hover { color:#ffffff; } Code (markup): ANY help would be GREATLY APPRECIATED!!! Thanks in advance
You need to target :hover off the LI, NOT the DIV or anchors... NOT that you have any business having div in there since you've got perfectly good anchors in place... But that goes hand-in-hand with the general code bloat you've got there; much of it stemming from the HTML 5 asshattery (No offense, but still can't believe anyone is DUMB ENOUGH to see merit in or waste time trying to deploy HTML 5), IE conditionals for nothing, that stupid malfing IE version detection crap by Paul Irish, X-UA nonsense, jquery/polyfill rubbish, static style and scripting inlined in the markup, browser warning garbage that harkens back to the WORST of the peak of the browser wars, etc, etc... I would also suggest NOT using the broke-assed "text-indent:-999" image replacement method since it's broken images off; kinda-defeats the point of image replacement. To be frank, I wouldn't be wasting my time with images for text there, and even if I were to go that route, I would probably use CSS sprites instead of all those endless/pointless separate image files. You're using 14 image files to do the job of ONE. So... first step is to drag the markup kicking and screaming into the light, since CSS is only as good as the HTML it's applied to. This means axing all those pointless extra "div for nothing", the pointless HTML 5 polyfill bloat, the jquery for nothing, and all the other bits and doo-dads that are causing more problems than they solve. Especially since you aren't doing anything that can't be done in IE7/newer without any of that -- and can be done in IE6/lower by adding something simple like peterned's hoveranywhere; a SANE polyfill since it only needs three lines totalling less than 64 bytes in the CSS to work targeting only those browsers. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width; initial-scale=1.0;" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> Menu Test </title> </head><body> <div id="pageWrapper"> <ul id="mainMenu"> <li class="about"> <a href='#'>About</a> <ul> <li><a href='#'>Press</a></li> <li><a href='#'>Our Mission</a></li> <li><a href='#'>History</a></li> <li><a href='#'>Staff Listing</a></li> <li><a href='#'>Employment</a></li> </ul> </li> <li class="events"> <a href='#'>Events</a> </li> <li class="exhibitions"> <a href='#'>Exhibitions</a> <ul> <li><a href='#'>Current</a></li> <li><a href='#'>Upcoming</a></li> <li><a href='#'>Past</a></li> <li><a href='#'>Traveling </a></li> <li><a href='#'>Catalogs</a></li> </ul> </li> <li class="learn"> <a href='#'>Learn</a> <ul> <li><a href='#'>Our Philosophy</a></li> <li><a href='#'>University Students</a></li> <li><a href='#'>University Faculty</a></li> <li><a href='#'>Youth</a></li> </ul> </li> <li class="join"> <a href='#'>Join & Give</a> </li> <li class="publications"> <a href='#'>Publications</a> </li> <li class="visit"> <a href='#'>Visit</a> </li> </ul> <!-- #pageWrapper --></div> </body></html> Code (markup): Gimme a while -- heading out for lunch, but when I get back I'll belt out some quick CSS to make that 'work'.
TIA ... btw, some of the stuff in there is actually PART of a page i'm working on (JS, etc.) I only left the menu portion on the page and left mostly everything else. There's a lot more to that particular page but just wanted to work on the menu independently! and, i am using 7 sprites for the buttons. i "must" use the background images in the div, unfortunately. but THANKS!
Unfortunately, regardless of what the rest of the page is doing 99% of that **** belongs on the cutting room floor. My bad, the CSS is declaring them 14 times for no reason... Does that mean the illegible crappy thin font with the piss poor anti-aliasing has to be inside them, or could you actually use TEXT for them. If you HAVE to use those god awful images that way, I'd be looking at gilder-levin so you aren't shtupping the folks who leave CSS on, but turn images off to save bandwidth due to metered connections, slow connections, mobile speed, etc, etc... Also, the varying heights on those images -- that's just sloppy/bad design work. Lemme guess, working with a PSD junkie?
lol. if you must know, i'll just say it's for a bunch of ARTSY folks. and the original images were all varying in size. so you know how something may look craptacular to some...and "AMAZING" to others... the only thing i've been successful in doing is getting them to NOT have their logo flip on hover. CHEESY! i'm just the builder on this one.
ugh yeah i hate that thin font. i was told "Don't use BOLD, just make the THIN FONT BIGGER" .... it's one of *those* projects
Oooh, I feel your pain on that. REALLY, the text doesn't in the images in the first place... Images for text on anything other than a logo is just bad design and bad development. Sometimes the Dev really needs the authority to kick the art chik-fil-a's in the nerts, and say no to the "but I can do it in photoshop" idiocy since a LOT of it has nothing to do with sane, practical, accessible web design; no matter how pretty it is. The psd jockies you're dealing with argue that or demand the text as images on a menu that simple, they have no {string of expletives omitted} business 'designing' Jack for the Web! In case you couldn't tell, I've adopted a zero tolerance policy on that... Here's how I'd handle it. http://www.cutcodedown.com/for_others/yesYouCant/template.html as with all my examples the directory http://www.cutcodedown.com/for_others/yesYouCant/ is wide open for easy access to the bits and pieces. and if you tossed something like peterned's hoverwhatever behavior file on it, it should work all the way back to IE 5.5 (might need a haslayout trigger or two - I didn't test) I used just one image: (I was so tempted to call this Marlboro.png) positioned bottom-left or bottom-right, then varied the height on the two or three elements that 'needed it'... I also color shifted it onto a 12 bit palette so that on 16 bit displays (like handhelds) you won't get odd results, and did a WAY better job with the anti-aliasing on the slanted line. (one of those things photoshop is pretty much inept at) You'll notice I avoid declaring height on anchors, and instead use padding plus line-height to add up to that; a good rule of thumb is that if you are setting width or height on a element, do NOT declare padding or borders at the same time. The hover states instead of sliding them around or playing other games with them, I APO then chop off using overflow:hidden on the parent LI which has it's height fixed. Switch to overflow:visible when the LI is hovered, and 'poof', there they are. It's roughly half the CSS to do pretty much the same job.
Thanks!!! That works WAY better. and totally does look like the Marlboro stripe. I think I'll adopt your Zero Policy on the img as text. Thanks again. I owe you a beer! Also thanks for explaining what you did and why.