Asp.net菜单控件实例(兼容IE7,IE8,Chrome,Firefox)(2)

时间:2009-12-21 11:47来源:未知作者:admin 点击: 次

分享到：

因此要生成可显示和隐藏的菜单项，关键在css的设置上，开始时将二级子菜单设置为隐藏visibility: hidden; 同时定义li的hover事件，li:hover时：自菜单的visibi

因此要生成可显示和隐藏的菜单项，关键在css的设置上，开始时将二级子菜单设置为隐藏visibility: hidden;

同时定义li的hover事件，li:hover时：自菜单的 visibility要改为visible; 大致原理是这样，当然还有注意菜单项的位置

一级菜单float:left;使其能水平显示。

CSS定义如下：

.navmenu *
{
    margin: 0;
    padding: 0;
}
.navmenu
{
    border: #000 1px solid;
    height: 25px;
}
.navmenu li
{
    /*水平菜单*/
    float: left;
    list-style: none;
    position: relative;
}
.navmenu a
{
    display: block;
    font-size: 12px;
    height: 24px;
    width: 100px;
    line-height: 24px;
    background-color: #CDEB8B;
    color: #0000ff;
    text-decoration: none;
    text-align: center;
    border-left: #36393D 1px inset;
    border-right: #36393D 1px inset;
    border-bottom: #36393D 1px inset;
}
/*单独设置一级菜单样式*/
.navmenu > ul > li > a
{
    font-size: 11px;
    font-weight: bold;
}
.navmenu a:hover
{
    background: #369;
    color: #fff;
}
/*新增的二级菜单部分*/
.navmenu ul ul
{
    visibility: hidden; /*开始时是隐藏的*/
    position: absolute;
    left: 0px;
    top: 24px;
}
.navmenu ul li:hover ul, .navmenu ul a:hover ul
{
    visibility: visible;
}
.navmenu ul ul li
{
    clear: both; /*垂直显示*/
    text-align: left;
}
/*选中菜单项*/
.navmenu .selected
{
    padding-left:15px;
    background-position-x:0px;
    background-image: url(./res/selected.gif);
    background-repeat: no-repeat;
    text-decoration:underline;
}

定义CSS后的效果如下：