JSFiddle - React, Tailwind, and code Playground

by Dave Mednick

HTML

<section class="menu">
        <ul>
            <li><a class="active" href="home.html"> HOME </a></li>
            <li><a href="#"> PORTFOLIO </a>
                <ul>
                    <li><a href="#"> illustrations </a></li>
                    <li><a href="#"> portraits </a></li>
                    <li><a href="#"> environments </a></li>
                    <li><a href="#"> sketches </a></li>
                </ul>
            </li>

            <li><a href="#"> STORE </a>
              <ul>
                    <li><a href="http://society6.com/ChristiLu" target="_blank"> society6 </a></li>
                    <li><a href="http://www.redbubble.com/people/christisocool/shop" target="_blank"> redbubble </a></li>
                </ul>
            </li>
            <li><a href="#"> CONTACT </a></li>
    <li><a href="about.html"> ABOUT </a></li>
        </ul>

    </section>

CSS

.menu{
height:29px;
width:100%;
/*background:orange;*/
}

.menu ul{
width:auto;
list-style-type:none;
font-family:"calibri", "arial";
}

.menu ul li{
position:relative;
display:inline;
float:left;
width:auto;
border-right: 2px solid purple;
margin-left:10px;
line-height:12px;
}

.menu ul li:last-child { border:none; } /*removes border after 'about'*/



.menu ul li a{
display:block;
padding:3px;
color:#854288;
text-decoration:none; 
font-size:20px;
font-weight:strong;
padding-right:25px;

}

.menu ul li a:hover, .active {
color: #788d35                  /* <-- if I put "background-color" instead of "color"    it will work. How do I highlight just the text if current page is active? */
}

.menu ul li ul{
display:none;
}

.menu ul li:hover > ul{
display:block;
position:absolute;
top:22px;
float:left;
text-align:left;
z-index: 1000;
background-color: white;    
}

.menu ul li ul li{
position:relative;
max-width:140px;
min-width:140px;
width:100%;
border:none;
margin-left: -40px;
}

.menu ul li ul li a{
padding: 4px;
margin-left: 1px;
}