開発メモ

開発用のメモです。

グローバルメニュー(2段階)

<style type="text/css">
.globalmenu {
    background: rgb(128,128,128);
    overflow:hidden;
    margin:  5px;
    padding: 5px;
    width:calc(100% - 10);
    height:35px;
    text-align:rightdisplay:table-cell;
    vertical-align:middle;
}

.globalmenu > ul {
    text-align:right;
    margin:5px;
    padding:0;
}
.globalmenu > ul > li {
    list-style-type: none;
    display: inline-block;
    text-align:left;
    margin:0;
    padding:5px;
    background: rgb(0,0,0);
    color:#fff; rgb(255,255,255);
}

.globalmenu > ul > li > ul {
    display : none;
    position : absolute;
    padding : 0;
    margin:0;
    margin-top: 5px;
    background: rgb(192,192,192);
}

.globalmenu > ul > li > ul > li {
    list-style-type: none;
    background: rgb(64,64,64);
    color: rgb(255,255,255);
    padding : 5;
    margin:5;
}

.globalmenu > ul > li:hover > ul {
    display : block;
}

</style>

<div class="globalmenu">
    <ul>
        <li>HOME</li>
        <li>SHOWROOM</li>
        <li>NEWLY</li>
        <li>REFORM</li>
        <li>ATTENSION</li>
        <li>ABOUT</li>
        <li>CONTACT US
            <ul>
                <li>CONTACT US 1</li>
                <li>CONTACT US 2</li>
                <li>CONTACT US 3</li>
                <li>CONTACT US 4</li>
            </ul>
        </li>
    </ul>
</div>
Twitter: @asahina_alice