一个新的CSS菜单代码


答案：<html>

<head>

<script>

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>

<div id="mainMenu">

      <ul id="menuList">

        <li class="menubar">

          Phones

          <ul id="productsMenu" class="menu">

            <li>

              New Phones

              <ul id="newPhonesMenu" class="submenu">

                <li>9290</li>

                <li>8390</li>

                <li>8290</li>

                <li>8270</li>

              </ul>

            </li>

            <li>

              Compare

              <ul id="compareMenu" class="submenu">

                <li>All Phones</li>

                <li>Service Provider</li>

              </ul>

            </li>

          </ul>

        </li>

      </ul>

    </div>

  </body>

</html>


  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上一个：创建无表格网站的原因和原则译文
下一个：为什么要建立web标准与web标准的好处
更多图片编程知识: