展会信息港展会大全

纯css的导航菜单 android软件开发教程
来源:互联网   发布日期:2016-03-25 16:32:47   浏览:1972次  

导读:代码如下 复制代码 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:#ff...

代码如下

复制代码

<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>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

相关内容
AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港