jsp左侧导航栏下拉菜单
时间: 2023-08-31 09:12:31 浏览: 102
你可以使用HTML和CSS实现一个左侧导航栏下拉菜单,结合JavaScript实现动态效果。以下是一个简单的示例:
HTML代码:
```
<div class="nav">
<ul>
<li><a href="#">菜单1</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a>
<ul>
<li><a href="#">子菜单4</a></li>
<li><a href="#">子菜单5</a></li>
</ul>
</li>
</ul>
</div>
```
CSS代码:
```
.nav {
width: 200px;
}
.nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav li {
position: relative;
}
.nav a {
display: block;
padding: 10px;
background-color: #eee;
color: #333;
text-decoration: none;
}
.nav ul ul {
position: absolute;
left: 100%;
top: 0;
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul ul li {
width: 200px;
float: none;
}
.nav ul ul a {
padding: 5px;
background-color: #ddd;
}
.nav ul ul ul {
left: 100%;
top: 0;
margin-left: 10px;
}
```
JavaScript代码:
```
// 在这里添加 JavaScript 代码来实现动态效果
```
上述代码实现了一个基本的左侧导航栏下拉菜单,你可以根据自己的需求进行修改。