书中代码 5.17

最新推荐文章于 2022-06-16 17:04:30 发布

王绪超

最新推荐文章于 2022-06-16 17:04:30 发布

阅读量610

点赞数

本文链接：https://blog.youkuaiyun.com/wxc2014/article/details/21883067

版权

<html>
<head>
	<script type="text/javascript" src="jQuery/jquery-1.11.0.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#menu ul').hide();
				$('#menu li a').click(function(){
					$(this).next().slideToggle('slow');
				});
		});
	</script>
	<style type="text/css">
		li a {
			display:inline-block;
		}
		body {
			font-family:Arical,sans-serif;
			font-size:0.9em;
		}
		p {
	    	line-height:1.5em;
		}
		ul#menu,ul#menu ul {/*stylizing the menu and the list nested in the menu*/
	    	list-style-type:none;
	    	margin:0;
	    	padding:0;
	    	width:10em;
		}
		ul#menu a { /*stylizing the <a> elements nested in the menu */
			display:block;
			text-decoration:none;
		}
		ul#menu li { /* stylizing the list items nested in the menu*/
			margin-top:1px;
		}
		ul#menu li a {/* stylizing the <a> elements nested in list items of the menu*/
			background:brown;
			color:#fff;
			padding:0.5em;
		}
		ul#menu li a:hover { /*stylizing the <a> elements nested in list items of the menu when mouse is placed or move over them*/
			background:black;
		}
		ul#menu li ul a {
			background:grey;
			color:white;
			padding-left:20px;
		}
		ul#menu li ul li a:hover{
			background:#aaa;
			color:white;
			border-left:5px grey solide;
			padding-left:15px;
		}
    </style>
</head>
<body>
	<p>Product Menu</p>
	<h4>Product Categories</h4>
	<ul id="menu">
		<li><a>Laptops</a>
			<ul>
				<li><a href="">L-150</a></li>
				<li><a href="">L-160</a></li>
				<li><a href="">L-180</a></li>
				<li><a href="">L-260</a></li>
				<li><a href="">L-678</a></li>
			</ul>
		</li>
		<li><a>Phones</a>
			<ul>
				<li><a href="">P-1150</a></li>
				<li><a href="">P-1260</a></li>
				<li><a href="">P-1180</a></li>
				<li><a href="">P-2260</a></li>
				<li><a href="">P-6708</a></li>
			</ul>
		</li>
		<li><a>Cameras</a>
			<ul>
				<li><a href="">C-50</a></li>
				<li><a href="">C-60</a></li>
				<li><a href="">C-80</a></li>
				<li><a href="">C-60</a></li>
				<li><a href="">C-80</a></li>
			</ul>
		</li>
		<li><a>Music Players</a>
			<ul>
				<li><a href="">MP-1150</a></li>
				<li><a href="">MP-1260</a></li>
				<li><a href="">MP-1180</a></li>
				<li><a href="">MP-2260</a></li>
				<li><a href="">MP-6708</a></li>
			</ul>
		</li>
	</ul>
</body>
</html>