Blogger Information
Blog 55
fans 0
comment 0
visits 59007
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
php分类菜单
南鸢离梦的博客
Original
786 people have browsed it

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8" />
<title>分类菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
font:14px/1.5 “宋体”;
}

a {
text-decoration: none;
}

a:hover {
color: red;
}

ul {
position: relative;
margin: 50px 0 0 50px;
width: 300px;
border: 2px solid #aa9900;
}

li {
height: 30px;
line-height: 30px;
width: 100%;
text-indent: 1em;
list-style: none;

border-top: 1px solid #CCC;
}

li:hover,
li:hover + li,
li:first-child {
border-top: none;
height: 31px;
line-height: 31px;
}

div.box {
width: 300px;
height: calc(100% + 2px);
display: none;
left: 300px;
top: -2px;

border: 1px solid #999;
position: absolute;
z-index: 1;

background: #EEE;
}

div.item {
position: relative;
width: 100%;
height: 100%;
}

li:hover div.box {
display: block;
}

li div.item span.link {
display: block;
width: calc(100% - 1px);
height: calc(100% - 2px);
position: absolute;
left: 0;
top: 0;
border-style: solid;
border-color: #FFF;
border-width: 1px 0 1px 1px;
z-index: 2;
}

li:hover div.item span.link {
border-color: #999;
background: #EEE;
width: 100%;
}

span.icon {
position: absolute;
right: 10px;
top: 0;
color: #999;
font-weight: bold;
font-family: serif;
}

li:hover a {
color: #270;
}

</style>
</head>
<body>
<ul>
<li>
<div class="item">
<span class="link">
<a href="#">分类1</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类1 详细信息</div>
</li>

<li>
<div class="item">
<span class="link">
<a href="#">分类2</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类2 详细信息</div>
</li>

<li>
<div class="item">
<span class="link">
<a href="#">分类3</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类3 详细信息</div>
</li>

<li>
<div class="item">
<span class="link">
<a href="#">分类4</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类4 详细信息</div>
</li>

<li>
<div class="item">
<span class="link">
<a href="#">分类5</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类5 详细信息</div>
</li>

<li>
<div class="item">
<span class="link">
<a href="#">分类6</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类6 详细信息</div>
</li>

<li>
<div class="item">
<span class="link">
<a href="#">分类7</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类7 详细信息</div>
</li>

<li>
<div class="item">
<span class="link">
<a href="#">分类8</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类8 详细信息</div>
</li>

<li>
<div class="item">
<span class="link">
<a href="#">分类9</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类9 详细信息</div>
</li>
</ul>
</body>
</html>

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post