day1-css练习[新浪首页顶部栏]

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

直接贴代码吧：

html代码

<div class="border-01">
<div class="border-001">
<ul class="weibo-left">
<li><a href="#">设置为首页</a></li>
<li><a href="#">手机新浪网</a></li>
<li><a href="#">移动客户端</a></li>
</ul>
<ul class="weibo-right">
<li><a href="#">登录</a></li>
<li class="weibo">
<a href="#">微博</a>
<ul>
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
<li><a href="#">博客</a></li>
<li><a href="#">邮箱</a></li>
<li><a href="#">网站导航</a></li>
</ul>
</div>

css代码：

body,div{
margin:;
padding:;
font-family:"Microsoft YaHei","微软雅黑","SimSun","宋体";
}
ul,li{
list-style: none;
margin:;
padding:;
}
a{
text-decoration: none;
color: #4c4c4c;
}
.border-01{
width: 100%;
border-top: 4px solid #ff8400;
border-bottom: 1px solid #edeef0;
/* 文字居中对齐 height=line-height */
height: 42px;
line-height: 42px;
}
.border-001{
width: 982px;
margin: 0 auto;
font-size: 12px;
}
.weibo-left{
float: left;
}
.weibo-right{
float: right;
}
/* 使用float来实现横排，而不是父组件设置display为flex */
.weibo-left>li,.weibo-right>li{
float: left;
padding:0px 14px;
}.weibo-left>li:hover,.weibo-right>li:hover{
/* color: #ebbe7a; */
background-color: #edeef0;
}
.weibo-left>li>a:hover,.weibo-right>li>a:hover{
color: #ff8400;
}
.weibo>ul{
position: absolute;
display: none;
/* margin-left: -14px; */
/* left: -14px; */
/* padding: 0 14px; */
}
/* 父元素hover实现子元素显示 */
.weibo:hover >ul{
display: block;
width: 113px;
/* margin-left: -14px; */
/* padding: 0 14px; */
}
.weibo:hover >ul>li{
border: 1px solid #ff8400;
border-top: none;
padding: 0 14px;
margin-left: -14px;
}
.weibo:hover >ul>li>a:hover{
background-color:#edeef0;
color: #ff8400;
display: block;
}
.weibo:hover >ul>li:hover{
background-color:#edeef0;
/* color: #ff8400; */
}