导航菜单

标签：style   color   io   os   ar   div   sp   on   代码   

   导航菜单主要是由列表做出来的。不同的导航菜单还需要与<div>相结合来完成的。  

一种菜单式横着的：

代码如下写：

HTML：

css:

一种是竖着的与横着的都有的：

HTML：

CSS：

 div{
     border: 1px red solid;
 }

 ul{
     list-style:none
 }
a{
    text-decoration: none;
}
.nav1{
        width:960px;
        height:40px;
        margin: 0 auto;
        border-radius:0px 8px 8px 0px;
        background-color: orangered;
}

 .ul1 li{
       width:100px;
       height: 100%;
       float:left;
       text-align: center;
       line-height: 40px;
       }
.ul1 li a{
    color: #fff;
    display: block;
    width:100%;
    height: 100%;
}
.ul1 li a:hover{
   background-color: #FFA500;
 }

.nav2{
    width:220px;
    height: 300px;
    display: none;
    position: relative;
}


.ul2 li{
    float:none;
    background-color: #32CD32;
    width:100%;
    text-align: left;
}

#lione:hover .nav2{
     display: block;
}


.nav3{
    width:740px;
    height:300px;
    position: absolute;
    left:220px;
    top:0px;
    background-color: #7FFF00;
    border-radius:0px 8px 8px 0px ;
    display: none;
}

.ul2 li:hover .nav3{
    display: block;
}

导航菜单

标签：style   color   io   os   ar   div   sp   on   代码   

原文地址：http://www.cnblogs.com/hellokitty1/p/3984871.html