效果如下

代码

<!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. Transposed Matrix

    Transposed Matrix In linear algebra, the transpose of a matrix A is another matrix AT (also written  ...

  2. 【转】Ubuntu10.04上编译Android源码（Build Android source in Ubuntu10.04 Platform）

    原文网址:http://blog.csdn.net/chenyafei617/article/details/6570928 一.Introduction 今天我们就来谈谈如何在Ubuntu平台上面编 ...

  3. Linux用户基础

    http://itercast.com/lecture/21 操作系统通过用户.组概念来管理使用计算机的人 用户代表一个使用计算机的使用者,操作系统通过用户概念限制一个使用者能够访问的资源 组用来组织 ...

  4. Search in Rotated Sorted Array (I, II) 解答

    Question Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 ...

  5. UITextField实现过滤选中状态拼音

    先提供下简书地址, 排版更好. 我的简书地址: http://www.jianshu.com/p/80e79c6d1511 UITextField相信很多的iOS开发者都会经常用到, 最近项目中遇到了 ...

  6. web应用，我们需要了解什么？

        对于前端开发来说,web应用我们并不陌生.今天想要讨论一下,在开发一个web应用的时候,我们需要一些基本的知识储备.我们知道,一个web应用脱离不了(request)请求和响应(respons ...

  7. javascript的事件处理

        首先了解一下什么是事件?事件是web浏览器通知应用程序发生了什么事情.我们可以通过一些方式注册事件用来监听一些我们需要处理的事件.事件包含一下一些属性:     事件类型:用来说明是什么类型事 ...

  8. Android 之 Eclipse 导入 Android 源码

    很多人都下载过下图中的 Sources for Android SDK,但是很少人知道怎么用       下载完毕后可以再 Android SDK 根目录下看到 sources 文件夹内 有 andr ...

  9. LVM（2）逻辑卷的扩展、缩减、快照卷

    一.扩展逻辑卷:lvextend   扩展逻辑卷物理边界    -L [+]# /PATH/TO/LV2G, +3G5G

  10. ListView之BaseAdapter

    BaseAdapter可以实现自定义的丰富子项视图,本文实现如下所示结果: 实现代码: /* ListView :列表 BaseAdapter 通用的基础适配器 * * */ public class ...