html框架左侧导航栏如何实现移动鼠标显示二级菜单

Posted 2023-05-12

参考技术A #nav ul  list-style-type:none; 
 #nav ul li  float:left; position: relative;
 #nav ul li a  border-right:1px solid #e9e9e9; padding:20px; display:block; text-decoration:none; text-
align:center; color:#999;
 #nav ul li a:hover background: #12aeef url(http://files.jb51.net/demoimg/200912/shadow.png) repeat-x;; 
color:#fff; 
 #nav ul li ul display: none;
 #nav ul li:hover ul display: block; position: absolute; top:56px; min-width:190px; left:0; 
 #nav ul li:hover ul li a display:block; background:#12aeef; color:#ffffff; width: 110px; text-align: 
center; border-bottom: 1px solid #f2f2f2; border-right: none;
 #nav ul li:hover ul li a:hover  background:#6dc7ec; color:#ffffff; 

layui如何左侧点击，右侧显示内容？

layui如何左侧点击，右侧显示内容点击左侧，直接跳转过去，不会显示到右侧

参考技术A 首先引入layui的样式代码。 2、然后创建html代码，添加上layui的导航样式，layui-nav。 3、运行页面，这时就可以看到一个美观的导航菜单了。 4、现在的菜单右边有很多空白的地方，可以添加样式，为导航栏条目添加长度，让其布满页面 参考技术B layui实现点击左侧的菜单，在右侧显示内容。其实并不是非要layui前端框架，这个左侧点击，右边显示内容的原理是iframe完成的，其它框架都可以实现