css制作导航栏

* {

    margin: 0;

    padding: 0;

}

ul li {

    list-style: none;

}

#menu {

    width: 900px;

    height: 80px;

    background-color: black;

    margin: 0 auto;

    position: relative;

}

#menu>ul>li {

    float: left;

    width: 150px;

    height: 80px;

    text-align: center;

    line-height: 80px;

    font-size: 20px;

}

a {

    text-decoration: none;

    color: white;

}

.one>li>a {

    display: block;

    color: black;

    font-size: 18px;

    text-transform: capitalize;

    text-align: center;

    line-height: 50px;

}

.one {

    display: none;

}

#menu>ul>li:hover .one {

    display: block;

}

#r0 {

    width: 900px;

    height: 800px;

    position: absolute;

    left: 0px;

}

#r1 {

    width: 225px;

    float: left;

}

#r1>.one>li>.two {

    color: chocolate;

}

   

   

   

    Document

   

   

   

利用css浮动效果完成二级导航栏的排列问题,同时利用css定位元素对下拉任务栏的位置完成调整。

你可能感兴趣的:(css,前端,javascript)