Question

html +css 导航实现小箭头指向区域内容

需 一级导航 每个文字 都要有这个小箭头 ， 导航为二级导航





Answer 1

<meta charset="utf-8">
<style type="text/css">
.nav,.nav li{
margin:0px;
padding:0px;
list-style-type:none;
background-color:#369;
color:#fff;
}
.nav li{
float:left;
width:100px;
text-align:center;
}
.nav li div{
display:none;
background-color:#abf;
}
.nav li:hover span{color:red;
/*
在这里加三角形的图片
background:url(x) no-repeat center bottom;
*/
}
.nav li:hover div{display:block;}
</style>
<ul class="nav">

<li>
<span>综合排序</span>
<div>
按时间排序<br />
按人气排序<br />
按好评排序<br />
按XXX排序
</div>
</li>

<li>
<span>筛选</span>
<div>
按时间排序<br />
按人气排序
</div>
</li>

</ul>

Answer 2

找一个这样素材的小图标，然后给当前hover的li标签添加背景图片：
$(function(){
$('li').hover(function(){
$(this).css{"background","url(1.jpg)no-repeat center bottom"}//图片定位自己定位，这里定位在li的中间底部，但是没有伸出，改变bottom的值为负值就行了

})

})

Answer 3

a:hover: 你可以试试