|
|
|
---------------------- 1月5日更新 --------------------- ]
<!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">
<head>
<meta http-equiv="Content-Type" c />
<title>CSS菜单－－下拉菜单</title>
<style>
/*Author:5key.net*/
*{
margin:0px;
padding:0px;
}
#menu li{
display:inline;
list-style:none;
list-style-position:outside;
text-align:center;
font-weight:bold;
float:left;
}
#menu a:link{
color:#336601;
text-decoration:none;
float:left;
width:100px;
padding:3px 5px 0px 5px;
}
#menu a:visited{
color:#336601;
text-decoration:none;
float:left;
padding:3px 5px 0px 5px;
width:100px;
}
#menu a:hover{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#539D26;
}
#menu a:active{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#BD06B4;
}
#menu{
width:600px;
height:30px;
border-bottom:0px;
padding:0px 5px;
position:absolute;
z-index:1;
}
.list{
line-height:20px;
text-align:left;
padding:4px;
font-weight:normal;
}
.menuApear{
width:120px;
height:auto;
margin:6px 4px 0px 0px;
border:1px solid #9CDD75;
background-color:#F1FBEC;
color:#336601;
padding:6px 0px 0px 0px;
cursor:hand;
overflow-y:hidden;
filter:Alpha(opacity=70);
-moz-opacity:0.7;
}
.menuHiden{
width:120px;
height:18px;
margin:6px 4px 0px 0px;
background-color:#F5F5F5;
color:#999999;
border:1px solid #EEE8DD;
padding:6px 0px 0px 0px;
overflow-y:hidden;
cursor:hand;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<!--主要是看这个，通过改CSS的样式实现浮动菜单的下拉果 CSS中关键点：Height 和 overflow-y-->
<li class="menuHiden">我的首页
<div class="list">
<a href="#">我的CHINAY</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menuHiden"
>社区圈子
<div class="list">
<a href="#">我的CHINAY</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menuHiden"
>我的短信
<div class="list">
<a href="#">我的CHINAY</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menuHiden"
>账户管理
<div class="list">
<a href="#">我的CHINAY</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
</ul>
</div>
</body>
</html>
示例页（原作者提供的）：http://www.5key.net/ex/8-15/#
<!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">
<head>
<meta http-equiv="Content-Type" c />
<title>World-Word</title>
<style type="text/css">
#box {
background: #060;
/*overflow:auto*/
width: 620px;
border-width:0 1px 1px;
border-style: solid;
border-color: #060;
margin: 0 auto;
}
#menu {
text-align: left;
float: left;
width: 148px;
}
#menu ul {
margin: 12px 0 0 24px;
}
#menu li {
background: #9C0;
text-indent: 17px;
padding: 7px 0;
margin-bottom: 1px;
border-left: 4px solid #F90;
list-style-type: none;
width: 100px;
voice-family: "\"}\"";
voice-family: inherit;
width: 96px;
}
#text {
background: #FFF;
float: right;
overflow:visible;
width: 472px;
padding: 15px 0;
}
#text h1 {
font-weight: bold;
text-align: center;
margin: 20px;
border-bottom: 3px double #060;
}
#footer {
background: #F90;
text-align: center;
float: right;
width: 472px;
padding: 5px 0;
}
a {
text-decoration: none;
}
a:visited {
color: #666;
}
a:hover {
text-decoration: underline;
}
#menu a:hover {
color: #FFF;
}
#text a:link {
color: #F60;
}
#text a:hover {
color: #F90;
}
</style>
</head>
<body>
<div id="box">
<div id="menu"><!-- #BeginLibraryItem
"/Library/menu_cn.lbi" -->
<ul>
<li><a href="../cn_s1.html" title="点击此处，了解关于
“翻译服务”的相关内容">翻译服务</a></li>
<li><a href="../cn_s2.html" title="点击此处，了解关于
“网站建设服务”的相关内容">网站建设</a></li>
<li><a href="../cn_s3.html" title="点击此处，了解取得
我们服务的方法和流程">服务流程</a></li>
<li><a href="../cn_s4.html" title="点击此处，了解如何
支付费用">付费</a></li>
</ul>
</div>
<div id="text">
<h1>为您提供精准的翻译服务</h1>
<p> 您是否要将某些文档翻译成标准的英语版本？您是否
担心译文会不符合西方语系的语言习惯？您是否遇到语言障碍而放缓
向境外拓展业务的步伐？您是否受到时而需要处理外文资料的困扰？
</p>
<p> 让我们来帮您解决这些问题。我们这里提供的服务 快
捷 、高效、准确，而且 付费 方便。您无需走出家门，就可同我们
一起走完服务的全过程，甚至包括付费。 </p>
<p> 我们有来自中国和新加坡的翻译专家，他们具有得天
独厚的语言基础和深厚的文化背景。他们合作的结晶一定是非常贴切
而精美的译文作品。我们会分配以您的目标语种为 母语 的翻译员为
你翻译，同时他们也 精通 您的源语语种。 </p>
<p> 您若有此需求或任何疑问，请浏览我们的网站，也可
随时同我们联系，您会得到耐心的解答。我们的联系方式是：
[email protected] 。</p>
<!-- TemplateEndEditable -->
</div>
<div id="footer">同我们联系: <a
href="mailto:[email protected]" title="点击这里发送电子
邮件同我们联系">[email protected]</a></div>
</div>
</body>
</html>
把红色部分注释掉时，在FF下显示不了BOX的背景色
[ 本帖最后由 iptton 于 2007-1-5 13:49 编辑 ] |
|
IP卡
狗仔卡
发表于 2007-1-1 13:19
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
发表于 2007-1-1 14:47
