CSS实现左侧多级菜单栏
首先看要实现的效果, 主要是关心技术实现, 所以没怎么美化
我也是初学html, 所以写的比较啰嗦
1. 使用列表将内容显示出来
<!DOCTYPE html> |
这样会显示如下效果
这里不好看的地方是:
A. 二级目录预想是排在一级目录右边的, 但现在却是在下面的
B. 目录前面的小黑点和小圆圈是不需要的
2. 修改css
<style> |
嗯, 这样好看多了, 但是二级目录还是没有排版到一级目录的右边
3. 给ul加上 position:absolute; 使ul脱离文档流, 悬浮在原来文档流的上面
*{margin: 0;padding: 0;} /*消除各种浏览器的边距默认值*/ |
4. 增加功能: 二级目录默认不显示, 鼠标悬停在一级目录上时, 才显示
<style> |
5. 上面的问题是 100001 没有与 一级目录1 同一高度
<style> |
6. 给一个完整界面
<!DOCTYPE html> |
CSS实现左侧多级菜单栏的更多相关文章
- 左侧多级菜单,高亮显示js
左侧多级菜单,如果本页面是当前栏目,则左侧菜单高亮显示 <ul class="nav navbar-stacked" id="navs"> {ded ...
- CSS浮动布局与菜单栏设计
公司周六停电,终于可以双休了.用周五空余时间再夯实一下css基础,<CSS权威指南>概念性的内容看起来容易犯困,不如实践来得快,动手操作吧. 一.浮动布局 浮动存在问题:浮动使元素脱离文档 ...
- CSS布局 -- 左侧定宽,右侧自适应
左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-// ...
- css实现左侧固定宽,右侧自适应的7中方法
一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...
- CSS 实现左侧固定,右侧自适应两栏布局的方法
"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...
- HTML和CSS实现左侧固定宽度右侧内容可滚动
在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...
- [转]css实现左侧宽度自适应,右侧固定宽度
原文地址:https://segmentfault.com/a/1190000008411418 页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应.总之就是一边固定宽度 ...
- css中左侧固定,右侧自适应
谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度; 2.只告 ...
- layui 左侧三级菜单栏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- python从含有汉字和数字的字符串中提取数字部分
我遇到的问题是:我想要从字符串“1小时12分钟”中(其中两个数字是变化的)截取出1和12. 切片的方法比较简单,但不适合变化的字符串. filter(str.isdigit,"1小时12分钟 ...
- bootstrap模态框弹框后执行Ajax
如下: editModal:模态框ID <script> $(document).ready(function() { $('#editModal').on('hidden.bs.moda ...
- scoping作用域,anonymous function匿名函数,built-in functions内置函数
作用域练习1 def test1(): print('in the test1') def test(): print('in the test') return test1 res = test() ...
- WindowsServer2012R2开机进入CMD,关闭后黑屏问题
原因分析: 因为自己在卸载IIS的时候,不小心卸载了.net framework,系统没有了图形界面(由完整模式Full变为了核心模式core),需要重新恢复.net framework4.5. 解决 ...
- java.util.ConcurrentModificationException详解
引用于http://blog.csdn.net/dabing69221/article/details/40065071 在使用set/map时,一个可爱的小bug:Java.util.Concurr ...
- [Unity优化]UI优化(三):GraphicRebuild
参考链接: https://blog.csdn.net/jingangxin666/article/details/80143176 调试过程: 1.修改Image的颜色 2.Graphic.SetV ...
- 2.pandas数据清洗
pandas是用于数据清洗的库,安装配置pandas需要配置许多依赖的库,而且安装十分麻烦. 解决方法:可以用Anaconda为开发环境,Anaconda内置了许多有关数据清洗和算法的库. 1.安装p ...
- gopath环境变量设置
#在国内镜像下载二进制包 wget -c http://www.golangtc.com/static/go/go1.4.1.linux-amd64.tar.gz tar -C /usr/local ...
- 微信小程序 用户登录 服务器端(TP5.1)实现
先来看官方提供的流程图: 客户端: 小程序客户端通过 wx.login() 获取登录code , 然后将code当做参数传递到服务器. getToken(){ var that = this; wx. ...
- SpringMVC Get请求传集合,前端"异步"下载excel 附SpringMVC 后台接受集合
最近项目上管理后台需要自己做一部分js部分,之前都是前端来弄...碰到了下载excel,刚开始使用ajax,搞了好久发现不合适..下载不了,网上说ajax返回类型不支持二进制流.. 因此采用 wind ...