Popular posts

Ok, clear headed and re-reading the post I think I misunderstood -- AND you're overthinking this. When you say "redirecting link to the sub-options" are you basically saying you want those OPTION tags to behave like anchors? If so, why are you using a SELECT instead of making a normal HTML/CSS drop-down menu of ... well... anchors?

Something like:

<div id="language" class="fauxSelect">
    <a href="#language">Select Language</a>
    <ul>
        <li><a href="#framework_php">PHP</a></li>
        <li><a href="#framework_js">JavaScript</a></li>
    </ul>
</div>

<div id="framework_php" class="fauxSelect targetable">
    <a href="#framework_php">Select PHP Framework</a>
    <ul>
        <li><a href="#">CakePHP</a></li>
        <li><a href="#">Turdpress</a></li>
        <li><a href="#">Codeigniter</a></li>
        <li><a href="#">Joomla</a></li>
        <li><a href="#">Magento</a></li>
    </ul>
</div>

<div id="framework_js" class="fauxSelect targetable">
    <a href="#framework_js">Select JavaScript Framework</a>
    <ul>
        <li><a href="#">Django</a></li>
        <li><a href="#">Angular</a></li>
        <li><a href="#">Prototype</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">Backbone</a></li>
    </ul>
</div>

The CSS for that could then use the :target attribute to open them. This would have the advantage of opening the new sub-menu automatically instead of waiting for hover.

.fauxSelect {
    display:inline-block;
    vertical-align:bottom;
    position:relative;
    overflow:hidden;
    line-height:1.5em;
    margin:1em 1em 1em 0;
    width:16em;
    border:1px solid #000;
}

.fauxSelect:before {
    content:"\25BC";
    float:right;
    width:1.5em;
    text-align:center;
    background:#CCC;
    border-left:1px solid #000;
}

.fauxSelect:hover,
.fauxSelect:target {
    overflow:visible;
    z-index:999;
}

.fauxSelect ul {
    list-style:none;
    position:absolute;
    top:1.5em;
    left:-1px;
    width:100%;
    background:#FFF;
    border:1px solid #000;
}

.fauxSelect li {
    display:inline; /* fix oddball cross browser oddities */
}

.fauxSelect a {
    display:block;
    padding:0 0.25em;
    text-decoration:none;
    color:#000;
}

.fauxSelect a:active,
.fauxSelect a:focus,
.fauxSelect a:hover {
    background:#DEF;
}

.targetable {
    display:none;
}

.targetable:target {
    display:inline-block;
}

Live demo here:

cutcodedown.com/for_others/saif/template.html

This is VERY rough around the edges, and assumes you want the sub-menu to behave as anchors so you can link elsewhere... but should be enough to give you an idea of what's involved. A little polish and tweaking are all it really needs... .and look, no JavaScript. Let HTML and CSS do your heavy lifting.

Also given it's all built with HTML and CSS with normal tags, you now have a complete control over the appearance that a SELECT would never give you. Likewise the hash links can also let you link to the page with options already open!

Oh, and if you're wondering about the anchors for the 'select' text, that's so that it also works with touch -- since touch has no hover.