效果如下

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <style> #menu { /*对menu层设置*/
font-family:Arial; /*字体*/
font-size:16px; /*字号*/
width:140px; /*宽度*/
margin:; /*菜单项之间间隔0.5em,并水平居中*/
border:solid 1px #ccc; /*灰色细边框*/
} #menu a, #menu a:visited {
text-decoration:none; /*文字无下划线*/
text-align:center; /*文字水平居中对齐*/
color:#c00; /*红色文字*/
display:block; /*设置为块级元素*/
padding:4px; /*内边距*/
background-color:#fff; /*背景色*/
border:solid 1px #fff; /*与背景色相同边框,防止跳动*/
position:relative; /*使用相对定位,只有a使用了relative,子元素的absolute才会有效*/
width:130px;
} #menu a span { /*先把说明的span隐藏*/
display:none;
}
#menu a:hover {
border-color:#c00; /*边框颜色红色*/
} #menu a:hover span {
display:block; /*设置为块级元素*/
position:absolute; /*使用绝对定位*/
height:; /*高度为0*/
width:; /*宽度为0*/
overflow:hidden; /*防止溢出*/
border:solid 8px #fff; /*设置默认的边框样式*/
top:4px; /*竖直方向的定位*/
} #menu a:hover span.left {
border-left-color:#c00;
left:8px;
} #menu a:hover span.right {
border-right-color:#c00;
right:8px;
} #menu a:hover span.intro {
font-size:12px;
display:block; /*span是inline元素,必须设置成block元素*/
position:absolute; /*绝对定位*/
left:150px;
top:0px;
padding:5px;
width:100px;
height:auto; /*高度设为auto很重要,保证内容能够完整的灵活的显示出来*/
background-color:#eee;
color:#;
border:1px dashed #;
} </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>带说明信息的菜单</title></head> <body>
<div id="menu">
<a href="#">
<span class="left"></span>
Home
<span class="right"></span>
<span class="intro">这里说明Home菜单项</span>
</a>
<a href="#">
<span class="left"></span>
Contact Us
<span class="right"></span>
<span class="intro">这里说明Contact Us菜单项</span>
</a>
<a href="#">
<span class="left"></span>
Web Dev
<span class="right"></span>
<span class="intro">这里说明Web Dev菜单项</span>
</a>
<a href="#">
<span class="left"></span>
Web Design
<span class="right"></span>
<span class="intro">这里说明Web Design菜单项</span>
</a>
<a href="#">
<span class="left"></span>
Map
<span class="right"></span>
<span class="intro">这里说明Map菜单项</span>
</a>
</div>
</body>
</html>

css案例学习之通过relative与absolute实现带说明信息的菜单的更多相关文章

  1. css案例学习之relative与absolute

    代码 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  2. css案例学习之table tr th td ul li实现日历

    效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...

  3. css案例学习之span边框实现的特殊效果

    bottom left bottom right top left top right 配合颜色来使用,实现一些神奇的效果 #menu a span{ height:; width:; /*borde ...

  4. css案例学习之盒子模型

    定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...

  5. css案例学习之继承关系

    代码 <html> <head> <title>继承关系</title> <style> body{ color:blue; /* 颜色 * ...

  6. 一张图看懂css的position里的relative和absolute的区别

    position有以下属性:static.inherit.fixed.absolute.relative前三个好理解好区分:static:是默认状态,没有定位,元素出现在正常的流中(忽略 top, b ...

  7. CSS 案例学习

    1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片 ...

  8. CSS的position属性:relative和absolute

    relative:是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px.如果它之前的元素也为relati ...

  9. css案例学习之用thead、tbody、tfoot实现漂亮的table布局

    首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...

随机推荐

  1. 锋利的JQuery —— DOM操作

    图片猛戳链接

  2. Java并发包源码学习之线程池(一)ThreadPoolExecutor源码分析

    Java中使用线程池技术一般都是使用Executors这个工厂类,它提供了非常简单方法来创建各种类型的线程池: public static ExecutorService newFixedThread ...

  3. python (3)简单语法:字符串(strip函数),数据类型

    一:字符串重复,索引,切片(字符串命令strip) 函数原型strip 声明:s为字符串,rm为要删除的字符序列 s.strip(rm)        删除s字符串中开头.结尾处,位于 rm删除序列的 ...

  4. bzoj3315:[Usaco2013 Nov]Pogo-Cow

    思路:首先可以写出n^3dp的状态转移方程:f[i][j]=max{f[j][k]+val[i]},f[i][j]表示最后一步跳到点从j点跳到i点的最大价值(状态不能设成f[i],因为j对后面的决策是 ...

  5. Cygwin安装与配置

    Cygwin可以在windows环境下模拟Linux系统,而且可以重用Linux下面丰富的脚本工具.windows的cmd太弱了.Cygwin是由Cygnus(天鹅座) Solution公司开发,不过 ...

  6. RMAN-使用catalog恢复目录进行备份与恢复

    RMAN ArchitectureThe RMAN architecture, shown in Figure 7-3, includes a target database, repository, ...

  7. keil应用小贴士:Use MicroLIB是干什么的

    在keil 建立ARM的工程时,其中有一项是选 use MicroLIB 查了查,得到了以下信息: microlib 是缺省 C 库的备选库. 它旨在与需要装入到极少量内存中的深层嵌入式应用程序配合使 ...

  8. Maven学习(七)-- 使用Maven构建多模块项目

    摘自:http://www.cnblogs.com/xdp-gacl/p/4242221.html 在平时的Javaweb项目开发中为了便于后期的维护,我们一般会进行分层开发,最常见的就是分为doma ...

  9. Testner测试圈关于页面响应时间的测试行业标准

    Testner测试圈针对小程序页面的响应时间标准建议如下:0-2秒 用户体验好,可以选择性改善,如首屏体验做到秒开等2-4秒 用户体验一般,有改善空间4-6秒 用户体验较差,有较大改善空间6秒以上 用 ...

  10. Rails中生成并在ActionMailer附件中发送csv、excel、pdf、zip文件

    1.修改Gemfile # PDF generator gem 'prawn' gem 'prawn-table' # Excel generator gem 'rubyXL' #Zip genera ...