1

i am creating a nested list with "select" "option" and "optgroup"... Here is my code

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>

And the 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;}

Now the problem is that when I hover over the option with id "show-further-option", optgroup is not being displayed no matter what i try... How can i do that?

4

1 回答 1

1

使用“标签”属性显示 optgroup 名称。

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