喜悦国际村 
» 游客:  注册 | 登录 | 搜索 | 统计 | 喜悦证交所 | 帮助

RSS 订阅当前论坛  

[北京]代朋友公司招聘PHP高级程序员多名

上一主题 下一主题
     
标题: [代码] 纯css的导航菜单  
 
剑枫 (雪花)
论坛元老
Rank: 8Rank: 8
欧玛嘎


UID 26144
精华 1
积分 4849
帖子 1721
金钱 4839 喜悦币
威望 10
人脉 0
阅读权限 90
注册 2004-2-14
来自 山东郓城
状态 离线
纯css的导航菜单

没有js,兼容Firefox

<style>
.Nav {

}
.Nav li{
        float:left;
        display:block;
        position:relative;
}
.Nav a{
        float:left;
        display:block;
        position:relative;
        padding:2px 10px 2px 10px;
        font-size:13px;
        text-decoration: none;
}
.Nav li a:hover
{
        color:#ffffff;
        background:#ea0000;
}
.Nav li table {
        display:none;
        border-collapse:collapse;
}
.Nav li:hover table, .Nav a:hover table {
        display:block;
        position:absolute;
        top:18px;
        left:0;
        background:#ea0000;
}
.Nav li:hover table a, .Nav a:hover table a {
        float:none;
        background:#f2f2f2;
        color:#000;
        width:120px;
        border-bottom:1px solid #fff;
}
.Nav li:hover table a:hover, .Nav a:hover table a:hover {
        background:#565656;
        color:#fff;
}
</style>

<div class='Nav'>
<li>
        <a href='#'>产品
        <table><tr><td>
                <a href='#1'>内容管理系统</a>
                <a href='#2'>竞争情报系统</a>
        </td></tr></table>
        </a>
</li>
<li>
        <a href='#'>客户服务
        <table><tr><td>
                <a href='#1'>技术支持</a>
                <a href='#2'>留言反馈</a>
                <a href='#3'>在线帮助</a>
        </td></tr></table>
        </a>
</li>
</div>




在场外支持奥运.....
2007-7-31 04:14 AM#1
查看资料  访问主页  发短消息  QQ  顶部
 
村长夫人
高级会员
Rank: 4


UID 94673
精华 0
积分 501
帖子 973
金钱 501 喜悦币
威望 0
人脉 0
阅读权限 50
注册 2007-6-29
状态 离线
[推荐阅读] PHP实习转正了以后应该拿多少钱呢?
还好最好把最外面的div换成ul
Nav样式改成
.Nav {
                padding:0;
                margin:0;
                list-style-type:none;
}

另外这样写的话肯定不能通过w3c验证 人家不让a标签中存在table之类的标签




又该换马甲了.....
2007-7-31 09:37 AM#2
查看资料  发短消息  顶部
 
剑枫 (雪花)
论坛元老
Rank: 8Rank: 8
欧玛嘎


UID 26144
精华 1
积分 4849
帖子 1721
金钱 4839 喜悦币
威望 10
人脉 0
阅读权限 90
注册 2004-2-14
来自 山东郓城
状态 离线
[推荐阅读] 一个小问题


QUOTE:
原帖由 村长夫人 于 2007-7-31 09:37 AM 发表
还好最好把最外面的div换成ul
Nav样式改成
.Nav {
                padding:0;
                margin:0;
                list-style-type:none;
}

另外这样写的话肯定不能通过w3c验证 人家不让a标签中存在table之类的标签
恩,table不能加在链接中。。。。

如果是为了通过w3c的话,这样写当然不成。。。

但是不通过认证的,只要兼容就可了。。。




在场外支持奥运.....
2007-7-31 01:51 PM#3
查看资料  访问主页  发短消息  QQ  顶部
     


  可打印版本 | 推荐给朋友 | 订阅主题 | 收藏主题 | 开通个人空间  


 




Powered by Discuz! 6.1.0  © 2001-2010 Comsenz Inc.
Processed in 5.154123 second(s), 6 queries

(冀ICP备05009913号) 管理员:sadly 邮箱/MSN: sadly@phpx.com QQ:824008(长隐) 清除 Cookies - - Archiver - WAP