CSS弹出二级多列菜单和DIV布局实例 - 仿IBM官网首页

本文链接：https://blog.csdn.net/bcbobo21cn/article/details/45559547

图

顶层CSS菜单，弹出二级菜单，二级菜单多列；

主体部分三个DIV布局；这个是IBM官网布局的样子；

代码，拿去花吧；我的奶酪很多；

有不清楚的地方可以问我，qq 513979805

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>

<Style>

#pageHeader {
BACKGROUND: url(../images/header_back.jpg) repeat-x; MARGIN: 0px auto; WIDTH: 940px; HEIGHT: 99px; z-index:10000
}
#pageHeader TABLE TD {
VERTICAL-ALIGN: top
}
#pageHeader TD.miscIcons IMG {
MARGIN: 0px 3px
}
#pageHeader DIV.accountLinks {
VERTICAL-ALIGN: top; PADDING-TOP: 10px; HEIGHT: 20px
}
#pageHeader DIV.accountLinks LI {
BACKGROUND-POSITION: left 5px; PADDING-LEFT: 15px; FLOAT: rightright; MARGIN-LEFT: 10px; BACKGROUND-REPEAT: no-repeat; LIST-STYLE-TYPE: none
}
#pageHeader DIV.accountLinks LI A {
FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: white
}
#pageHeader .contactPhone{
POSITION: relative; TOP: 25px; TEXT-ALIGN: center;
}
#pageHeader .contactPhone A{
font-size:11px; color:#FFF; font-weight:bold
}
#pageHeader DIV.topSearchFromBox {
MARGIN: 7px 0px
}
#pageHeader DIV.topSearchFromBox INPUT[type=text] {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 3px; PADDING-LEFT: 3px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 250px; COLOR: #999; PADDING-TOP: 0px; HEIGHT: 23px; BORDER-RIGHT-WIDTH: 0px
}
#pageHeader DIV.topSearchFromBox INPUT[type=submit] {
FONT-WEIGHT: bold; WIDTH: 95px; COLOR: #666
}
#pageHeader .topSubMenu LI {
BORDER-RIGHT: white 1px solid; PADDING-RIGHT: 7px; PADDING-LEFT: 7px; FLOAT: rightright; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#pageHeader .topSubMenu LI A {
FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: white
}
#pageHeader .topSubMenu LI:first-child {
PADDING-RIGHT: 0px; BORDER-RIGHT-WIDTH: 0px
}

/* menu-bar */
.menu-bar {
MARGIN: 0px left; WIDTH: 940px;Z-INDEX:99999;position: relative;
}
.menu-bar UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
.menu-bar LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
.menu-bar A {
FONT: bold 14px Garamond,serif; COLOR: #333
}
.menu-bar .main-menu {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #ccc 1px solid; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; HEIGHT: 32px
}
.menu-bar .main-menu LI.topLevel {
BORDER-RIGHT: #ccc 1px solid; FLOAT: left; VERTICAL-ALIGN: middle; PADDING-TOP: 6px; POSITION: relative; HEIGHT: 26px; TEXT-ALIGN: center
}
.menu-bar LI:hover {
Z-INDEX: 128000; BACKGROUND-COLOR: #666
}
.menu-bar LI:hover A {
COLOR: #fff; TEXT-DECORATION: none
}
.menu-bar LI:hover .sub-menu {
DISPLAY: inline; Z-INDEX: 99999
}
.menu-bar LI:hover .sub-menu A {
FONT: 12px Arial,sans-serif; COLOR: #9d0013
}
.menu-bar .sub-menu {
BORDER-RIGHT: #9d0013 1px solid; PADDING-RIGHT: 17px; BORDER-TOP: #9d0013 1px solid; DISPLAY: none; PADDING-LEFT: 17px; LEFT: 0px; PADDING-BOTTOM: 11px; BORDER-LEFT: #9d0013 1px solid; PADDING-TOP: 11px; BORDER-BOTTOM: #9d0013 1px solid; WHITE-SPACE: nowrap; POSITION: absolute; TOP: 31px; BACKGROUND-COLOR: #fffdf0; TEXT-ALIGN: left
}
.menu-bar .sub-menu UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; MARGIN-BOTTOM: 6px; PADDING-BOTTOM: 0px; MARGIN-RIGHT: 10px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; rem-float: left
}
.menu-bar .sub-menu LI.sub-menu-li {
rem-line-height: 20px
}
.menu-bar .sub-menu LI.sub-menu-li A {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FLOAT: none; PADDING-BOTTOM: 2px; COLOR: #9d0013; PADDING-TOP: 2px; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
.menu-bar .sub-menu LI.sub-menu-li:hover {
rem-background-color: #9D0013
}
.menu-bar .sub-menu LI.sub-menu-li:hover A {
TEXT-DECORATION: underline
}
.menu-bar .sub-menu LI:hover {
BACKGROUND-COLOR: transparent
}

/* div */
.divup {
background-color: #505050
}

.divmiddle {
}

.divdown {

}

#layout1 { height: 300px; width: auto; background: #505050; }
#layout2 { height: 300px; width: auto; background: ; }
#layout3 { height: 300px; width: auto; background: #505050; }
#layout4 { height: 100px; width: auto; background: #404040; }

</Style>

</head>

<body>

<DIV class=menu-bar>
<UL class=main-menu>
<LI class=topLevel style="WIDTH: 139px"><A href=""><img src="logo2.png" style="padding-top:0px"></img></A></LI>
<LI class=topLevel style="WIDTH: 139px"><A href="">解决方案</A>
<DIV class=sub-menu>
<TABLE>
<TBODY>
<TR>
<TD vAlign=top>
<UL>
<LI class=sub-menu-li nowrap><A href="" nowrap>方案概述</A>
<LI class=sub-menu-li nowrap><A href="" nowrap>成功案例</A>
<LI class=sub-menu-li nowrap><A href="" nowrap>案例参考</A>
<LI class=sub-menu-li nowrap><A href="" nowrap>业务流程管理</A>
<LI class=sub-menu-li nowrap><A href="" nowrap>行业解决方案</A>
<LI class=sub-menu-li nowrap><A href="" nowrap>企业解决方案</A>

</LI></UL></TD>
<TD vAlign=top>
<UL>
<LI class=sub-menu-li nowrap><A href="" nowrap>合作项目</A>
<LI class=sub-menu-li nowrap><A href="" nowrap>如何购买</A>
</LI></UL></TD></TR></TBODY></TABLE></DIV>
</LI>

<LI class=topLevel style="WIDTH: 77px"><A href="">服务</A>
<DIV class=sub-menu>
<TABLE>
<TBODY>
<TR>
<TD vAlign=top>
<UL>
<LI class=sub-menu-li nowrap><A href="" nowrap>Diamond Rings</A>
<LI class=sub-menu-li nowrap><A href="" nowrap>Gemstone Rings</A>
<LI class=sub-menu-li nowrap><A href="" nowrap>Promise Rings</A>
<LI class=sub-menu-li nowrap><A href="" nowrap>Colored Diamond Rings</A>
<LI class=sub-menu-li nowrap><A href="" nowrap>Engagement Rings</A>
<LI class=sub-menu-li nowrap><A href="" nowrap>Wedding Sets</A> </LI></UL></TD>
<TD vAlign=top>
<UL>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Anniversary Rings</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Wedding Bands</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Sterling Silver Rings</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Top Selling</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Top Rated</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Newest</A> </LI></UL></TD></TR></TBODY></TABLE></DIV></LI>

<LI class=topLevel style="WIDTH: 77px"><A href="">产品</A>
<DIV class=sub-menu>
<TABLE>
<TBODY>
<TR>
<TD vAlign=top>
<UL>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Diamond Rings</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Gemstone Rings</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Promise Rings</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Colored Diamond Rings</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Engagement Rings</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Wedding Sets</A> </LI></UL></TD>
<TD vAlign=top>
<UL>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Anniversary Rings</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Wedding Bands</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Sterling Silver Rings</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Top Selling</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Top Rated</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Newest</A> </LI></UL></TD></TR></TBODY></TABLE></DIV></LI>

<LI class=topLevel style="WIDTH: 77px"><A href="">支持与下载</A>
<DIV class=sub-menu>
<TABLE>
<TBODY>
<TR>
<TD vAlign=top>
<UL>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Diamond Rings</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Gemstone Rings</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Promise Rings</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Colored Diamond Rings</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Engagement Rings</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Wedding Sets</A> </LI></UL></TD>
<TD vAlign=top>
<UL>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Anniversary Rings</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Wedding Bands</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Sterling Silver Rings</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Top Selling</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Top Rated</A>
<LI class=sub-menu-li nowrap><A
href=""
nowrap>Newest</A> </LI></UL></TD></TR></TBODY></TABLE></DIV></LI>

</UL></DIV>

<DIV id="layout1">
</DIV>


<DIV id="layout2">
</DIV>

<DIV id="layout3">
</DIV>

<DIV id="layout4">
</DIV>


</body>

</html>