SuperFish插件实现鼠标停留浮动的菜单栏.

superfish实现浮动菜单栏, 只需把ul的class指定为sf-menu就可以了, 简单地一逼...

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>superfish</title>
		<link href="js/superfish/superfish.css" rel="stylesheet" type="text/css" media="screen" />
		<script type="text/javascript" src="js/superfish/superfish.js"></script>
	</head>

	<body>
		<ul class="sf-menu">
			<li class="active">
				<a href="index.html">Home</a>
				<ul>
					<li>
						<a href="index.html">Main Homepage</a>
					</li>
					<li>
						<a href="index-scrolling.html">Scrolling Homepage</a>
					</li>
					<li>
						<a href="index-hosting.html">Hosting Homepage 1</a>
					</li>
					<li>
						<a href="index-hosting2.html">Hosting Homepage 2</a>
					</li>
					<li>
						<a href="index-beauty.html">Beauty Homepage</a>
					</li>
					<li>
						<a href="index-alternate.html">Sidebar Homepage</a>
					</li>
					<li>
						<a href="#">Sliders</a>
						<ul>
							<li>
								<a href="index-flex.html">FlexSlider</a>
							</li>
							<li>
								<a href="index-nivo.html">Nivo Slider</a>
							</li>
							<li>
								<a href="index-coin.html">Coin Slider</a>
							</li>
							<li>
								<a href="index-elasticslide.html">Elastic Slider</a>
							</li>
							<li>
								<a href="index-alternate.html">Image Rotator</a>
							</li>
							<li>
								<a href="index-slideshow.html">Simple Slideshow</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">Pages</a>
				<ul>
					<li>
						<a href="#">Fullwidth Pages</a>
						<ul>
							<li>
								<a href="about-fullwidth.html">About Fullwidth</a>
							</li>
							<li>
								<a href="services-fullwidth.html">Services Fullwidth</a>
							</li>
							<li>
								<a href="product-fullwidth.html">Product Fullwidth</a>
							</li>
							<li>
								<a href="price-fullwidth.html">Price Fullwidth</a>
							</li>
							<li>
								<a href="price-chart-fullwidth.html">Price Chart</a>
							</li>
							<li>
								<a href="404-page.html">404 Page</a>
							</li>
							<li>
								<a href="fullwidth.html">Fullwidth</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Right Sidebar Pages</a>
						<ul>
							<li>
								<a href="about.html">About Sidebar</a>
							</li>
							<li>
								<a href="services.html">Services Sidebar</a>
							</li>
							<li>
								<a href="product.html">Product Sidebar</a>
							</li>
							<li>
								<a href="price.html">Price Sidebar</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Left Sidebar Pages</a>
						<ul>
							<li>
								<a href="left-sidebar.html">Left Sidebar</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">Elements</a>
				<ul>
					<li>
						<a href="elements.html">Elements</a>
					</li>
					<li>
						<a href="#">Other Elements</a>
						<ul>
							<li>
								<a href="headings.html">Headings</a>
							</li>
							<li>
								<a href="blockquotes.html">Blockquotes</a>
							</li>
							<li>
								<a href="dropcaps.html">Dropcaps</a>
							</li>
							<li>
								<a href="list-icons.html">List Icons</a>
							</li>
							<li>
								<a href="buttons.html">CSS3 Buttons</a>
							</li>
							<li>
								<a href="notification.html">Notifications</a>
							</li>
							<li>
								<a href="tables.html">Tables</a>
							</li>
							<li>
								<a href="tabs-accordion.html">Tabs & Accordion</a>
							</li>
							<li>
								<a href="columns-fullwidth.html">Columns Fullwidth</a>
							</li>
							<li>
								<a href="columns.html">Columns Left Sidebar</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">Gallery</a>
				<ul>
					<li>
						<a href="#">Gallery Fullwidth</a>
						<ul>
							<li>
								<a href="gallery-1col-fullwidth.html">One Column Fullwidth</a>
							</li>
							<li>
								<a href="gallery-2cols-fullwidth.html">Two Columns Fullwidth</a>
							</li>
							<li>
								<a href="gallery-3cols-fullwidth.html">Three Columns Fullwidth</a>
							</li>
							<li>
								<a href="gallery-4cols-fullwidth.html">Four Columns Fullwidth</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Gallery Sidebar</a>
						<ul>
							<li>
								<a href="gallery-1col.html">One Column</a>
							</li>
							<li>
								<a href="gallery-2cols.html">Two Columns</a>
							</li>
							<li>
								<a href="gallery-3cols.html">Three Columns</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Gallery Filterable</a>
						<ul>
							<li>
								<a href="gallery-2cols-filterable-fullwidth.html">Two Column Fullwidth</a>
							</li>
							<li>
								<a href="gallery-3cols-filterable-fullwidth.html">Three Columns Fullwidth</a>
							</li>
							<li>
								<a href="gallery-4cols-filterable-fullwidth.html">Four Columns Fullwidth</a>
							</li>
							<li>
								<a href="gallery-1col-filterable.html">One Columns Sidebar</a>
							</li>
							<li>
								<a href="gallery-2cols-filterable.html">Two Columns Sidebar</a>
							</li>
							<li>
								<a href="gallery-3cols-filterable.html">Three Columns Sidebar</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="gallery-carousel.html">Carousel Gallery</a>
					</li>
					<li>
						<a href="gallery-montage.html">Montage Gallery</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">Blog</a>
				<ul>
					<li>
						<a href="blog-list.html">List Style</a>
					</li>
					<li>
						<a href="blog-grid.html">Grid Style</a>
					</li>
					<li>
						<a href="blog-list-alternate.html">Alternate Style</a>
					</li>
					<li>
						<a href="single.html">Single Page</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="contact.html">Contact</a>
			</li>
		</ul>
	</body>

</html>

 效果如下:

 

posted @ 2017-01-30 21:20  Montauk  阅读(285)  评论(0)  编辑  收藏  举报