我们如何使html / css代码中的子下拉菜单显示在下拉菜单的顶部?

时间:2016-02-23 15:36:50

标签: html css drop-down-menu

当我将鼠标悬停在链接上时,会出现从链接本身开始的子下拉菜单,并且下拉菜单会出现下降? 如何从菜单顶部显示下拉菜单中的第一个链接?

这是我得到的代码

<style> 
#mbtnavbar { 
    background: #3B5998; 
    width: 100%; 

    color: #FFF; 
        margin: -50px 0; 
        padding: 0; 
        position: relative; 
        border-top:0px solid #960100; 
        height:35px;
}

#mbtnav { 
    margin: 0; 
    padding: 0; 
} 
#mbtnav ul { 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#mbtnav li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 

} 
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited { 
    color: #FFF; 
    display: block; 
   font:bold 16px Helvetica, sans-serif; 
   margin: 0; 
    padding: 9px 16px 11px 16px;
        text-decoration: none; 
        border-right:0px solid #627AAD;
} 
#mbtnav li a:hover, #mbtnav li a:active { 
    background: #627AAD; 
    color: #FFF; 
    display: block; 
    text-decoration: none; 
        margin: 0; 
    padding: 9px 16px 11px 16px; 



}
#mbtnav li { 
    float: left; 
    padding: 0; 
} 
#mbtnav li ul { 
    z-index: 9999; 
    position: absolute; 
    left: -999em; 
    height: auto; 
    width: 140px; 
    margin: 0; 
    padding: 0; 
} 
#mbtnav li ul a { 
    width: 140px; 
} 
#mbtnav li ul ul { 
    margin: -25px 0 0 161px; 
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul { 
    left: -999em; 
} 
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul { 
    left: auto; 
} 
#mbtnav li:hover, #mbtnav li.sfhover { 
    position: static; 
} 
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited { 
    background: #EDEFF4; 
    width: 120px; 
    color: #3B5998; 
    display: block; 
    font:normal 12px Helvetica, sans-serif; 
    margin: 1px 0 0 0; 
    padding: 9px 16px 10px 16px; 
        text-decoration: none; 
z-index:9999; 
border:1px solid #ddd;
-moz-border-radius:8px; 
-webkit-border-radius:8px;

} 
#mbtnav li li a:hover, #mbtnav li li a:active { 
    background: #627AAD; 
    color: #FFF; 
    display: block; 

}

#mbtnav li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited {
    background: #EDEFF4; 
    width: 120px; 
    color: #3B5998; 
    display: block; 
    font:normal 16px Helvetica, sans-serif; 
    padding: 9px 16px 10px 16px; 
        text-decoration: none; 
z-index:9999; 
border:1px solid #ddd; 
    margin: 1px 0 0  -14px; 


} 
#mbtnav li li li a:hover, #mbtnav li li li a:active { 
    background: #627AAD; 
    color: #FFF; 
    display: block; 
    overflow:visible
}
</style>

0 个答案:

没有答案