PHP & JavaScript Room :: 設置サンプル

• PHP
• JavaScript
• CSS
• MySQL

---

• PHP
• JavaScript
• CSS
• MySQL

<style type="text/css">
    #nav4, #nav4 * {
        font:bold 11px Verdana,sans-serif;
        margin:0; padding:0;
    }
    #nav4 { 
        margin:1em 0;
    }
    #nav4 li {
        display:inline;
    }
    #nav4 a {    /* 通常時 */
        width:10em; padding:5px 20px;
        color:#b5ad7f;
        text-decoration:none;
        background-color:#d8d199;
        border:1px solid #c6be8c;
        font-weight:bold;
    }
    #nav4 a:hover,
    #nav4 a#current {    /* マウスが乗った時,カレント時 */
        color:#e5dda0;
        text-decoration:none;
        background:#c6be8c url(/content/img/css/nav4_on.gif) no-repeat left center;
    }
    #nav4 a.tate,
    #nav4 a.tate:hover,
    #nav4 a.tate#current {    /* 縦型 */
        display:block;
        margin:1px 0;
    }
</style>

<!-- ▼横型メニュー -->
<ul id="nav4">
    <li><a href="#" id="current">PHP</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">MySQL</a></li>
</ul>

<hr />

<!-- ▼縦型メニュー -->
<ul id="nav4">
    <li><a href="#" class="tate">PHP</a></li>
    <li><a href="#" class="tate" id="current">JavaScript</a></li>
    <li><a href="#" class="tate">CSS</a></li>
    <li><a href="#" class="tate">MySQL</a></li>
</ul>