效果如下

代码

<!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. 基于微信公众平台的开发（清华大学第二讲）_Alien的笔记

    基于微信公众平台的开发(清华大学第二讲)_Alien的笔记 基于微信公众平台的开发(清华大学第二讲)

  2. poj 3111 K Best (二分搜索之最大化平均值之01分数规划)

    Description Demy has n jewels. Each of her jewels has some value vi and weight wi. Since her husband ...

  3. 雅虎工程师初始化css

    /*css reset code */ /**** 文字大小初始化,使1em=10px *****/ body { font-size:62.5%; } /* for IE/Win */ html&g ...

  4. PHP批量审核后台

    /*批量审核方法*/ function setOn_all() { if($_POST) { $p=M('news'); $data=array(); $i=0; foreach ($_POST as ...

  5. pyqt QTableWidget例子学习(重点)

    # -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' from PyQt4.QtGui import * from PyQ ...

  6. 集成支付宝SDK遇到的坑

    一.首先我先把集成过程说一下.小编想说的话:支付宝是我做支付中觉得坑最多的一个,各种编译不过,各种出问题. 废话不多说,进入主题:1.首先当前是下载官方SDK啦,当前你也可以通过cocopods进行导 ...

  7. [转]Laravel 4之验证

    Laravel 4之验证 http://dingjiannan.com/2013/laravel-validation/ 基本验证 使用Validator::make($data, $rules)验证 ...

  8. hdu 2825 Wireless Password(ac自己主动机&amp;dp)

    Wireless Password Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  9. Codeforces 466 E. Information Graph

    并查集.... E. Information Graph time limit per test 1 second memory limit per test 512 megabytes input ...

  10. last与lastlog命令

    lastlog 列出所有用户最后登录的时间和登录终端的地址,如果此用户从来没有登录,则显示:**Never logged in**last 列出用户所有的登录时间和登录终端的地址