在不使用js的情况下,悬浮层效果使用hover选择器实现。二级菜单平常设定为display:none;在触发一级菜单时显示一级菜单display:block。 另外巧用空白块实现如下图效果: 具体代码如下: .topmenu li:hover span{ background:white; width:20px; height:30px; display:inline-block; position:relative; float:right; z-index: 5; } 另外一个重点就是使用z-index属性,正确显示悬浮层。z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,如果之前的一级目录设置为3,像之后的二级目录的z-index就设置为4了。
.html代码
`<!DOCTYPE HTML>
<html>
<head>
<meta charest="utf-8">
<title>商城分类导航效果</title>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/nav.css">
</head>
<body>
<ul class="topmenu">
<div class="toptitle">全部商品分类</div>
<li><a href="#">图书、音像、数字商品</a><span></span>
<div class="submenu">
<dl>
<dt><a href="#">电子书</a></dt>
<dd>
<a href="#">免费</a>