JSFiddle - React, Tailwind, and code Playground

by David_Knowles

HTML

<ul class="menu">
    <li><a href="#">Sarch</a>
        <ul>
            <li>
                <a href="#">People</a>
            </li>
            <li>
                <a href="#">Cars</a>
            </li>
            <li>
                <a href="#">Places to go</a>
            </li>
            <li>
                <a href="#">Point place on the map</a>
            </li>
        </ul>
    </li>
    <li><a href="#">System</a>
        <ul>
            <li>
                <a href="#">Users</a>
            </li>
            <li>
                <a href="#">Tools</a>
            </li>
            <li>
                <a href="#">Logoff</a>
            </li>
        </ul>
    </li>
</ul>

CSS

a {text-decoration:none; font-family: verdana; font-size: 12px}

ul {list-style:none}

.menu {
    margin:0; padding:0;
    width: 100%; height: auto; 
    background: #ccc;    
    position: absolute;
    top:0; left:0;
}

.menu li {
    float:left;
    display:block
}

.menu li li {
    float:none;
}

.menu li a {
   padding: 0 5px;   
}

.menu li a:hover {
   background: #bbb
}

.menu li ul {
    padding:0; margin:0;
    background: #ddd;
    width: auto;
    position: absolute;    
    visibility: hidden;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    opacity: 0;
    margin: 20px 0 0 0;    
}

.menu li:hover ul {
    margin:0;
    opacity: 1;
    visibility: visible;
    display:block
}

.menu li ul li {
    clear:both   
}


.menu li ul li a {   
    width: auto;
    display:block;
}

JavaScript

/* CSS3 flyout menu \\\\\\\  */