CSS菜单带说明信息的菜单

在上一例的基础上，制作一个显示说明信息的菜单，鼠标经过某个菜单项的时候，会出现相应的说明信息。

如图所示：

在通常状态下，这个菜单和上一个例子相同，而在鼠标经过菜单项的时候，在菜单右侧回出现一个矩形区域，里面分别写着对正在经过菜单项的说明文字，这个是一个很实用的效果。

本例的代码以，上一例为基础，对于每个菜单项的a元素，分别再添加一个span元素，里面输入香型的说明文字，代码如下：

<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>

</div>

..........其余菜单类似.........

接下来的思路就是，首先在默认状态下，把这些说明信息隐藏起来，当鼠标指针经过某一个菜单项的时候，再打开该span就可以了。

<style type="text/css">
#menu {
 font-family:Arial, Helvetica, sans-serif;  /*字体*/
 font-size:14px;
 margin:0 auto;    /*居中对齐*/
 border:solid 1px #CCC;
 120px;
}
#menu a,#menu a:visited{
 text-decoration:none;
 text-align:center;
 color:#c00;
 display:block;
 padding:4px;
 background-color:#fff;
 border:1px solid #fff;   /*白色边框*/
 height:1em;
 position:relative;
}
#menu a:hover{
 border-color:#c00;
}
#menu a:hover span{
 display:block;
 height:0;
 0;
 overflow:hidden;    /*防止溢出*/
 border:solid 8px #fff;
 top:4px;   /*设置竖直方向的定位*/
 position:absolute;     /*绝对定位*/
}
#menu a:hover span.left{
 border-left-color:#c00;
 left:8px;
}
#menu a:hover span.right{
 border-right-color:#c00;
 right:8px;
}
#menu a span.intro,#menu a:visited span.intro{
 display:none
}
#menu a:hover span.intro{
 display:block;
 position:absolute;
 color:#000;
 border:1px dashed #000;
 80px;
 height:auto;
 top:0px;
 left:120px;
 background-color:#eee;
}

</style>

首先观察“#menu a span.intro,#menu a:visited span.intro” 设置的CSS样式，它的作用是在普通状态下，将所有span元素都隐藏起来，使用的CSS语句是：

需要注意的是关于height的设置，这里将height的值设置为auto，如果没有这一行，在Firefox中的下过将出现如图所示

因此在这里设为auto，以使它得高度使用文字的需要。完成最终效果。