a标签悬停展开子菜单
时间: 2023-12-06 18:33:18 浏览: 24
要实现a标签悬停展开子菜单,可以使用CSS和JavaScript来实现。下面是一个实现的示例代码:
HTML代码:
```html
<a href="#" onmouseover="showMenu()" onmouseout="hideMenu()">菜单</a>
<div id="submenu" style="display: none;">
<a href="#">子菜单1</a>
<a href="#">子菜单2</a>
<a href="#">子菜单3</a>
</div>
```
JavaScript代码:
```javascript
function showMenu() {
document.getElementById("submenu").style.display = "block";
}
function hideMenu() {
document.getElementById("submenu").style.display = "none";
}
```
CSS代码:
```css
#submenu {
position: absolute;
top: 20px;
left: 0;
background-color: #f1f1f1;
padding: 10px;}
```
这段代码通过设置onmouseover事件和onmouseout事件来控制子菜单的显示和隐藏。鼠标悬停在a标签上时,调用showMenu函数显示子菜单;鼠标移出a标签时,调用hideMenu函数隐藏子菜单。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)