css实现炫酷下拉菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现炫酷下拉菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="UTF-8"> <style> /* Clearing floats */ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } /* Mini reset, no margins, paddings or bullets */ .menu, .submenu { margin: 0; padding: 0; list-style: none; } /* Main level */ .menu { margin: 50px auto; width: 800px; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; } .menu >li { background: #34495e; float: left; position: relative; transform: skewX(25deg); } .menu a { display: block; color: #fff; text-transform: uppercase; text-decoration: none; font-family: Arial, Helvetica; font-size: 14px; } .menu li:hover { background: #e74c3c; } .menu >li >a { transform: skewX(-25deg); padding: 1em 2em; } /* Dropdown */ .submenu { position: absolute; width: 200px; left: 50%; margin-left: -100px; transform: skewX(-25deg); transform-origin: left top; } .submenu li { background-color: #34495e; position: relative; overflow: hidden; } .submenu >li >a { padding: 1em 2em; } .submenu >li::after { content: ''; position: absolute; top: -125%; height: 100%; width: 100%; box-shadow: 0 0 50px rgba(0, 0, 0, .9); } /* Odd stuff */ .submenu >li:nth-child(odd) { transform: skewX(-25deg) translateX(0); } .submenu >li:nth-child(odd) >a { transform: skewX(25deg); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0