项目场景:
小米二级菜单的初步练习
问题描述:
1.相对定位加到谁身上的问题 2.margin-top 把父元素带下来 3.层级不够 4.检查里面查看别人项目的字体 字号等
原因分析:
```css
*{margin:0
;padding:0
;}
img{vertical-align:top
;}
ul li{list-style:none
;}
a{text-decoration:none
;color:inherit
;}
html{font:12px/24px
"微软雅黑";color:#5c5c5c
;}
.w{width:1225px
;margin:auto
;}
.main{height:460px
;background:url(../images/1.jpg);background-size:100% auto
;}
.nav{width:234px
;height:460px
;background:rgba(147,153,155,.5
);position:relative
;}
.nav ul{width:100%
;height:420px
;float:left
;margin-top:20px
;:20px
;}
.nav ul li{width:234px
;height:42px
;line-height:42px
;text-indent:30px
;font-size:14px
;font-family:"Helvetica Neue", Helvetica, Arial,
"Microsoft Yahei",
"Hiragino Sans GB",
"Heiti SC",
"WenQuanYi Micro Hei", sans-serif
;color:#ffefe4
;}
.nav span{float:right
;margin-right:24px
;}
.nav li:hover{background:#ff6700
;}
.nav .hide{width:234px
;height:460px
;background-color:white
;border:1px solid #e0e0e0
;position:absolute
;left:234px
;top:0
;display:none
;}
.nav li:hover .hide{display:block
;}
# 解决方案:
1.相对定位加到谁身上的问题-- 为了保持二级菜单的框子不变 这次相对定位加在爷爷身上
2.margin-top 把父元素带下来 在ul上加了浮动
3.多带了几个父元素 祖先元素的选择器
总结
坚持多练习