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>
效果如下:
