JSFiddle - React, Tailwind, and code Playground

by MichelleGlauser

HTML

<div id="nav">
         <ul id="navbar">
         	<li><a 
         	href="http://operationrevive.org">Home</a>
            <li><a>About us</a>
               <ul>
                  <li><a href="{{ site.baseurl }}about-us/who-we-are">Who we are</a></li>
                  <li><a href="{{ site.baseurl }}about-us/mission">Mission</a></li>
                  <li><a href="{{ site.baseurl }}about-us/process">Process</a></li>
                  <li><a href="{{ site.baseurl }}about-us/why-revive-is-different">Why Revive is different</a></li>
                  <li><a href="{{ site.baseurl }}about-us/partners">Partners</a></li>
               </ul>
            </li>
            <li class="active"><a href="{{ site.baseurl }}impact" class="active">Impact</a>
               <ul>
                  <li><a href="{{ site.baseurl }}impact/statistics">Statistics</a></li>
                  <li><a href="{{ site.baseurl }}impact/healthcare-in-the-slums">Healthcare in the slums</a></li>
               </ul>
            </li>
            <li><a href="{{ site.baseurl }}contact-us">Contact us</a>
               <ul>
                  <li><a href="{{ site.baseurl }}contact-us/social-media">Social media</a></li>
                  <li><a href="{{ site.baseurl }}contact-us/locations">Locations</a></li>
               </ul>
            </li>
            <li><a>Contribute</a>
               <ul>
                  <li><a href="{{ site.baseurl }}contribute/cooperate-with-us">Cooperate with us</a></li>
                  <li><a href="{{ site.baseurl }}contribute/donate">Donate</a></li>
               </ul>
            </li>
            <li id="donatebtn"><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=U6TAHXM96AU5G" target="_blank">Donate</a>
               <ul class="last">
               </ul>
            </li>
         </ul>
        </div>

CSS

/* MENU */

#nav {
  clear:both;
  width:100%;
  position:relative;
  z-index:10;
    min-width: 930px;
}

#navbar {
  display:table;
  clear:both;
  margin: 0 auto;
  padding: 0;
  height: 1em; 
  width:100%;
    
}

#navbar ul {

}

#navbar ul li:hover > ul {
  width:100%;
  overflow:hidden;
}

#navbar li {
  list-style: none;
  float: left; 
  border-right:1px white solid;
    position: relative;
}

#navbar li a {
  display: block;
  /*font-weight: bold; pushes donate button down?*/
  padding: 10px 49px;
  background-color: #440F7F;
  color: #fff;
  text-decoration: none; 
  z-index: 9999;
}

#navbar li ul {
  display: none; 
  background-color:  #d3d3d3;
    left: 0;
    right: 0;
}

#navbar li li a {
  padding: 10px 0 10px 20px;
  background-color: #d3d3d3;
  color:#0389d8 !important;
}

#navbar li:hover ul {
  display: block;
  position: absolute;
  margin: 0;
  padding: 0; 
}

#navbar li:hover li {
  float: none; 
}

#navbar li:hover li a {
  background-color: #d3d3d3;
  border-right: none;
  border-bottom: 1px solid #fff;
  color: #000; 
}

#navbar li li a:hover {
  background-color: #8db3ff; 
  padding: 10px 0 10px 20px;
}

#donatebtn {
  border-right: none !important;
  float:right !important;
}

#donatebtn a { 
  background-color:#0389d8 !important;  /*How do I accomplish all this without the "!important"?*/
  color:white !important; 
  padding:4px; 
  padding-left:20px; 
  padding-right:20px;
}

#donatebtn:hover a { 
  background-color:#d3d3d3 !important; 
  color:#0389d8 !important; 
}

#donatebtn form {
  display:none;
}