61,111
社区成员
发帖
与我相关
我的任务
分享
<div class="menu">
<ul>
<li class="about" >
<a href="/WebSite/about_us.shtml"><span>关于快鱼</span> </a>
<ul >
<li >
<a href="/WebSite/about_us.shtml">快鱼简介</a>
</li>
<li >
<a href="/WebSite/about_us/team.shtml">管理团队</a>
</li>
<li >
<a href="/WebSite/about_us/news.shtml">新闻</a>
</li>
<li class="last" >
<a href="/WebSite/about_us/history.shtml">公司大事记</a>
</li>
</ul>
</li>
<li class="whatdo">
<a href="/WebSite/services.shtml"><span>iPhone/Android 开发</span> </a>
</li>
<li class="client">
<a href="/WebSite/case-study.shtml"><span>客户</span> </a>
</li>
<li class="contact last">
<a href="/WebSite/contact_us.shtml"><span>联系我们</span></a>
</li>
</ul>
</div>
/* common styling */
/* set up the overall width of the menu div, the font and the margins */
.menu {
font-family: arial, sans-serif;
font-size:16px;
font-weight:800;
margin:50px 0px 0px 0px;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0;
margin:0px 0px 0px 0px;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left;
position:relative;
cursor:pointer;
margin-right:6px;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
padding:0px 0px 0px 15px;
height:30px;
color:#000;
line-height:30px;
font-size:13px;
font-weight:500;
margin-left:2px;
}
.menu ul li a span{ display:block; height:30px; padding-right:15px; font-weight: bold;}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
}
/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
body.about .menu li.about a,
body.whatdo .menu li.whatdo a,
body.quality .menu li.quality a,
body.pricingmodel .menu li.pricingmodel a,
body.client .menu li.client a,
body.career .menu li.career a,
body.contact .menu li.contact a,
.menu ul li:hover a {color:#778899;
background: no-repeat left top;}
body.about li.about a span,
body.whatdo li.whatdo a span,
body.quality li.quality a span,
body.client li.client a span,
body.career li.career a span,
body.contact li.contact a span,
.menu ul li:hover a span{ background: url(../images) no-repeat right top; }
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul,
.menu ul li.hover ul {
display:block;
position:absolute;
overflow:hidden;
top:25px;
left:2px;
width:130px;
background:#778899;
padding-bottom:13px;
padding-top:3px;
-moz-border-radius-bottomleft:8px;
-webkit-border-bottom-left-radius:8px;
border-bottom-left-radius:8px;
-moz-border-radius-bottomright:8px;
-webkit-border-bottom-right-radius:8px;
border-bottom-right-radius:8px;
-webkit-box-shadow: 1px 2px 5px #999;
-moz-box-shadow: 1px 2px 5px #999;
box-shadow: 1px 2px 5px #999;
zoom:1;
margin:0;
padding:0;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li{
clear:both;
height:22px;
}
.menu ul li lu li {
float:left;
}
#header .menu ul li:hover ul li a {
display:block;
color:#fff;
font-size:12px;
padding-left:15px;
padding-right:15px; text-align:left;
font-weight:normal;
white-space:nowrap;
height:22px;
background:none;
}
.menu ul li.about ul li a{ width:150px;}
.menu ul li.whatdo ul li a{ width:120px;}
.menu ul li.work ul li a{ width:180px;}
/* style the background and forground colors of the links on hover */
#header .menu ul li:hover ul li a:hover {
background: url(../images/menusubarr.png) 5px 10px no-repeat;
font-weight:bold;
}
.menu ul li:hover ul li.last { border-bottom:0px;}