在活動菜單項上向下的箭頭

我試圖創建一個菜單。在活動菜單項也應該是朝下一個箭頭看起來像這樣在活動菜單項上向下的箭頭

a busy cat

到目前爲止，這是我 http://codepen.io/anon/pen/akcfe

我的CSS代碼：

select{ 
    display:none; 
} 
nav { 
margin: 0 auto; 
text-align: center; 
background: #fff; 
height:70px; 
} 

nav ul { 
list-style: none; 
margin: 0; 
padding: 0; 
display: inline-block; 
vertical-align: top; 

} 

nav ul li { 
float: left; 
margin: 0; 
padding: 0; 

} 

nav ul li a { 
display: block; 
padding: 10px 7px; 
width:80px; 
color: #000; 
text-decoration:none; 

} 
nav ul li~li { border-left: 1px solid #857D7A; } 

nav .active a { 

color:#fff; 
}

來源

2014-09-18 nabeelaa

有y ou看了這個問題：[CSS：如何爲活動鏈接添加向下箭頭]（http://stackoverflow.com/questions/14391184/css-how-to-add-a-down-arrow-for-the -active-link） – Dan 2014-09-18 21:53:35

CSS片斷答案：在行動：http://jsfiddle.net/hba18byw/

nav .active:before{ 
    content: ' '; 
    border:10px solid transparent; 
    border-top:10px solid red; 
    border-left:10px solid transparent; 
    display:inline-block; 
    height:0; 
    width:0; 
    position:absolute; 
    margin-left:-10px 
}

enter image description here

全部CSS：

select{ 
    display:none; 
} 
nav { 
margin: 0 auto; 
text-align: center; 
background: #fff; 
height:70px; 
} 

nav ul { 
list-style: none; 
margin: 0; 
padding: 0; 
display: inline-block; 
vertical-align: top; 
background: rgba(148,148,149,1); 
background: -moz-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%); 
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(148,148,149,1)), color-stop(36%, rgba(192,192,192,1)), color-stop(100%, rgba(192,192,192,1))); 
background: -webkit-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%); 
background: -o-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%); 
background: -ms-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%); 
background: linear-gradient(to bottom, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#949495', endColorstr='#c0c0c0', GradientType=0); 
} 

nav ul li { 
float: left; 
margin: 0; 
padding: 0; 

} 

nav ul li a { 
display: block; 
padding: 10px 7px; 
width:80px; 
color: #000; 
text-decoration:none; 

} 
nav ul li~li { border-left: 1px solid #857D7A; } 
nav .active:before{ 
content: ' '; 
    border:10px solid transparent; 
    border-top:10px solid red; 
    border-left:10px solid transparent; 
    display:inline-block; 
    height:0; 
    width:0; 
    position:absolute; 
    margin-left:-10px 
}

來源

2014-09-18 22:01:29

完美！謝謝：） – nabeelaa 2014-09-19 13:22:51

請檢查這個：http://codepen.io/fadyhasn/pen/sgLiy。這些都是我已經添加了額外的樣式：

li.active:before { 
    content: '▼'; 
    position: absolute; 
    margin-top: -3px; 
    margin-left: -5px; 
    color: orange; 
    font-size: 13px; 
    transform: scale(2,1); 
    -webkit-transform: scale(2,1); 
    -moz-transform: scale(2,1); 
    -ms-transform: scale(2,1); 
    -o-transform: scale(2,1); 
} 

nav ul { 
    border-top: 5px solid orange; 
}

來源

2014-09-18 21:56:31

謝謝你的回答:) – nabeelaa 2014-09-19 13:23:17

在活動菜單項上向下的箭頭

回答

相關問題