JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<ul id="list">
    <li> <a href="#">メインメニュー1</a>

        <ul class="child">
            <li><a href="#">メニュー1</a>

            </li>
            <li><a href="#">メニュー2</a>

            </li>
            <li><a href="#">メニュー3</a>

            </li>
        </ul>
    <li> <a href="#">メインメニュー2</a>

            <ul class="child">
                <li><a href="#">メニュー1</a>

                </li>
                <li><a href="#">メニュー2</a>

                </li>
                <li><a href="#">メニュー3</a>

                </li>
            </ul>
        </li>
    <li> <a href="#">メインメニュー3</a>

            <ul class="child">
                <li><a href="#">メニュー1</a>

                </li>
                <li><a href="#">メニュー2</a>

                </li>
                <li><a href="#">メニュー3</a>

                </li>
            </ul>
        </li>
</ul>

CSS

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}
li a {
    display: block;
    padding: 0.35em;
    text-decoration: none;
}
#list {
    width: 200px;
}
#list > li > a {
    background: #555;
    font-weight: bold;
    color: #fff;
}
#list > li > a:hover {
    background-color: #900;
}
#list li ul {
    background: #f9f9f9;
}
#list li li {
    border-bottom: 1px solid #ccc;
}
#list li li:last-child {
    border-bottom: none;
}
#list li li a:hover {
    background-color: orange;
    color: #fff;
}

JavaScript

$(function () {
    //ここに記述してください
});