1、面包屑导航栏(很多网站的头儿都用这样的) )。
http://www.Sina.com/http://www.Sina.com /
！ doctypehtmlheadmetacharset=' utf-8 ' title面包屑导航栏/titlestyle*{padding:0px； 边距：0 px； } div { background-color : # F5 F5； 文本照明3360中心； } ul { display :在线块； padding: 8px 16px； list-style: none； background-color:#f5f5f5； }ul li{display: inline； color:#6f5056； } ul Lili : before { padding :8 px； color: #6f5056； 内容： '/ 00a0'； }/style/headbodydivulli主页/lili我的订单/lili登录/lili客户服务/lili我的集合/li/ul/div/bodyhtml 2
思路是将下拉显示的容器设置为display:none； 将鼠标悬停在父元素上，设置disply:block；
！ DOCTYPE htmlhtmlheadtitle基本类型下拉菜单的实例/titlemetacharset=' utf-8 ' style * { padding :0 px； 边距：0 px； }ul { list-style-type: none； 边距： 0； padding: 0； overflow :隐藏； background-color: #333； (Lia.dropBTN )显示： inline-block； color:白色； 文本照明3360中心； padding: 14px 16px； 文本解码： none； width:120px； }li a:hover， drop down : hover.drop BTN { background-color : # 111； } ul Li { display :联机块； }.drop down-content { display : none； 定位：助手； background-color: #f9f9f9； box-shadow 33600 px8px 16px 0px rgba (0，0，0，0.2 )； }.drop down-contenta { color : black； padding: 12px 16px； 文本解码： none； 显示：块； width:120px； }.drop down-contenta : hover { background-color : # f1 f1； }.drop down : hover.drop down-content { display : block； }/style/headbodyulliclass=' drop down ' a href=' # ' class=' drop BTN '网站首页/a/Lili class=' drop down ' a href aa href='# '链接2/aa href='# '链接3/a/div/Lili class=' drop down ADI vclass=' drop down-content ' a href=' # '链接Lili class=' drop down ADI vclass=' drop down-content ' a href=' # '链路1/a a href='# '链路2/a a href='# '链路3/a #链路3