                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /形形色色的下拉菜單

實(shí)現(xiàn)不了隱藏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
? ?<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
? ?<style type="text/css">

? ? ? ?/* CSS Document */
? ? ? ?html, body, ul, li {
? ? ? ? ? ?padding: 0;
? ? ? ? ? ?margin: 0;
? ? ? ?}

? ? ? ?body {
? ? ? ? ? ?font: 10pt;
? ? ? ?}

? ? ? ?ul, li {
? ? ? ? ? ?list-style-type: none;
? ? ? ? ? ?text-transform: capitalize;
? ? ? ?}

? ? ? ?.clear {
? ? ? ? ? ?clear: both;
? ? ? ? ? ?*display: inline;?
? ? ? ?}

? ? ? ?/*menu*/
? ? ? ?#menu {
? ? ? ? ? ?margin: 100px auto;
? ? ? ? ? ?display: block;
? ? ? ? ? ?width: 1000px;
? ? ? ? ? ?height: 34px;
? ? ? ?}

? ? ? ?#nav {
? ? ? ? ? ?display: block;
? ? ? ?}

? ? ? ?#nav .mainlevel {
? ? ? ? ? ?float: left;
? ? ? ? ? ?background: #3f240e;
? ? ? ? ? ?text-align: center;
? ? ? ? ? ?display: block;
? ? ? ?}

? ? ? ?#nav .mainlevel a {
? ? ? ? ? ?color: #fff;
? ? ? ? ? ?text-decoration: none;
? ? ? ? ? ?line-height: 34px;
? ? ? ? ? ?height: 34px;
? ? ? ? ? ?text-align: center;
? ? ? ? ? ?padding: 0 20px;
? ? ? ? ? ?display: block;
? ? ? ? ? ?_width: 48px;
? ? ? ?}

? ? ? ?#nav .mainlevel a:hover {
? ? ? ? ? ?color: #3f240e;
? ? ? ? ? ?text-decoration: none;
? ? ? ? ? ?background: #678900 url(images/slide-pannel_14.png) 0 0 repeat-x;
? ? ? ?}

? ? ? ?#nav .mainlevel ul {
? ? ? ? ? ?position: absolute;
? ? ? ? ? ?display: none;
? ? ? ? ? ?*width: 2000px;?
? ? ? ? ? ?height: 0;
? ? ? ? ? ?overflow: hidden;
? ? ? ?}

? ? ? ?#nav .mainlevel li {
? ? ? ? ? ?float: left;
? ? ? ? ? ?background: #3f240e;
? ? ? ?}

? ? ? ?#nav .mainlevel li a {
? ? ? ? ? ?padding: 0 12px;
? ? ? ? ? ?line-height: 24px;
? ? ? ? ? ?height: 24px;
? ? ? ? ? ?display: block;
? ? ? ? ? ?_padding-bottom: 6px;?
? ? ? ?}

? ? ? ?#nav .mainlevel li a:hover {
? ? ? ? ? ?color: #3f240e;
? ? ? ? ? ?text-decoration: none;
? ? ? ? ? ?background: #678900 url(images/slide-pannel_14.png) 0 0 repeat-x;
? ? ? ?}

? ? ? ?#nav li a em
? ? ? ?{
? ? ? ? ? ?padding: 0 3px;
? ? ? ?}

? ? ? ?.note {
? ? ? ? ? ?color: #3f240e;
? ? ? ? ? ?border-right: 1px solid #fff;
? ? ? ? ? ?background: #678900 url(images/slide-pannel_14.png) 0 0 repeat-x;
? ? ? ? ? ?display: block;
? ? ? ? ? ?line-height: 34px;
? ? ? ? ? ?padding: 0 3em;
? ? ? ?}

? ? ? ?.Triangle_con {
? ? ? ? ? ?height: 9px;
? ? ? ? ? ?background: url(images/bird.png) 36px 0 no-repeat;
? ? ? ? ? ?display: block;
? ? ? ? ? ?_margin-bottom: -6px;?
? ? ? ?}

? ? ? ?.log {
? ? ? ? ? ?margin: 100px auto;
? ? ? ? ? ?width: 1000px;
? ? ? ? ? ?text-transform: capitalize;
? ? ? ? ? ?line-height: 200%;
? ? ? ?}
? ?</style>?
? ?<script>
? ? ? ?window.onload = function () {
? ? ? ? ? ?var lis = document.getElementsByTagName('li');
? ? ? ? ? ?for (var i = 0; i < lis.length; i++) {
? ? ? ? ? ? ? ?lis[i].onmouseover = function () {
? ? ? ? ? ? ? ? ? ?var u = this.getElementsByTagName('ul')[0];
? ? ? ? ? ? ? ? ? ?if (u != undefined) {
? ? ? ? ? ? ? ? ? ? ? ?u.style.display = 'block';
? ? ? ? ? ? ? ? ? ? ? ?mouseDown(u.id);
? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ?};
? ? ? ? ? ? ? ?lis[i].onmouseout = function () {
? ? ? ? ? ? ? ? ? ?var u = this.getElementsByTagName('ul')[0];
? ? ? ? ? ? ? ? ? ?if (u != undefined) {
? ? ? ? ? ? ? ? ? ? ? ?mouseLeaves(u.id);
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?};
? ? ? ?function mouseDown(id) {
? ? ? ? ? ?var ulist = document.getElementById(id);
? ? ? ? ? ?var listH = ulist.offsetHeight;
? ? ? ? ? ?listH += 1;
? ? ? ? ? ?if (listH <= 35) {
? ? ? ? ? ? ? ?ulist.style.height = listH + 'px';
? ? ? ? ? ? ? ?setTimeout("mouseDown('" + id + "')", 10);
? ? ? ? ? ?} else {
? ? ? ? ? ? ? ?return;
? ? ? ? ? ?}
? ? ? ?}
? ? ? ?function mouseLeaves(id) {
? ? ? ? ? ?var ulist = document.getElementById(id);
? ? ? ? ? ?var listH = ulist.offsetHeight;
? ? ? ? ? ?listH -= 1;
? ? ? ? ? ?if (listH >= 0) {
? ? ? ? ? ? ? ?ulist.style.height = listH + 'px';
? ? ? ? ? ? ? ?setTimeout("mouseLeaves('" + id + "')", 10);
? ? ? ? ? ?} else {
? ? ? ? ? ? ? ?ulist.style.display = 'none';
? ? ? ? ? ? ? ?return;
? ? ? ? ? ?}
? ? ? ?}
? ?</script>
</head>
<body>

<div id="menu">
? ?<ul id="nav">
? ? ? ?<li class="mainlevel"><span class="note">慕課網(wǎng)</span></li>
? ? ? ?<li class="mainlevel" id="mainlevel_01"><a href="#">課程大廳</a>
? ? ? ? ? ?<ul class="sub_nav_01" id="menu_S">
? ? ? ? ? ? ? ?<span class="Triangle_con"></span>
? ? ? ? ? ? ? ?<li><a href="#">JavaScript</a></li>
? ? ? ? ? ? ? ?<li><a href="#">JQuery</a></li>
? ? ? ? ? ? ? ?<li><a href="#">HTML</a></li>
? ? ? ? ? ?</ul>
? ? ? ?</li>
? ? ? ?<li class="mainlevel" id="mainlevel_02"><a href="#">學(xué)習(xí)中心</a>
? ? ? ? ? ?<ul class="sub_nav_01" id="menu_b">
? ? ? ? ? ? ? ?<span class="Triangle_con"></span>
? ? ? ? ? ? ? ?<li><a href="#">JavaScript</a></li>
? ? ? ? ? ? ? ?<li><a href="#">JQuery</a></li>
? ? ? ? ? ? ? ?<li><a href="#">HTML</a></li>
? ? ? ? ? ?</ul>
? ? ? ?</li>
? ? ? ?<li class="mainlevel"><a href="#">個(gè)人中心</a></li>
? ? ? ?<li class="mainlevel"><a href="#">關(guān)于我們</a></li>

? ?</ul>
</div>
</body>
</html>