纯css下拉菜单，可以设置下拉菜单为多列

珠宝网站菜单栏解析

最新推荐文章于 2025-09-08 22:09:36 发布

最新推荐文章于 2025-09-08 22:09:36 发布 · 855 阅读

文章标签：

#前端 #ViewUI

本文解析了一个珠宝电子商务网站的菜单栏结构，展示了不同类型的珠宝产品分类及其子类别，包括婚戒、结婚套装、钻石戒指等多种商品类型。

部署运行你感兴趣的模型镜像

http://www.corange.cn//uploadfiles/20120226144630_38759.jpg

演示地址:http://www.corange.cn/demo/3806/index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML><HEAD>

<META http-equiv=Content-Type content=text/html;CHARSET=utf-8>

<LINK href="styles.css"
type=text/css rel=stylesheet>

<DIV class=menu-bar>
<UL class=main-menu>
<LI class=topLevel style="WIDTH: 139px"><A
href="engagement-rings-wedding/566/">BRIDAL
GALLERY</A>
<DIV class=sub-menu>
<TABLE>
<TBODY>
<TR>
<TD vAlign=top>
<UL>
<LI class=sub-menu-li nowrap><A
href="sc-engagement-rings_76/"
nowrap>Engagement Rings</A>
<LI class=sub-menu-li nowrap><A
href="sc-wedding-sets_82/"
nowrap>Wedding Sets</A>
<LI class=sub-menu-li nowrap><A
href="sc-multi-stone_261/"
nowrap>Multi Stone Rings</A>
<LI class=sub-menu-li nowrap><A
href="sc-three-stone_137/"
nowrap>Three Stone Rings</A>
<LI class=sub-menu-li nowrap><A
href="sc-solitaire_78/"
nowrap>Solitaire Rings</A>
<LI class=sub-menu-li nowrap><A
href="sc-engagement-rings_76/sts-round_686/"
nowrap>Round Diamonds</A> </LI></UL></TD>
<TD vAlign=top>
<UL>
<LI class=sub-menu-li nowrap><A
href="sc-engagement-rings_76/sts-princess_687/"
nowrap>Princess Diamonds</A>
<LI class=sub-menu-li nowrap><A
href="sc-engagement-rings_76/sts-marquise_689/"
nowrap>Marquise Diamonds</A>
<LI class=sub-menu-li nowrap><A
href="wedding-rings/524/"
nowrap>Wedding Bands</A>
<LI class=sub-menu-li nowrap><A
href="anniversary-jewelry/449/"
nowrap>Anniversary Rings</A>
<LI class=sub-menu-li nowrap><A
href="sc-engagement-rings_76/so-bestsellers/"
nowrap>Top Selling</A>
<LI class=sub-menu-li nowrap><A
href="sc-engagement-rings_76/so-ratings_i.avgRating%20DESC/"
nowrap>Top Rated</A> </LI></UL></TD></TR></TBODY></TABLE></DIV></LI>
<LI class=topLevel style="WIDTH: 77px"><A
href="rings/19/">RINGS</A>
<DIV class=sub-menu>
<TABLE>
<TBODY>
<TR>
<TD vAlign=top>
<UL>
<LI class=sub-menu-li nowrap><A
href="c-rings_35/s-diamond_63/g-for-her_151+338/"
nowrap>Diamond Rings</A>
<LI class=sub-menu-li nowrap><A
href="c-rings_35/s-gemstone_~63+~66+~452+~363+~58+~64+~483/"
nowrap>Gemstone Rings</A>
<LI class=sub-menu-li nowrap><A
href="c-rings_35/sc-promise_84/"
nowrap>Promise Rings</A>
<LI class=sub-menu-li nowrap><A
href="c-rings_35/sc-colored-diamonds_259/"
nowrap>Colored Diamond Rings</A>
<LI class=sub-menu-li nowrap><A
href="sc-engagement-rings_76/"
nowrap>Engagement Rings</A>
<LI class=sub-menu-li nowrap><A
href="sc-wedding-sets_82/"
nowrap>Wedding Sets</A> </LI></UL></TD>
<TD vAlign=top>
<UL>
<LI class=sub-menu-li nowrap><A
href="c-rings_35/sc-anniversary_138/"
nowrap>Anniversary Rings</A>
<LI class=sub-menu-li nowrap><A
href="wedding-rings/524/"
nowrap>Wedding Bands</A>
<LI class=sub-menu-li nowrap><A
href="c-rings_35/m-sterling-silver_211/"
nowrap>Sterling Silver Rings</A>
<LI class=sub-menu-li nowrap><A
href="c-rings_35/so-bestsellers/"
nowrap>Top Selling</A>
<LI class=sub-menu-li nowrap><A
href="c-rings_35/so-ratings_i.avgRating%20DESC/"
nowrap>Top Rated</A>
<LI class=sub-menu-li nowrap><A
href="c-rings_35/so-newest_i.id%20DESC/"
nowrap>Newest</A> </LI></UL></TD></TR></TBODY></TABLE></DIV></LI>

</UL></DIV>

</BODY></HTML>

原文地址:http://www.corange.cn/archives/2012/02/3806.html