Home>

Let me show you the final renderings:

The following is the code for js to fade out the secondary menu:

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html;charset=gb2312" />
  <title>navigation menu secondary menu slide fade out</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <style type="text/css">
    {
      margin:0;
      padding:0;
      list-style-type:none;
    }
    a, img
    {
      border:0;
    }
    a, a:visited
    {
      color:#5e5e5e;
      text-decoration:none;
    }
    a:hover
    {
      color:#333;
      text-decoration:underline;
    }
    body
    {
      font:12px/180%arial, lucida, verdana, "Songti", helvetica, sans-serif;
      color:#333;
      background:#fff;
    }
    /* navbox * /
    .navbox, .nav li, .nav li.current a, .nav li.selected a span, .nav li a.selected, .nav li a.selected span
    {
      background:url (images/headerbg.png) no-repeat;
    }
    .navbox
    {
      height:39px;
      background-position:0 -138px;
      background-repeat:repeat-x;
      position:relative;
      z-index:9;
    }
    .nav
    {
      width:960px;
      margin:0 auto;
    }
    .nav li
    {
      float:left;
      height:39px;
      background-position:100%-99px;
      padding:0 3px 0 2px;
      position:relative;
    }
    .nav li.last
    {
      background:none;
    }
    .nav li a
    {
      float:left;
      display:block;
      padding:0 0 0 4px;
      height:39px;
      overflow:hidden;
    }
    .nav li a span
    {
      float:left;
      display:block;
      padding:0 4px 0 0;
      line-height:39px;
      font-size:14px;
      color:#fff;
      font-weight:800;
      cursor:pointer;
      width:142px;
      text-align:center;
    }
    .nav li.selected a, .nav li a.selected
    {
      background-position:0 -60px;
      text-decoration:none;
    }
    .nav li.selected a span, .nav li a.selected span
    {
      background-position:100%-60px;
      color:#ff7e00;
    }
    .nav li.selected .submenu
    {
      display:block;
    }
    .nav li .submenu
    {
      display:none;
      position:absolute;
      top:39px;
      left:6px;
    }
    .nav li .submenu
    {
      border-style:solid;
      border-width:0px 1px 1px 1px;
      border-color:#ddd;
      padding:0 5px 5px 5px;
      width:132px;
      background:#fff;
    }
    .nav li .submenu
    {
      -moz-border-radius:0 0 3px 3px;
      -webkit-border-radius:0 0 3px 3px;
      border-radius:0 0 3px 3px;
      -moz-box-shadow:0 5px 5px #d3d3d3;
      -webkit-box-shadow:0 5px 5px #d3d3d3;
      box-shadow:0 5px 5px #d3d3d3;
    }
    .nav li .submenu li
    {
      float:none;
      padding:0;
      background:none;
      height:auto;
      border-bottom:dotted 1px #bebebe;
    }
    .nav li .submenu li.last
    {
      border:none;
    }
    .nav li .submenu li a
    {
      float:none;
      padding:0;
      text-align:center;
      height:28px;
      line-height:28px;
      background:none;
    }
    .nav li .submenu li a:hover
    {
      background:#ddd;
      font-weight:800;
    }
  </style>
</head>
<body>
  <script type="text/javascript">
    function dropmenu (obj) {
      $(obj) .each (function () {
        var thespan=$(this);
        var themenu=thespan.find (". submenu");
        var tarheight=themenu.height ();
        themenu.css ({height:0, opacity:0});
        thespan.hover (
      function () {
        $(this) .addclass ("selected");
        themenu.stop (). show (). animate ({height:tarheight, opacity:1}, 400);
      },      function () {
        $(this) .removeclass ("selected");
        themenu.stop (). animate ({height:0, opacity:0}, 400, function () {
          $(this) .css ({display:"none"});
        });
      }
    );
     });
    }
    $(document) .ready (function () {
      dropmenu (". drop-menu-effect");
    });
  </script>
  <div>
    <div>
      <ul>
        <li><a target="_ blank" href="javascript:void (0);"><span>Homepage</span></a></li>
        <li><a target="_ blank" href="javascript:void (0);"><span>Content Management</span></a>
          <ul>
            <li><a href="#">Common article</a></li>
            <li><a href="#">Feature article</a></li>
            <li><a href="#">Material Articles</a></li>
          </ul>
        </li>
        <li><a target="_ blank" href="javascript:void (0);"><span>system help</span></a>
          <ul>
            <li><a href="#">Feedback</a></li>
            <li><a href="#">Official Communication Forum</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>
  • Previous Java implements the method of sorting objects in List
  • Next UIActivityViewController called in iOS9 system sharing