效果如下

代码

<!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. C++的构造函数总结

    构造函数是C++的一个很基础的知识点,在平时编程的时候,相信大家都很熟悉,虽然比较基础,但是细究下来,还是有不少细节需要注意.这篇文章主要总结C++构造函数需要注意一些细节,一方面,可以帮助下大家巩固 ...

  2. webapp设计注意事项

    色彩设计 美学相关的知识(色彩构成.平面构成等等)我就不再赘述了,相信从事此类行业的人员无人不知无人不晓了.这里简要说说WebApp设计中,色彩以及构图的特别之处吧. 首先是色彩.从事过广告和印刷业设 ...

  3. 链表的基本操作（Basic Operations on a Linked List）

    链表可以进行如下操作: 创建新链表 增加新元素 遍历链表 打印链表 下面定义了对应以上操作的基本函数. 创建新链表 新链表创建之后里面并没有任何元素,我们要为数据在内存中分配节点,再将节点插入链表.由 ...

  4. 使用linux系统做路由转发

    使用linux系统(PC机)做路由转发 关键字:linux,Fedora,route,iptables,ip_forward 最近做网络实验,在实验过程中需要用到linux的转发功能,但是遇到一些问题 ...

  5. MySql 中的常见问题解决方法

    一.关键字做字段 ,mssql的做法是[关键字],mysql的做法是 `关键字` ;ps:(` 是 tab键上面的一个按键) 二.mssql数据导入到mysql: 1.mssql导出insert语句( ...

  6. Gym Class（拓扑排序）

    Gym Class Time Limit: 6000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total ...

  7. 【SVN Working copy is too old (format 10, created by Subversion 1.6)】解决方式

    SVN同步或者提交的时候出现类似错误信息: The working copy needs to be upgraded svn: Working copy 'D:\adt-bundle-windows ...

  8. 1. GDAL与OpenCV2.X数据转换（适合多光谱和高光谱等多通道的遥感影像）

    一.前言 GDAL具有强大的图像读写功能,但是对常用图像处理算法的集成较少,OpenCV恰恰具有较强的图像处理能力,因此有效的结合两者对图像(遥感影像)的处理带来了极大的方便.那么如何实现GDAL与o ...

  9. Spring 反转控制（IOC） 依赖注入（DI）

    简单的理解: 之前是我为了完成业务A 需要某个对象B的支持 那么我在这个业务A中就会创建一个对象B使用,说白了就是我根据需求来控制对象B, 而spring的ioc把对象B的控制权从业务A手中拿到自己手 ...

  10. const用法总结

    1. const修饰变量 ; const int* a = &b; //情况1 int const* a = &b; //情况2 int* const a = &b; //情况 ...