一个新的CSS菜单代码

<html>

<head>

if (!document.getElementById)

document.getElementById = function() { return null; }

function initializeMenu(menuId, actuatorId) {

var menu = document.getElementById(menuId);

var actuator = document.getElementById(actuatorId);

if (menu == null || actuator == null) return;

//if (window.opera) return; // I’m too tired

actuator.parentNode.style.backgroundImage = "url(/images/plus.gif)";

actuator.onclick = function() {

var display = menu.style.display;

this.parentNode.style.backgroundImage =

(display == "block") ? "url(/images/plus.gif)" : "url(/images/minus.gif)";

menu.style.display = (display == "block") ? "none" : "block";

return false;

}

window.onload = function() {

initializeMenu("productsMenu", "productsActuator");

initializeMenu("newPhonesMenu", "newPhonesActuator");

initializeMenu("compareMenu", "compareActuator");

}

</ script>

<style>

body {

font-family: verdana, helvetica, arial, sans-serif;

}

#mainMenu {

background-color: #EEE;

border: 1px solid #CCC;

color: #000;

width: 203px;

}

#menuList {

margin: 0px;

padding: 10px 0px 10px 15px;

}

li.menubar {

background: url(/images/plus.gif) no-repeat 0em 0.3em;

font-size: 12px;

line-height: 1.5em;

list-style: none outside;

}

.menu, .submenu {

display: none;

margin-left: 15px;

padding: 0px;

}

.menu li, .submenu li {

background: url(/images/square.gif) no-repeat 0em 0.3em;

list-style: none outside;

}

a.actuator {

background-color: transparent;

color: #000;

font-size: 12px;

padding-left: 15px;

text-decoration: none;

}

a.actuator:hover {

text-decoration: underline;

}

.menu li a, .submenu li a {

background-color: transparent;

color: #000;

font-size: 12px;

padding-left: 15px;

text-decoration: none;

}

.menu li a:hover, submenu li a:hover {

/*border-bottom: 1px dashed #000;*/

text-decoration: underline;

}

span.key {

text-decoration: underline;

}

</style>

</head>

<body>

Phones

<li>

New Phones

</ul>

</li>

<li>

Compare

<li>All Phones</li>

<li>Service Provider</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

</body>

</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

一个新的CSS菜单代码_经验交流