                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /形形色色的下拉菜單

爲(wèi)什麼我按照代碼來小箭頭什麼都沒出現(xiàn)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

.nav {

width: 960px;

margin: 60px auto;

border: 1 solid #222;

background-color: #111;

border-radius: 6px;

box-shadow: 0 1px 1px #777;

padding: 0;

list-style: none;

font-family: "微軟雅黑";

}

.nav:before,

.nav:after {

content: '';

display: table;

}

.nav:after {

clear: both;

}

.nav li {

float: left;

border-right: 1px solid #222;

box-shadow: 1px 0 0 #444;

position: relative;

}

.nav li a {

float: left;

padding: 12px 30px;

text-decoration: none;

font: bold 12px;

color: #999;

text-shadow: 0 1px 0 #000;

}

.nav li a:hover {

color: #fafafa;

}

.nav li ul {

visibility: hidden;

position: absolute;

list-style: none;

top: 38px;

left: 0;

z-index: 1;

padding: 0;

background-color: #444;

box-shadow: 0 -1 0 rgba(255, 255, 255, .3);

border-radius: 3px;

opacity: 0;

/*透明度*/

margin: 20px 0 0 0;

transition: all .2s ease-in-out;

/*transition配合hover使用*/

}

.nav li:hover>ul {

/*>選擇子一級的ul*/

opacity: 1;

visibility: visible;

/*元素可見*/

margin: 0;

}

;

.nav ul li {

float: none;

display: block;

border: 0;

box-shadow: 0 1px 0 #111, 0 2px 0 #666;

}

.nav ul a {

padding: 10px;

width: 130px;

display: block;

float: none;

}

.nav ul a:hover {

background-color: #0186ba;

}

.nav ul li:first-child > a {

border-radius: 3px 3px 0 0;

}

.nav ul li:last-child > a {

border-radius: 0 0 3px 3px;

}

.nav ul li:first-child > a:before {

content: '';

position: absolute;

left: 40px;

top: -6px;

border-left: 6px solid transparent;

border-right: 6px solid transparent;

border-bottom: 6px solid #444;

}

.nav ul li:first-child > a:hover:before {

border-bottom-color: #04acec;

}

</style>

</head>

<body>

<li>

</li>

<li>

</li>

<li>

<ul>

<li>

<ul>

<li>

<a href="#">JavaScript</a>

</li>

<li>

</li>

<li>

<a href="#">jQuery</a>

</li>

</ul>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

</li>

</ul>

</body>

</html>

04:19

Passerby123

2017-02-21

源自：形形色色的下拉菜單 6-6

關(guān)注問題我要回答

597

操作

收起

2 回答

慕移動9181930
2022-03-29

(子組的開始標(biāo)記)子組的結(jié)束標(biāo)記

m r v g m p z m g n t n q t f q n n j q m n m v e e q z a j w x w z h k h x

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

forever_13
2017-03-03

nav ul li:first-child > a:before{

????content:?"";
????width:?0;
????height:?0;
????border-color:?transparent?transparent?#000?transparent;
????border-style:?dashed?dashed?solid?dashed;??//dashed兼容性更好
????border-width:?6px;
????}