CSSで横に広がるテキストボックス

JavaScriptは使用せず、CSSとだけで実装できるので軽快でシンプル。レッツFC2ブログさんのところで紹介されていたものをちょっと改造して自分用にメモ。

CSS

ul#openWide a{
    text-decoration: none;
    cursor: pointer;
}

ul#openWide li{
    margin-bottom: 0.6em;
}

ul#openWide a{
    position: relative;
    width: 140px;
    display: block;
    border: 1px solid #333;
    background : #666;
    color: #fff;
    font-weight: bold;
}

ul#openWide a span{
    position : absolute;
    top: -2000px;
    left: -2000px;
    display: block;
    width: 200%;
    background: #eee;
    border: 1px solid #333;
    border-left: none;
    padding-left: 23px;
    text-indent: 16px;
    color: #666;
}

ul#openWide a, ul#openWide a span{
    padding: 5px;
    height: 30px;
}

ul#openWide a:hover{
    background-color: #fff;
    color : #333;
}

ul#openWide a:hover span{
    top : -1px;
    left : 120px;
}

XHTML

<ul id="openWide">
    <li>
        <a href="#">Lef Zeppelin<span>レッド・ツェッペリン</span></a>
    </li>
    <li>
        <a href="#">Jimi Hendrix<span>ジミ・ヘンドリクス</span></a>
    </li>
    <li>
        <a href="#">FUGAZI<span>フガジ</span></a>
    </li>
</ul>

実行サンプル