JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="menu" class="menu">



<nav role="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#" aria-haspopup="true">Services</a>
      <ul class="dropdown" aria-label="submenu">
        <li><a href="#">Bridging Loans</a></li>
        <li><a href="#">Secured Loans</a></li>
        <li><a href="#">Lifetime Mortgages</a></li>
      </ul>
    </li>
    <li><a href="#" aria-haspopup="true">Tools</a>
      <ul class="dropdown" aria-label="submenu">
        <li><a href="#">Bridging Loan Calculator</a></li>
        <li><a href="#">Secured Loan Calculator</a></li>
        <li><a href="#">Lifetime Mortgage Calculator</a></li>
      </ul>
    </li>
    <li><a href="#">Brokers</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Login</a></li>
  </ul>
</nav>


</div>

CSS

.menu {position:fixed;top:0;right:0;}

nav a {
  text-decoration: none;
}

nav {
  font-family: arial;
}

nav ul {
  background: darkorange;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

nav li {
  color: #fff;
  background: darkorange;
  display: block;
  float: left;
  padding: 0 1rem;
  line-height: 80px;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
}
  
nav li a {
  color: #fff;
}

nav li:hover,
nav li:focus-within {
  background: #e77b00;
  cursor: pointer;
}

nav li:focus-within a {
  outline: none;
}

nav ul li ul {
  background: orange;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 0px;
  left: 0;
  display: none;
  white-space: nowrap;
}

nav ul li:hover > ul,
nav ul li:focus-within > ul,
nav ul li ul:hover,
nav ul li ul:focus {
   visibility: visible;
   opacity: 1;
   display: block;
}

nav ul li ul li {
  clear: both;
  width: 100%;
  line-height: 2.6em;
}

@media screen and (max-width: 600px) {  
.menu {position:relative;top:auto;right:auto;}
nav li {
  color: #fff;
  background: darkorange;
  display: block;
  float: none;
  padding: 0 1rem;
  line-height: 40px;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
}
nav ul li ul {
  background: darkorange;
  visibility: visible;
  opacity: 1;
  position: relative;
  transition: all 0.5s ease;
  margin-top: 0px;
  left: 0;
  display: block;
  white-space: nowrap;
}
nav ul li ul li {
  clear: both;
  width: auto;
  line-height: 2.6em;
}
nav li a {padding-bottom:3px;
  border: dashed #ffffff;
  border-width: 0 0 1px 0;
  }
nav li:hover,
nav li:focus-within {
  background: none;
  cursor: pointer;
}
}