Heim > Artikel > Web-Frontend > css导航_html/css_WEB-ITnose
css导航_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:34:411160Durchsuche
body { width:960px; margin: 40px auto; }
#menu { height:40px; width:100%; background:#1b1717; list-style:none; border-radius:5px; }
#menu li { float:left; list-style:none; width:130px; }
#menu a { top:10px;
padding:10px 40px 10px 40px;
position:relative;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
}
#menu ul { display:none; }
#menu ul li{ background:#2b2b33;
position:relative;
width:130px;
height:40px;
left:-40px;
top:15px;
border-bottom:1px solid;
border-bottom-color:white;
}
#menu li:hover > ul { display: block; }
#menu ul ul li { position:relative; top:-25px; left:90px; background:#2937a7; }
/*第一个小三角代码*/
#menu ul li:first-child > a:after{ content: ''; display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #CCC; position: absolute; top: -10px; left: 60px; }
/*第二个小三角代码*/
#menu ul ul li:first-child a:after{
left: -8px;
top: 12px;
border-left: 0px;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444; }