html - 带选择选项的多级导航列表

Question

我正在创建一个带有“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 都不会显示... 我该怎么做？

Answer 1

使用 'label' 属性显示 optgroup 名称。

<option id="show-further-option" value="#">Freebies
   <optgroup id="further-option" label="further-option">
       <option value="#">Textures</option>
       ....