I'm not a CSS guru, so I can't really speak on that. But is there a reason
you're not simply using JavaScript?
My standard way of doing this would be:
<ul>
<li><a ...>Item 1</a>
<ul>
<li><a ...>Subitem 1a</a></li>
<li><a ...>Subitem 1b</a></li>
<li><a ...>Subitem 1c</a></li>
</ul>
</li>
<li><a ...>Item 2</a>
<ul>
<li><a ...>Subitem 2a</a></li>
<li><a ...>Subitem 2b</a></li>
<li><a ...>Subitem 2c</a></li>
</ul>
</li>
</ul>
Notice that I'm not enclosing the entire submenu in the a. In fact the
anchor is probably unnecessary unless you want to link pages to the top
level menu as well.
And attach a function to the mouseover event of the li's that shows child
ul's, and one to the mouseout that hide's them.
Sorry if this doesn't help.
Blair
On 1/16/07, Jake Churchill <[EMAIL PROTECTED]> wrote:
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
>
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
