JSFiddle - React, Tailwind, and code Playground

by jitendravyas

HTML

<div id="wrap">
        <ul id="dropline">
            <li><a href="index.html"><b>Home</b></a></li>
            <li><a href="single.html"><b>Catalogue</b></a></li>
            <li><a href="dropdown.html"><b>Automobiles</b></a>
            <div>
                <ul class="w1">
                    <li><a href="#url"><img src="http://lorempixel.com/200/200/fashion/" alt=""></a><p>Car image one</p></li>
                    <li><a href="#url"><img src="http://lorempixel.com/200/200/fashion/" alt=""></a><p>Car description here</p></li>
                    <li><a href="#url"><img src="http://lorempixel.com/200/200/fashion/" alt=""></a><p>Text about this car</p></li>
                    <li><a href="#url"><img src="http://lorempixel.com/200/200/fashion/" alt=""></a><p>Descriptive text</p></li>
                    <li><a href="#url"><img src="http://lorempixel.com/200/200/fashion/" alt=""></a><p>Car image five</p></li>
                    <li><a href="#url"><img src="http://lorempixel.com/200/200/fashion/" alt=""></a><p>Smart one-liner here</p></li>
                    <li><a href="#url"><img src="http://lorempixel.com/200/200/fashion/" alt=""></a><p>The final car image</p></li>
                </ul>
            </div>
           
            </li>
            <li><a href="dropline.html"><b>Motorcycles</b>
            <div>
                <ul class="w2">
                    <li><a href="#url"><img src="http://lorempixel.com/200/200/fashion/" alt=""></a><p>Motorcycle one</p></li>
                    <li><a href="#url"><img src="http://lorempixel.com/200/200/fashion/" alt=""></a><p>Motorcycle two</p></li>
                    <li><a href="#url"><img src="http://lorempixel.com/200/200/fashion/" alt=""></a><p>Motorcycle three</p></li>
                    <li><a href="#url"><img src="http://lorempixel.com/200/200/fashion/" alt=""></a><p>Motorcycle four</p></li>
                    <li><a href="#url"><img src="http://lorempixel.com/200/200/fashion/" alt=""></a><p>Motorcycle...

CSS

#wrap {position:relative;text-align:left}


#dropline {padding:0 0 0 20px; margin:0; list-style:none; height:35px; width:730px; border-bottom:1px solid #eee;}
#dropline div {margin-left:-9999px; width:750px; z-index:10; height:0; top:35px; background:#fff; overflow:hidden;}
#dropline ul {padding:0; margin:0; list-style:none;}
#dropline table {border-collapse:collapse; padding:0; margin:-1px -10px; width:0; height:0;}

#dropline li {float:left;}
#dropline li a {display:block; float:left; height:35px; line-height:30px; text-decoration:none; font-family:"trebuchet MS", sans-serif; font-size:13px; text-decoration:none; color:#000; padding:0 20px 0 0; background:#fff url(tab.gif) right top;}
#dropline li a b {display:block; float:left; height:35px; padding:0 0 0 20px; background:#fff url(tab.gif) left top;}

#dropline div {height:220px; position:absolute; overflow:auto; padding:0; background:#fff; border:20px solid #eee; border-width:20px 0;}
#dropline div ul.w1 {padding:0; margin:0; list-style:none; width:1400px;}
#dropline div ul.w2 {padding:0; margin:0; list-style:none; width:1600px;}

#dropline div ul li {float:left;}
#dropline div ul li p {clear:left; width:200px; text-align:center; color:#444;}
#dropline div ul li a {border:0; background:#fff; padding:0;height:auto;}
#dropline div ul li a img {display:block; border:0; float:left; height:150px;}

#dropline li a:hover {background-color:#eee; color:#c00; border:0;}
#dropline li a:hover b {background-color:#eee; color:#c00; cursor:pointer;}

#dropline li:hover > a {background-color:#eee; color:#c00;}
#dropline li:hover > a b {background-color:#eee; color:#c00;}

#dropline :hover div {margin-left:0; height:220px; position:absolute; left:0; overflow:auto; padding:0; background:#fff; border:20px solid #eee; border-width:20px 0;}