各位大大好
小弟目前製作網頁遇到棘手問題
有爬其他網站但是都找不到相關類似答案
就是
小弟製作下拉式選單
製作大致要像這樣
但
在html中語法
由於html已經是固定形式
沒辦法改變
想要藉由css去改
該如何用css寫出上面想要的形式呢
個人積分：2分
文章編號：52803282
網路上一堆範例
CSS裏面能夠做變化的就是hover而已 要不就是onClick時要去做改變
li裏面的display 做none與block的變換就可以
另外為了一些相容性問題 你還必須寫javascript.
/* each menu item */
ul.menu li {
/* float: left; /* make all block horonzontal */
position: relative; /* all li children relative to parent ul */
list-style-type: none;
width: 130px; /* absolute length unit */
border:1px solid #fff;
padding: 3px 0px 3px 0px;
}
/* each anchor, the text inside the anchor*/
ul.menu li a {
color: #669966; /* keep the same color after visit */
white-space:nowrap;
text-decoration: none;
display: block; /* for anchor hover in li */
width: 100%;
}
/* lower level ul, dorp down menu, should be beside the 1st level ul */
/* no display initially but hover will diplay block */
ul.menu li ul {
display: none;
top: 0px; /* em is the size of current font */
left: 130px; /* should be beside the 1st level */
text-align: left;
}
/* mouse over, change whole li */
ul.menu li:hover { background-color: #3366FF; }
ul.menu li:hover > a { color: yellow; }
ul.menu li:hover > ul {
display: block;
position: absolute; /* relative can do the outlook effect */
}
/* IE6 doesn't support hover well, only support anchor and no child selector*/
/* need javascript, see menu_ie6.js */
ul.menu li a:hover {
background-color: #3366FF;
color: yellow;
}
