私はこのドロップダウンメニューを使用しています:
HTML:
<ul id="dropdown">
<li> Choose theme
<ul>
<li id="stylesheet1" > <a href="#"> Default </a></li>
<li id="stylesheet2" > <a href="#"> Theme 1 </a></li>
<li id="stylesheet3" > <a href="#"> Theme 2 </a></li>
<li id="stylesheet4" > <a href="#"> Theme 3 </a></li>
</ul>
</li>
</ul>
そして、これはCSSです:
#dropdown {
float: left;
margin: 0;
padding: 0;
}
#dropdown li {
background: #F7F0E0;
border:1px solid #666;
float: left;
list-style: none;
margin: 0;
padding:0 0 0 10px;
position: relative;
height:20px;
width:100px;
}
#dropdown li:hover {
background: #FF2828;
}
#dropdown li a {
text-decoration:none;
}
#dropdown ul {
background: #F7F0E0;
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 20px;
left: -1px;
z-index: 500;
}
#dropdown ul {
position: absolute;
}
#dropdown li:hover ul {
display: block;
}
選択したオプションは、次回のページのリロードまで保持される可能性はありますか? または、別のドロップダウンを作成する必要があります。たとえば、次のようになります。
<form>
<select id="myList" >
<option id="stylesheet1">Default</option>
<option id="stylesheet2">Theme 1</option>
<option id="stylesheet3">Theme 2</option>
<option>Theme 3</option>
</select>
<form>
ページで JavaScript と Cookie を使用しています。