JSFiddle - React, Tailwind, and code Playground

by KURO KUMO

HTML

<link rel="stylesheet" href="http://demo.ebattle.jp//gekihaoh2/css/style-reset.css">
<section class="notice">
    <section class="container">
    <ul id="menu">
        <li>
            <a href="#">
                <span class="mark"><img src="/gekihaoh2/img/txt_notice.png" alt="Notice!" class="fl" /></span>
                <time>2014.12.09</time>
                <span class="hoverbutton info">「WoT撃破王戦 ナニワ機甲戦」報告書公開！</span>
            </a>

            <ul class="sub-menu">
                <li> <a href="#"><time>2014.12.09</time><span class="info">「WoT撃破王戦 ナニワ機甲戦」報告書公開！</span></a>

                </li>
                <li> <a href="#"><time>2014.12.09</time><span class="info">「WoT撃破王戦 ナニワ機甲戦」報告書公開！</span></a>

                </li>
                <li> <a href="#"><time>2014.12.09</time><span class="info">「WoT撃破王戦 ナニワ機甲戦」報告書公開！</span></a>

                </li>
                <li> <a href="#"><time>2014.12.09</time><span class="info">「WoT撃破王戦 ナニワ機甲戦」報告書公開！</span></a>
                </li>
            </ul>
        </li>
    </ul>
    </section>
</section>

CSS

/*Initialize*/
 ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul#menu li a {
    text-decoration: none;
    color: #fff;
    padding:10px;
    background: #666;
    display:inline-block;
    width:740px;
}
ul#menu li a:hover {
    text-decoration: none;
    color: #fff;
    padding:10px;
    background: #000;
    display:inline-block;
    width:740px;
}
ul#menu li ul.sub-menu li a{ border-top:1px solid #000;}

/*Make the parent of sub-menu relative*/
 ul#menu li {
    position: relative;
}
/*sub menu*/
 ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 36px;
    left: 0;
    width: 740px;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}