JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="yatay">
  <li> Madde 1</li>
  <li> Madde 2</li>
  <li> Madde 3 +
    <ul>
      <li>Satır 1</li>
      <li>Satır 2</li>
      <li>Satır 3</li>
      <li>Satır 4</li>      
    </ul>
  </li>
  <li> Madde 4 +
    <ul>
      <li>a 1</li>
      <li>a 2</li>
      <li>a 3</li>
      <li>a 4</li>      
    </ul>
  
  </li>
</ul>

CSS

* {
  font-family:arial;
}
ul{
  padding:0;
}
ul li{
  list-style-type:none;
  padding:0px;
  width:150px;
  height:20px;
}
.yatay li{
  background-color:#ffbbbb;
  float:left;
  text-align:center;
  color:#ffffff;
  position:relative;
  border: 1px solid red;
}
.yatay li ul {
  position:absolute;
  top:100%;
  display:none;
}
.yatay li:hover ul {
  display:block;
}