css实现点击菜单向右展开显示内容的代码
程序员文章站
2022-05-02 15:30:19
...
本篇文章给大家带来的内容是关于css实现点击菜单向右展开显示内容的代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css多级菜单向右展开</title> <style> *{margin: 0 auto;padding: 0} .nav-wrapper{width: 100px;} .nav-wrapper ul a{font-family: '微软雅黑';font-size: 14px;color: #333;text-decoration: none;} .nav-wrapper ul a:hover{color: #000;text-decoration: none;} .nav-wrapper ul li{width: 100px;height: 35px;line-height: 35px;text-align: center;position: relative;} .nav-wrapper ul li:hover{background: #c1c1c1;} .nav-wrapper ul{width: 100px;height: auto;position: absolute;background: #DADADA;list-style: none;} .nav-wrapper .nav1{position: static !important;} .nav-wrapper ul.nav2{left: 99px;top: 0;display: none;} .nav-wrapper .nav1 .li1:hover ul.nav2{display: block;background: #c1c1c1;} </style> </head> <body> <!--代码部分--> <!-- 欢迎来到大峡谷 --> <div class="nav-wrapper"> <ul class="nav1"> <li class="li1"><a href="#">一成</a> <ul class="nav2"> <li class="li2"><a href="#">*妈</a></li> <li class="li2"><a href="#">维克托</a></li> </ul> </li> <li class="li1"><a href="#">温bb</a> <ul class="nav2"> <li class="li2"><a href="#">薇恩</a></li> <li class="li2"><a href="#">盲僧</a></li> </ul> </li> <li class="li1"><a href="#">天翔</a> <ul class="nav2"> <li class="li2"><a href="#">鳄鱼</a></li> <li class="li2"><a href="#">小炮</a></li> </ul> </li> <li class="li1"><a href="#">顾研</a> <ul class="nav2"> <li class="li1"><a href="#">火女</a></li> <li class="li1"><a href="#">石头人</a></li> </ul> </li> </ul> </div> </body> </html>
相关推荐:
css hover下拉菜单_html/css_WEB-ITnose
以上就是css实现点击菜单向右展开显示内容的代码的详细内容,更多请关注其它相关文章!
上一篇: PHP面试题遇到的几个坑。面壁ing
下一篇: 产品设计 页面原型制作工具
推荐阅读
-
救急,请问前端div+css组成页面后,怎么点击左侧页面进入右侧页面并且左侧菜单不变动,右侧显示左侧点击的内容???????_html/css_WEB-ITnose
-
jquery实现可点击伸缩与展开的菜单效果代码_jquery
-
救急,请问前端div+css组成页面后,怎么点击左侧页面进入右侧页面并且左侧菜单不变动,右侧显示左侧点击的内容???????_html/css_WEB-ITnose
-
jquery实现可点击伸缩与展开的菜单效果代码_jquery
-
css实现点击菜单向右展开显示内容的代码
-
css实现点击菜单向右展开显示内容的代码
-
点击左侧导航菜单栏 右侧出现相应的内容 之前我是在一个jsp页面上实现的 但是现在要求要在多个jsp页面上实现 该怎么做 求大神解答_html/css_WEB-ITnose
-
点击左侧导航菜单栏 右侧出现相应的内容 之前我是在一个jsp页面上实现的 但是现在要求要在多个jsp页面上实现 该怎么做 求大神解答_html/css_WEB-ITnose
-
js实现点击向下展开的下拉菜单效果代码_javascript技巧
-
js实现点击向下展开的下拉菜单效果代码_javascript技巧