首页 新闻 会员 周边

求解释一段导航二级菜单的CSS

1
悬赏园豆:100 [已解决问题] 解决于 2015-10-15 11:35

/***********二级菜单样式************/
.camTitleBig{
    position: relative;
    background: url("/static/images/systemPicture/cambgBig.jpg") repeat-x scroll left top;
    margin:20px auto 0;
    width:1117px;
    height:55px
}
.camNavBig{
    float: left;
}
.camNavBigUl > li{
    border-right: 1px solid #f4f4f4;
    border-top: 2px solid #fff;
    float: left;
    height: 55px;
    position: relative;
}
.camNavBigUl > li > a{
    display: inline-block;
    font-size: 14px;
    line-height: 47px;
    padding-right: 20px;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 140px;
}
.camNavBigUl > li > a b {
    border-color:#6f6f6f transparent transparent;
    border-style: solid;
    border-width: 5px;
    font-size: 0;
    height: 0;
    line-height: 0;
    position: absolute;
    right: 30px;
    top: 22px;
    width: 0;
}

.camNavBigUl > li.active, .camNavBigUl > li:hover {
    background: none repeat scroll 0 0 #fff;
    border-top: 2px solid #1abd96;
}
.camNavBigUl > li.active > a, .camNavBigUl > li:hover > a {
    color: #1abd96;
    font-weight: bold;
}
.camNavBigUl > li.active > a b, .camNavBigUl > li:hover > a b {
    border-color: #1abd96 transparent transparent;
}
.camNavBigUl > li.active .cnpopCon, .camNavBigUl > li:hover .cnpopCon {
    display: block;
}
.cnpopCon{
    background: none repeat scroll 0 0 #fff;
    border-bottom: 2px solid #1abd96;
    box-shadow: 0 5px 15px #ccc;
    display: block;
    left: 0;
    min-height: 110px;
    min-width: 160px;
    position: absolute;
    top: 55px;
    z-index: 22;
    display:none;
}
.ccNav > ul{
    padding: 10px 0;
}
.ccNav li{
    height: 31px;
    line-height: 31px;
    padding: 0 10px;
    white-space: nowrap;
}
.ccNav > ul > li > a{
    color: #2d2d2d;
    display: block;
    padding: 0 0 0 30px;
    text-decoration: none;
}
.ccNav > ul > li:hover > a {
    background: none repeat scroll 0 0 #1abd96;
    font-weight: bold;
}
.ccNav > ul > li.hasCon.active > a, .ccNav > ul > li.active > a{
    color:#1abd96;
}
.ccNav > ul > li.hasCon.active > a:hover, .ccNav > ul > li.active > a:hover{
    color:#2d2d2d; 
    background-color:#1abd96;
}

.ccNav > ul > li.hasCon:hover > a {
    background: url("/static/images/r.png") no-repeat scroll 118px center #1abd96;
}
.ccNav > ul > li.hasCon.active.hover > a{
    color: #2d2d2d;
}
.ccNav > ul > li > .ccNavSon li.active > a{
    background-color: #1abd96;
    color: #2d2d2d;
}
.ccNav > ul > li.hasCon:hover > .ccNavSon{
    z-index: 10;
}
.ccNav > ul > li > .ccNavSon{
    background: none repeat scroll 0 0 #fff;
    border-bottom: 2px solid #1abd96;
    bottom: -2px;
    box-shadow: 0 5px 10px #ddd;
    display: none;
    left: 160px;
    min-width: 120px;
    position: absolute;
    top: 0;
    z-index: 0;
}
.ccNav > ul > li > .ccNavSon ul {
    padding: 10px 0 0;
}
.ccNav > ul > li > .ccNavSon li:hover > a{
    background: none repeat scroll 0 0 #1abd96;
    font-weight: bold;
}
.ccNav > ul > li > .ccNavSon a {
    color: #2d2d2d;
    display: block;
    padding: 0 0 0 20px;
    text-decoration: none;
}
.ccNav > ul > li:hover > .ccNavSon, .ccNav > ul > li.active > .ccNavSon {
    display: block;
}
.ccNav > ul > li > .ccNavSon:before {
    background: none repeat scroll 0 0 #fff;
    border-right: 1px solid #f4f4f4;
    bottom: 0;
    content: "";
    display: block;
    left: -10px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 10px;
    z-index: 211;
}

.model_list_top2 {
    width: 1130px;
    margin: 0 auto;
    height: 55px;
    z-index: 11;
    position: relative;
}

这段代码从别的页面拷的,可是放到新页面就是调不好。由于没有美工,所以只能请求网上的朋友帮忙看看,解释下这些css代码的意思

Mr.xiong的主页 Mr.xiong | 初学一级 | 园豆:79
提问于:2015-10-14 15:00
< >
分享
最佳答案
0

1.选择元素

.camTitleBig控制的是class="camTitleBig"的元素;

.camNavBigUl > li是指class="camNavBigUl"下面的li元素;以此类推。

2.常用属性:

background,width,height,font这些就不用说了吧。

float: http://www.w3school.com.cn/css/css_positioning_floating.asp

margin和padding参考这里:http://www.w3school.com.cn/css/css_boxmodel.asp

 

 

收获园豆:50
敬YES | 菜鸟二级 |园豆:490 | 2015-10-14 15:30
其他回答(2)
0

这个不好解释,1:都是一个一个的样式,看你引用了那些2:.camNavBigUl > li这样的层级结构不管前端与后台都应该需要知道把,js也是这种结构的3:里面的背景图片高度,宽度什么的,你自己试一下把,别人直接也看不出什么东西5:你是考过来的,背景图也全考过来,.ccNav这种你到底你页面用了没有

1楼就帮你基本的都说了,很小的多少像素什么的,我们也很难帮你

收获园豆:50
稳稳的河 | 园豆:4216 (老鸟四级) | 2015-10-14 15:51
0

我是写CGKE网站的前端作者,www.cgke.com,你应该是从这里参考的吧?

brance | 园豆:136 (初学一级) | 2015-10-21 10:00
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册