css实现下拉菜单动态效果
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Drop Down Menu</title> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Arvo&display=swap'> <style> nav.primary-navigation { margin: 0 auto; display: block; padding: 150px 0 0 0; text-align: center; font-size: 16px; } nav.primary-navigation ul li { list-style: none; margin: 0 auto; border-left: 2px solid #3ca0e7; display: inline-block; padding: 0 30px; position: relative; text-decoration: none; text-align: center; font-family: arvo; } nav.primary-navigation li a { color: black; } nav.primary-navigation li a:hover { color: #3ca0e7; } nav.primary-navigation li:hover { cursor: pointer; } nav.primary-navigation ul li ul { visibility: hidden; opacity: 0; position: absolute; padding-left: 0; left: 0; display: none; background: white; } nav.primary-navigation ul li:hover > ul, nav.primary-navigation ul li ul:hover { visibility: visible; opacity: 1; display: block; min-width: 250px; text-align: left; p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0