> The menus on two rows are confilcting with each other! You
> can see my example here:
> http://www.studio-pit.nl/ish/menu/topmenu/dubbelmenu.html I
> tried, z-index but that did not work.
>
> I tried another solution. If you click on a item on the top
> row, two items on the bottom row will disapear.
> You can see my example here
> http://joel.sitemasters.be/?pagina=inc/menu_left this
> solution works good in IE and firefox but not in safari. it
> is a requirement to work on all platforms. i hope somebody
> can help me out!
Hi Rick.
Ingo pretty much covered it while I was busy re-writing some of your page to
see if I could remove some of the tables. It makes it kinda tough with all
those tds and trs in there...plus, there's some img tags. Probably why
nobody responded for until your third post. ;)
I cleaned up the code some while I was working on it and wrote a nice little
swapClasser for ya.
It's probably too little, too late, but here's the code I concocted for you.
You should be able to remove that parent div if you want and just plug the
uls into your page in place of the tables. Keeping the parent div won't hurt
anything either, except for adding extraneous code.
Hope it helps.
Bill Brown
Webmaster, MacNimble.com
<!-- Begin Code Sample -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
/* <![CDATA[ */
#topNav {
border: 1px solid #666;
margin: 0 auto;
width: 700px;
}
#topNav:after {
clear: both !important;
content: "..." !important;
display: block !important;
font-size: 1px !important;
height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
ul {
clear: left;
margin: 0;
padding: 0;
width: 100%;
}
li {
display: inline;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 24.9%;
}
ul li ul {
display: none;
}
ul li:hover,
ul li.hovered {
background: #dedede;
position: relative;
}
ul li:hover ul,
ul li.hovered ul {
display: block;
z-index: 1000;
}
ul ul {
background: #fff;
border: 1px solid #669;
position: absolute;
top: 2em;
left: 0;
}
li li {
display: block;
float: none;
margin: 0;
padding: 0;
width: auto;
}
a {
color: #999;
display: block;
font-weight: bold;
padding: 0 0.5em 1em 0.5em;
text-decoration: none;
}
a:hover {
background: #dedede;
color: #000;
position: relative;
}
/* ]]> */
</style>
<script type="text/javascript">
ieHover={
init : function () {
if (!document.all&&document.getElementById) {return}
var liArray = document.getElementsByTagName("LI");
for (i=0;i<liArray.length;i++) {
liArray[i].onmouseover=function(){this.className="hovered"};
liArray[i].onmouseout=function(){this.className=""};
}
}
}
window.onload=ieHover.init;
</script>
</head>
<body>
<div id="topNav">
<ul
><li><a href="#">parents</a><ul
><li><a href="#">subNav One</a></li
><li><a href="#">subNav Two</a></li
><li><a href="#">subNav Three</a></li
></ul
></li
><li><a href="#">parents</a><ul
><li><a href="#">subNav One</a></li
><li><a href="#">subNav Two</a></li
><li><a href="#">subNav Three</a></li
></ul
></li
><li><a href="#">parents</a><ul
><li><a href="#">subNav One</a></li
><li><a href="#">subNav Two</a></li
><li><a href="#">subNav Three</a></li
></ul
></li
><li><a href="#">parents</a><ul
><li><a href="#">subNav One</a></li
><li><a href="#">subNav Two</a></li
><li><a href="#">subNav Three</a></li
></ul
></li
></ul>
<ul
><li><a href="#">admissions</a><ul
><li><a href="#">subNav One</a></li
><li><a href="#">subNav Two</a></li
><li><a href="#">subNav Three</a></li
></ul
></li
><li><a href="#">students</a><ul
><li><a href="#">subNav One</a></li
><li><a href="#">subNav Two</a></li
><li><a href="#">subNav Three</a></li
></ul
></li
><li><a href="#">community</a><ul
><li><a href="#">subNav One</a></li
><li><a href="#">subNav Two</a></li
><li><a href="#">subNav Three</a></li
></ul
></li
><li><a href="#">employment</a><ul
><li><a href="#">subNav One</a></li
><li><a href="#">subNav Two</a></li
><li><a href="#">subNav Three</a></li
></ul
></li
></ul>
</div>
</body>
</html>
<!-- End Code Sample -->
___________________________________________________________
$0 Web Hosting with up to 200MB web space, 1000 MB Transfer
10 Personalized POP and Web E-mail Accounts, and much more.
Signup at www.doteasy.com
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
