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
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"farcry-dev" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/farcry-dev?hl=en
-~----------~----~----~----~------~----~------~--~---
