I posted this last week and no one replied. Still having the same issue and still can't seem to figure it out. If anyone has any ideas and can help, I'd really appreciate it.
:::::::::::::::: Start Re-Post ::::::::::::::::::: I need some help with a CSS menu that I'm writing. It is a simple 2 level menu, level 1 is a horizontal list, level 2 is a dropdown list. I have this working in all browsers, but I ran into a hitch with IE6. The site is http://cfwt.cfwebtools.com The active 1st level menu item will have class active and any anchor with a sub menu will have class drop. 2nd level menus have class msubnav. When I have a menu item with class active and an anchor with class drop, the sub menu does not display. I've validated my HTML and CSS through W3C's validators and everything is clean. I just can't figure this out for some reason. I copied the code below. Let me anticipate and answer one question up front. The object tags inside the anchor tags are there because the validator said a ul tag cannot be embedded in an anchor tag so the HTML wouldn't validate without it. And I couldn't validate the CSS before the HTML was first validated. It didn't change how any of it worked. If anyone has time, please have a look at this and give me some suggestions. I've been stuck for 2 days now on this same issue. Here's the HTML code for the menu: <div id="mmenu"> <ul id="mnav"> <li class="active"> <a href="/">Home</a> </li> <li><a href="/index.cfm?objectid=F842457F-9F40-69B2-15C85BA174B41C79" class="drop">Support <!--[if lte IE 7]><table><tr><td><![endif]--> <object><ul class="msubnav"> <li><a href="/index.cfm?objectid=F86E0CF7-FFBD-724D-DBCEB97FCE10385B">Customer Login</a></li> <li><a href="/index.cfm?objectid=FF3DA5EF-AE85-0435-64E315EDC718572A">Email Support</a></li> <li><a href="/index.cfm?objectid=FF3DA5FE-B22F-DB20-42258A71F94F6157">Projects</a></li> <li><a href="/index.cfm?objectid=FF3DA60E-04B8-ED1E-654B4C2161173BD5">Change Requests</a></li> <li><a href="/index.cfm?objectid=FF3DA61D-93FB-3563-BEC67F989F1CCB63">Hosting Customers</a></li> </ul> </object> <!--[if lte IE 7]></td></tr></table><![endif]--> </a></li> <li><a href="/index.cfm?objectid=F86E0CB9-C927-764C-4B9F8D5B13F023F1">Services</a></li> <li><a href="/index.cfm?objectid=F86E0CC9-9E1A-D859-872B39343D6835F4" class="drop">Contact Us <!--[if lte IE 7]><table><tr><td><![endif]--> <object><ul class="msubnav"> <li><a href="/index.cfm?objectid=11BC186D-B9BC-D603-814320BEE22F2A7D">project 2</a></li> </ul></object> <!--[if lte IE 7]></td></tr></table><![endif]--> </a></li> <li><a href="/index.cfm?objectid=F86E0CD8-E107-A828-347274D1C79891B2" class="drop">Projects & Clients <!--[if lte IE 7]><table><tr><td><![endif]--> <object><ul class="msubnav"> <li><a href="/index.cfm?objectid=11BBE71C-C6A7-4460-90C117389C1FAC14">project 1</a></li> </ul></object> <!--[if lte IE 7]></td></tr></table><![endif]--> </a></li> <li><a href="/index.cfm?objectid=F86E0CE8-B32C-7FD7-9FDED7DA96A990A6">Hosting</a></li> </ul> </div> Here's the CSS: /* Main Menu Navigational Design */ #mnav { float: left; width: 100%; margin: 0px; padding: 0 15px; list-style: none; } #mnav li { float: left; margin: 0; padding: 0px; font-size: 16px; text-transform: Uppercase; } #mnav a, #mnav a.drop { float: left; display: block; margin: 0; padding: 4px 15px 2px 15px; /* Adujsted according to #mmenu heigth */ font-size: 14px; font-weight:bold; color: white; text-decoration: none; } * html #mnav { width:770px; } /* IE 6 HACK */ * html #mnav a, * html #mnav a.drop { padding: 7px 15px 2px 15px; /* Adujsted according to #mmenu heigth */ height:22px; } /* IE 7 HACK */ html > body #mnav a, html > body #mnav a.drop { height:22px; } #mnav a:hover { background-color: #8D97A5; } #mnav li.active a, #mnav li.active a:visited, #mnav li.active a:link, #mnav li.active a:hover { background-color: #8D97A5; } #mnav li.active ul.msubnav li a, #mnav li.active ul.msubnav li a:visited, #mnav li.active ul.msubnav li a:link { background-color:#919191; } #mnav li.active ul.msubnav li a:hover, #mnav li ul.msubnav li a:hover { background-color: #8D97A5; } /* Main nav, second level */ /***************************/ /*********COMMON************/ /***************************/ html > body .msubnav { position:absolute; margin:4px 0px 0px -20px; padding:0px; width:165px; background: #919191; list-style-type:none; display:block; visibility:hidden; } ..msubnav li, .msubnav li a { position:relative; width:165px; display:block; background: #919191; } /***************************/ /**********IE 7*************/ /***************************/ html > body .msubnav { margin:4px 0px 0px -20px; } /***************************/ /**********IE 6*************/ /***************************/ * html .msubnav { margin:5px 0px 0px -18px; } /***************************/ /***********FF**************/ /***************************/ *:lang(en) .msubnav { margin:7px 0px 0px -15px; } /* make the second level visible when hover on first level list OR link */ #mnav :hover ul, #mnav :hover table { visibility:visible; } -- Jake Churchill CF Webtools 11204 Davenport, Ste. 200b Omaha, NE 68154 http://www.cfwebtools.com 402-408-3733 x103 -- Jake Churchill CF Webtools 11204 Davenport, Ste. 200b Omaha, NE 68154 http://www.cfwebtools.com 402-408-3733 x103 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~| Create robust enterprise, web RIAs. Upgrade & integrate Adobe Coldfusion MX7 with Flex 2 http://ad.doubleclick.net/clk;56760587;14748456;a?http://www.adobe.com/products/coldfusion/flex2/?sdid=LVNU Archive: http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:266613 Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
