1

「select」「option」および「optgroup」を使用してネストされたリストを作成しています...これが私のコードです

HTML

<div class="menu-2_small">
        <form name="nav-2">
       <select name="SelectURL" onchange="document.location.href=document.nav-2.SelectURL.options[document.nav-2.SelectURL.selectedIndex].value">
        <option value="#">Inspiration</option>
        <option value="#">Coding</option>
        <option id="show-further-option" value="#">Freebies
            <optgroup id="further-option">
            <option value="#">Textures</option>
            <option value="#">Fonts</option>
            <option value="#">Brushes</option>
            <option value="#">Vectors</option>
            <option value="#">Icons</option>
            </optgroup>
        </option>
        <option value="#">Design</option>
        <option value="#">Tutorials</option>
        <option value="#">Technology</option>
      </select>
    </form>
  </div>

そして、CSS

 .menu-2_small{
display:block;
width:100%;
height:35px;
background-image:url(imgs/link-bg-small.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
 .menu-2_small select{
width:70%;
background-image:url(imgs/link-bg-small.jpg);
color:white;
font-size:0.70em;
margin:6px 0 0 1%;
cursor:pointer;


}

 .menu-2_small select option{background-image:url(imgs/link-bg-small.jpg);background-repeat:no-repeat;}
 .menu-2_small select option:hover{font-weight:bold;}
 optgroup{display:none;}
 option #show-further-option:hover optgroup{display:block;}

ここでの問題は、ID「show-further-option」のオプションにカーソルを合わせると、何を試してもoptgroupが表示されないことです...どうすればよいですか?

4

1 に答える 1

1

optgroup 名を表示するには、「label」属性を使用します。

<option id="show-further-option" value="#">Freebies
   <optgroup id="further-option" label="further-option">
       <option value="#">Textures</option>
       ....
于 2013-06-12T07:09:13.153 に答える