html实现二级菜单自动打开,纯CSS实现鼠标滑过显示子菜单的二级菜单效果

本文实例讲述了纯CSS实现鼠标滑过显示子菜单的二级菜单效果。分享给大家供大家参考。具体如下：

这是一款基于纯CSS实现的菜单，当鼠标划过的时候，子菜单会出现，没有过多修饰，简约不失美观，稍加修善就是一款好菜单。在兼容性方面，本菜单也做的不错。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

复制代码代码如下:

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

CSS Flyout menus

#nav, #nav ul {

padding: 0;

margin: 0;

list-style: none;

}

#nav li {

float: left;

position: relative;

width: 10em;

border: 1px solid #B0C4DE;

background-color: #E7EDF5;

color: #2D486C;

font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;

margin-right: 1em;

}

<