css豎向菜單，帶三角導航

2024-09-05 12:20:42

字體：大中小

來源：轉載

供稿：網友

CSS豎向的菜單，帶三角導航按鈕，很普通的菜單，中規中矩，希望大家喜歡。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>豎向菜單</title><style>#list {margin:auto;	width:281px;	height:auto;	}.static {background-color:#6A91C3;	font: 16px/42px Tahoma, Geneva, sans-serif ;	color:#FFF;	padding-left:31px;	width:248px;	float:left;	height:auto;	background-image:url(/jscss/demoimg/201010/blue1.gif);	background-repeat:no-repeat;}.down {background-repeat:no-repeat;	background-color:#6A91C3;	font: 16px/42px Tahoma, Geneva, sans-serif ;	color:#FFF;	padding-left:31px;	width:248px;	float:left;	height:auto;	background-image:url(/jscss/demoimg/201010/down.gif);}.ul_style{display:none;padding-top:10px;}.ul_style li{float:left;	background:url(/jscss/demoimg/201010/spot.gif) no-repeat 0 0;	height:15px;	font: 14px/15px Tahoma, Geneva, sans-serif ;	width:201px;	padding:0px 0 0 15px;	}</style></head><body><div   class="iwvjtn8m0"   id="wrapper">  <ul id="list">    <li id="iwvjtn8m0"    class="static">分類1 <br />    <ul class="ul_style">      <li>分類1</li>      <li>分類1</li>      <li>分類1</li>    </ul></li>    <li id="iwvjtn8m0"    class="static">分類2 <br />    <ul class="ul_style">      <li>分類2</li>      <li>分類2</li>      <li>分類2</li>    </ul></li>    <li id="iwvjtn8m0"    class="static">分類3 <br />    <ul class="ul_style">      <li>分類3</li>      <li>分類3</li>      <li>分類3</li>    </ul></li>    <li id="iwvjtn8m0"    class="static">分類4 <br />    <ul class="ul_style">      <li>分類4</li>      <li>分類4</li>      <li>分類4</li>    </ul>    </li>  </ul></div></body></html>

上一篇：滑動菜單，滑動門，CSS代碼

下一篇：仿雅虎首頁快捷登錄入口及導航模塊的代碼