JSFiddle - React, Tailwind, and code Playground

by hozey

HTML

<div class="menu">
<ul>
<!--begin to insert contents-->
<li class="item-first"><a href="http://www.lawsart.com" target="_top">Home</a></li>
<li><a class="current">Portfolio &#9660;</a>
<ul>
<li><a href="http://www.lawsart.com/Horses1.html" target="_top">Horses 1</a></li>
<li><a href="http://www.lawsart.com/Horses2.html" target="_top">Horses 2</a></li>
<li><a href="http://www.lawsart.com/Horses3.html" target="_top">Horses 3</a></li>
<li><a href="http://www.lawsart.com/Dogs.html" target="_top">Dogs</a></li>
<li><a href="http://www.lawsart.com/People.html" target="_top">People</a></li>
<li><a href="http://www.lawsart.com/Stills.html" target="_top">Stills</a></li>
</ul>
</li>
<li><a href="http://www.lawsart.com/Order.html" target="_top">Order</a></li>
<li><a href="http://www.lawsart.com/Contact.html" target="_top">Contact Me</a></li>
</ul>
</div> <!-- end menu -->

</div>

CSS

body {
  margin: 0px;
}
#wrapper {
  border: px solid black;
  margin: 1em auto;
  font-family: Arial,Helvetica,sans-serif;
  width: 760px;
  text-align: left;
  background-color: #cccccc;
  overflow:hidden;
  height:150px;
}

.menu {font-family: arial, sans-serif;width:760px;position:relative;font-size:0.7em; margin:0px auto;}

.menu ul li a {display:block; 
               text-decoration:none; 
               width:97px; 
               height:25px; 
               text-align:center; 
               color:white; 
               padding-left:1x; 
               border:px solid; 
               border-width:0 0px 0px 0; 
               background:; 
               line-height:25px; 
               font-size:1.0em;}

.menu ul {padding:0;margin:0;list-style-type: none; }

.menu ul li {float:left;position:relative;}

.menu ul li ul {visibility:hidden;position:absolute;}

.menu ul li:hover a, .menu ul li a:hover {color:white;background:#3BA110;}

.menu ul li:hover ul, .menu ul li a:hover ul {visibility:visible;left:0;}

.menu ul li:hover ul li a, .menu ul li a:hover ul li a {display:block; 
                                                        background:#444444; 
                                                        color:white; 
                                                        width:97px; 
                                                        padding-left:1px;
                                                        border-right:none;}

.menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {background:#3BA110;color:white;}