html中绝对定位的父级,父元素相对定位,子元素绝对定位

无动画菜单2

*{margin: 0px;padding: 0px;}

#nav{background-color: #eee;width: 600px;height: 40px;

margin:0 auto ;}

#nav ul{list-style:none;/*去除圆点*/}

ul li{float: left;/*横着排列*/

/*width: 90px;每一项设置间距但是不能自适应*/

/*padding: 0 10px;*/

line-height: 40px;/*竖直居中*/

text-align:center; /*在li元素中水平居中*/

position: relative;/***************如何较好的运用***********/}

#nav ul li a{text-decoration: none;color: black;padding: 0 47px;/*设置刚好平均分布*/

display: block;/*转换为块级便签,具备width和height*/}

#nav ul li a:hover{background-color: #000;color: white}

/*原本nav里面各项间距在li元素里面设置padding

但是hover效果没有填满这个块,所以在a设置间距*/

/***************************************************************/

ul li ul li{float: none;/*前面设置了float:left会影响到这里*/text-align: left;}

/*在没有加入绝对定位以及相对定位,首页的框会随书名的变化而变化

给父元素先相对定位,再给子元素绝对定位*/

/*ul li ul 表示首页下面的一整块书名*/

ul li ul{position: absolute;left: 0px;top: 40px}/*ul li ul 表示首页下面的一整块书名*/

.zhankai1 li {margin-top: 2px;display:none;}

.zhankai1 li a{background-color: rgba(12,33,23,0.2);width: 120px;text-align: left;}

.zhankai1 li a:hover{background-color: black;color: white}

ul li:hover ul li{display: block;}

我后来只能给下面这些书名的框加了width才能让它没有分行显示,但是我看那个女老师的解说中并没有提到加width

2.还有一点就是我的书名

0999bb353e8793dc14b0dc4880accaf6.png

能不能让他往左一些呢

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值