样式表代码

　　以下是引用片段：

　　#submenu{

　　MARGIN:0px8px0px8px;

　　PADDING:4px0px0px0px;

　　BORDER:#fff1pxsolid;

　　BACKGROUND:#dfdfdf;

　　COLOR:#666;

　　HEIGHT:25px;}

　　#submenuul{

　　CLEAR:left;

　　MARGIN:0px;

　　PADDING:0px;

　　BORDER:0px;

　　LIST-STYLE-TYPE:none;

　　TEXT-ALIGN:center;

　　DISPLAY:inline;

　　}

　　#submenuli{

　　FLOAT:left;

　　DISPLAY:block;

　　MARGIN:0px;

　　PADDING:0px;

　　TEXT-ALIGN:center}

　　#submenulia{

　　DISPLAY:block;

　　PADDING:2px3px2px3px;

　　BACKGROUND:url(images/icon_dot_lmenu.gif)transparentno-repeat2px8px;

　　FONT-WEIGHT:bold;

　　WIDTH:100%;

　　COLOR:#444;

　　TEXT-DECORATION:none;

　　}

　　#submenulia:hover{

　　BACKGROUND:url(images/icon_dot_lmenu2.gif)#C61C18no-repeat2px8px;

　　COLOR:#fff;}

　　#submenuulli#oneA{WIDTH:60px}

　　#submenuulli#twoA{WIDTH:80px}

　　#submenuulli#threeA{WIDTH:80px}

　　#submenuulli#fourA{WIDTH:90px}

　　#submenuulli#fiveA{WIDTH:80px}

　　#submenuulli#sixA{WIDTH:80px}

　　#submenuulli#sevenA{WIDTH:60px}

　　#submenuulli#eightA{WIDTH:90px}

　　#submenuulli#nineA{WIDTH:80px}

　　以上代码不逐一分析了。横向菜单的关键在于：定义

样式时的"FLOAT: left;"语句。另外注意UL定义中的DISPLAY:inline;一句表示将li强制作为内联对象呈递，从对象中删除行，通俗讲就是li不换行。实现横向排列。你也可以象例子中定义每个子菜单的宽度，控制菜单的间隔。好了，你也可以动手试试，用li实现各种各样的菜单样式。

9 7 3 1 2 3 4 5 6 7 8 4 8 :

  把此文章收藏到：