CSS下拉菜单-CSDN博客

本文链接：https://blog.csdn.net/iteye_1458/article/details/81622237

[b]原贴:[/b]
[url]http://www.helloxudan.net/2008/04/09/javascript-drop-down-menu.html[/url]
[b]演示地址:[/b]
[url]http://www.helloxudan.net/js/drop-down-menu/[/url]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>A</title>
        <link href="" rel="stylesheet" type="text/css">
        <style type="text/css"> 
         <!--
		 * {
			padding:0; 
			margin:0;
		}

		body {
			font-family:verdana, sans-serif; 
			font-size:small;
		}

		#menutree, #menutree li ul {
			list-style-type:none;
		}

		#menutree {
			margin:20px;
		}

		#menutree li {
			float:left;
			text-align:center;
			position:relative;
		}

		#menutree li a:link, #menutree li a:visited {
			display:block; 
			text-decoration:none; 
			color:#000; 
			width:120px; 
			height:40px; 
			line-height:40px; 
			border:1px solid #fff; 
			border-width:1px 1px 0 0; 
			background:#c5dbf2; 
			padding-left:10px; 
		}

		#menutree li a:hover {
			color:#fff;
			background:#2687eb;
		}
		#menutree li ul li a:hover {
			color:#fff;
			background:#6b839c; 
		}
		#menutree li ul {
			display:none;
			position:absolute; 
			top:40px;
			left:0;
			margin-top:1px;
			width:120px;
		}
		--> 
        </style>
        <script>
            function show(li){
                var subMenu = li.getElementsByTagName("ul")[0];
				subMenu.style.display = "block";
            }

			function hide(li) {
				var subMenu = li.getElementsByTagName("ul")[0];
				subMenu.style.display = "none";
			}




        </script>
    </head>
    <body>
        <ul id="menutree">
	        <li onmouseover="show(this)" onmouseout="hide(this)">
				<a href="#">栏目1</a>	
				<ul>
					<li><a href="#">栏目1->菜单1</a></li>
					<li><a href="#">栏目1->菜单2</a></li>
					<li><a href="#">栏目1->菜单3</a></li>
					<li><a href="#">栏目1->菜单4</a></li>
				</ul>
			</li>

			<li onmouseover="show(this)" onmouseout="hide(this)">
				<a href="#">栏目2</a>	
				<ul>
					<li><a href="#">栏目2->菜单1</a></li>
					<li><a href="#">栏目2->菜单2</a></li>
					<li><a href="#">栏目2->菜单3</a></li>
					<li><a href="#">栏目2->菜单4</a></li>
				</ul>
			</li>
        </ul>
    </body>
</html>

-------------------------------------------

[b]JS下拉菜单[/b]
参考《ppk on javascript》
感觉不如上面的实用呀！就当练习js了吧
-------------------------------------------
[color=red]style.css[/color]


* {
    padding: 0;
    margin: 0;
}

body {
    font-family: verdana, sans-serif;
    font-size: small;
}

.menutree, .menutree li ul {
    list-style-type: none;
}

.menutree {
    margin: 20px;
}

.menutree li {
    float: left;
    text-align: center;
    position: relative;
}

.menutree li a:link, .menutree li a:visited {
    display: block;
    text-decoration: none;
    color: #000;
    width: 120px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #fff;
    border-width: 1px 1px 0 0;
    background: #c5dbf2;
    padding-left: 10px;
}

.menutree li a:hover {
    color: #fff;
    background: #2687eb;
}

.menutree li ul li a:hover {
    color: #fff;
    background: #6b839c;
}

.menutree li ul {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    margin-top: 1px;
    width: 120px;
}

.menutree li ul.show {
    display: block;
    list-style-type: none;
}

[color=red]jsDropdownMenu.js[/color]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
        <title>A</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="../../lib/Apq.js" type="text/javascript"></script>

        <script type="text/javascript">
        	//document.write('<link href="style.css" rel="stylesheet" type="text/css">');
        	var dropdownMenu = {
				dom: com.apq.dom,

				evt: com.apq.event,

				init: function() {
					if(!dropdownMenu.dom.isDOM()) return;

					var lists = dropdownMenu.dom.getElementsByClassName("menutree", "ul", document.body);
					for (var i=0;i<lists.length;i++) {
						lists[i].onmouseover = dropdownMenu.navMouseOver;
						lists[i].onmouseout = dropdownMenu.navMouseOut;
						var listItems = lists[i].getElementsByTagName('li');
						for (var j=0;j<listItems.length;j++) {
							var test = listItems[j].getElementsByTagName('ul')[0];
							if (test) {
								listItems[j].firstChild.onfocus = dropdownMenu.navMouseOver;
								listItems[j].relatedItem = test;
							}
						}
					}
					dropdownMenu.currentlyOpenedMenus = new Array();
				},

				navMouseOver: function(e) {
					var target = dropdownMenu.evt.getTarget(e);
					if (target.nodeName == "UL") return;
					while(target.nodeName != "LI") {
						target = target.parentNode;
					}

					dropdownMenu.foldMenuIn(target);
					if (target.relatedItem && !target.relatedItem.opened) {
						dropdownMenu.dom.addClass(target.relatedItem, "show");
						target.relatedItem.opened = true;
						dropdownMenu.currentlyOpenedMenus.push(target.relatedItem);
					}

				},

				navMouseOut: function(e) {
					var relatedNode = dropdownMenu.evt.getRelatedNode(e);
					dropdownMenu.foldMenuIn(relatedNode);
				},

				foldMenuIn: function(targetNode) {
					if (!targetNode) return;
					var newCurrentlyOpenedMenus = new Array();
					for (var i=0;i<dropdownMenu.currentlyOpenedMenus.length;i++) {
						if (!dropdownMenu.dom.containsElement(dropdownMenu.currentlyOpenedMenus[i],targetNode)) {
							dropdownMenu.currentlyOpenedMenus[i].className = "";
							dropdownMenu.currentlyOpenedMenus[i].parentNode.className = "";
							dropdownMenu.currentlyOpenedMenus[i].opened = false;
						}
						else
							newCurrentlyOpenedMenus.push(dropdownMenu.currentlyOpenedMenus[i]);
					}
					dropdownMenu.currentlyOpenedMenus = newCurrentlyOpenedMenus;
				}

			};
			com.apq.event.addSimpleEvent(window, "load", dropdownMenu.init);
		</script>
    </head>
    <body>
        <ul class="menutree">
	        <li>
				<a href="#">栏目1</a>	
				<ul>
					<li><a href="#">栏目1->菜单1</a></li>
					<li><a href="#">栏目1->菜单2</a></li>
					<li><a href="#">栏目1->菜单3</a></li>
					<li><a href="#">栏目1->菜单4</a></li>
				</ul>
			</li>

			<li>
				<a href="#">栏目2</a>	
				<ul>
					<li><a href="#">栏目2->菜单1</a></li>
					<li><a href="#">栏目2->菜单2</a></li>
					<li><a href="#">栏目2->菜单3</a></li>
					<li><a href="#">栏目2->菜单4</a></li>
				</ul>
			</li>
        </ul>
    </body>
</html>