效果如下

代码

<!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. cf448A Rewards

    A. Rewards time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  2. UVa 1449 - Dominating Patterns (AC自动机)

    题目大意:给出多个字符串模板,并给出一个文本串,求在文本串中出现最多的模板,输出最多的次数并输出该模板(若有多个满足,则按输入顺序输出). 思路:赤裸裸的 AC自动机,上模板. 代码: #includ ...

  3. POJ_Fibonacci POJ_3070(矩阵快速幂入门题，附上自己写的矩阵模板)

    Fibonacci Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10521   Accepted: 7477 Descri ...

  4. 十分钟搭建自己的hadoop2/CDH4集群

    版本及准备 我部署的是hadoop-2.0.0-cdh4.2.0.tar.gz,下载地址为http://archive.cloudera.com/cdh4/cdh/4/hadoop-2.0.0-cdh ...

  5. syslog-ng-3.5.6把容器的单核cpu跑满

    Question 最近,偶然,会有人说,其docker容器中syslog-ng把cpu跑满,使用perf,mpstat,strace工具看到是syslog-ng在内核态cpu使用率很高,怀疑是某个系统 ...

  6. 【转】手机web——自适应网页设计（html/css控制）

    手机web——自适应网页设计(html/css控制) 就目前形势来看,Web App 正是眼下的一个趋势和潮流,但是,对于Web App的设计可能大家有的不是很了解,下面就将整理好的网页设计的技巧奉献 ...

  7. Ajax_post发送

    $('#img_file_del_3').click(function() { var data={name:$('#img_file_del_3').attr('name')}; var url=' ...

  8. PC-CSS-默认字体样式

    字体样式:Arial:字体大小:12px;行高:1.5倍:

  9. C++： int和string相互转换

    假设在一个C++的程序中常常会用到int和string之间的互换.个人建议能够写成一个函数,下次用的时候直接调用就可以. #include <iostream> #include < ...

  10. Ubuntu12.04 Git 服务器详细配置

    Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目,学过Linux的都知道,Git的优点我就不再多说了,我也是很喜欢Linux的.今天我们一起学习Git服务器在Ubunt ...