欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css导航_html/css_WEB-ITnose

程序员文章站 2022-03-19 08:58:09
...

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; }

相关标签: css导航