需要实现的结构如下图:
关于布局:
布局采用ul里面包含4个li,li里面包含a标签(微博)以及ul(下面的下拉菜单),采用hover改变移动到下拉菜单后背景变色。
关于功能:
首先利用jquery获取元素,然后给li添加mouseenter方法显示下面的下拉菜单,然后给li添加mouseleave方法离开后又隐藏下拉菜单。
最终代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jq下拉菜单</title>
<script src="./js/jquery.min.js"></script>
<style lang="">
* {
margin: 0;
padding: 0;
}