Afternoon all!
Trying to edit a webtemplate to have a fancy dropdown menu using CSS and a drop of javascript.
Works perfect on Firefox but suprise suprise goes to pap on IE.
Link is: http://www.abluegrape.com/index.php
Any ideas why it won't work in IE?
Javascript is:
CSS is:
and the bit in the HTML is:
Like I said - any help appreciated as its doing me scone in now!!!
M.
Trying to edit a webtemplate to have a fancy dropdown menu using CSS and a drop of javascript.
Works perfect on Firefox but suprise suprise goes to pap on IE.
Link is: http://www.abluegrape.com/index.php
Any ideas why it won't work in IE?
Javascript is:
Code:
<script type="text/javascript">
// JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>CSS is:
Code:
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
position: relative;
float: left;
width: 16.6%;
}
li ul {
position: absolute;
left: 0; /* Set 1px less than menu width */
top: auto;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 2px;
}
/* commented backslash mac hiding hack \*/
* html ul li a {height:1%}
/* end hack */
/* this sets all hovered lists to purple */
li:hover a, li.over a, li:hover li a:hover, li.over li a:hover {
color: #fff;
background-color: #aa10d1;
}
/* set dropdown to default */
li:hover li a, li.over li a {
color: #777;
background-color: #fff;
}
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block;} /* The magic */and the bit in the HTML is:
Code:
<ul id="nav">
<li><a href="<?=$base?>/index.php">Home</a></li>
<li><a href="<?=$base?>/#">Member Area</a>
<ul>
<?php if ($LoggedIn== "1"){ ?>
<li><a href="<?=$securebase?>/welcome.php">My Account</a></li>
<li><a href="<?=$base?>/cart.php">My Basket</a></li>
<li><a href="<?=$base?>/helpdesk.php?search=open">Support System</a></li>
<li><a href="<?=$securebase?>/LogOut.php">Logout</a></li>
<?php if ($adminflag > "0"){?>
<li><a href="<?=$securebase?>/admin/adminwelcome.php">Admin Menu</a></li>
<?php }?>
<?php }else{ ?>
<li><a href="<?=$securebase?>/aLogIn.php">Login</a></li>
<li><a href="<?=$securebase?>/createacct.php">Create Account</a></li>
<?php } ?>
</ul>
</li>
<li><a href="<?=$base?>/#">Services</a>
<ul>
<li><a href="<?=$base?>/#">Direct Admin Shared Hosting</a></li>
<li><a href="<?=$base?>/#">Direct Admin Reseller Hosting</a></li>
<li><a href="<?=$base?>/#">Dedicated Servers</a></li>
</ul>
</li>
<li><a href="<?=$base?>/#">Domains</a>
<ul>
<li><a href="<?=$base?>/check.php">Register A Domain</a></li>
<li><a href="<?=$base?>/transcheck.php">Transfer A Domain</a></li>
<li><a href="<?=$base?>/pricing.php" target="_blank" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','templates/<?=$templatedir?>/images/b2a-2.jpg',1)" onClick='window.open("<?=$base?>/pricing.php","pricing","width=475,height=415,status=yes,scrollbars=1,resizable=1");return false;'>Domain Prices</a></li>
<li><a href="<?=$base?>/whois.php">Whois Lookup</a></li>
</ul>
</li>
<li><a href="<?=$base?>/#">Website Design</a>
<ul>
<li><a href="<?=$base?>/#">Logo Creation</a></li>
<li><a href="<?=$base?>/#">Web Page Design</a></li>
<li><a href="<?=$base?>/#">Web Templates</a></li>
</ul>
</li>
<li><a href="<?=$base?>/contact.php">Contact Us</a></li>
</ul>Like I said - any help appreciated as its doing me scone in now!!!
M.