JSFiddle - React, Tailwind, and code Playground

by Barbara Laird

HTML

<head>
  
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.css" />
  <link rel="stylesheet" type="text/css" href="css/global.css">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.js"></script>
  
</head>

<body>
    
      <div id="nav_items"> 
        <div class="ui top center pointing dropdown">
          <div class="title">Dropdown 1</div>
          <ul class="menu">
            <li>Item One</li>
            <li>Item Two</li>
            <li>Item Three</li>
          </ul>
        </div>
        <div class="ui top center pointing dropdown">
          <div class="title">Dropdown 2</div>
          <ul class="menu">
            <li>Item One 2</li>
            <li>Item Two 2</li>
            <li>Item Three 2</li>
            <li>Item Four 2</li>
          </ul>
        </div>
        <div class="ui top center pointing dropdown">
          <div class="title">Dropdown 3</div>
          <ul class="menu">
            <li>Item One 3</li>
            <li>Item Two 3</li>
          </ul>
        </div>
      </div>
    
</body>

CSS

body {
  background: #f6f5f4; 
  font-family: 'Open Sans', sans-serif;
  box-sizing: inherit;
}

/*------------ NAV-ITEMS STYLE ------------*/  
#nav_items {
  position: relative;
  width: 100%;
  display: block;
  float: left;
  list-style-type: none;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.1); 
}

#nav_items .ui.dropdown {
  width: 33.33%;
  float: left;
  position: relative;
  text-align: center;
  line-height: 60px;
  height: 60px;
  border-right: 1px solid rgba(0,0,0,0.1);
}

#nav_items .ui.dropdown .title {
  color: #000;
  font-size: 16px;
  background: #fff;
  cursor: pointer;
}


/*------------ NAV-ITEMS MENU STYLE ------------*/
#nav_items .ui.dropdown .menu {
  position: fixed;
  top: 60px;
  left: 0;
  margin: 0;
  padding: 0;
  outline: 0;
  background: #fff;
  border: none;
  border-top: 1px solid rgba(0,0,0,0.04);
  border-radius: 0px;
  min-width: 100% !important;  
}

#nav_items .ui.dropdown .menu li {
   list-style-type: none;
  text-align:left; 
  float: left;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  cursor: pointer;
  min-width: 100% !important; 
  text-indent: 20px;
}

#nav_items .ui.pointing.dropdown .menu:after {
  display: none;
}

JavaScript

$(document).ready(function(){
  
  /*-- Controls Global Nav Menu Dropdowns --*/ 
  $('#nav_items .dropdown')
    .dropdown({
  });
  
}); /*-- End of Global.JS --*/