导航鼠标悬停变色--H5+css

 

html:

       

             

• 鼠标悬停

             

• 鼠标悬停

             

• 鼠标悬停

             

• 鼠标悬停

             

• 鼠标悬停

           

• 鼠标悬停

       

---

CSS:

*{

       margin: 0;

      padding: 0;

}

body{

       background: #ffffce;

}

ul{

      width: 995px;

       height: 36px;

       background: #9c0000;

       border-bottom: 21px solid #cecfce;

       padding-left: 5px;

       margin-top: 40px;

}

li{

        width: 100px;

        height: 32px;

        background:#ffffff;

        border-right: 1px solid #000000;

        margin-right: 1px;

         float: left;

        list-style: none;

}

a{

        display: block;

         font-size: 14px;

         height: 28px;

         line-height: 28px;

        background: #ff6100;

       text-decoration: none;

       margin-top: 4px;

       color: #000000;

        text-align: center;

}

li:hover{

       background: #9c0000;

}

li:hover a{

        background: #000;

        color: yellow;

}