JSFiddle - React, Tailwind, and code Playground

by fatihhayri

HTML

<div id="menuKapsulu">
    <ul>
        <li>Elma</li>
        <li>Armut</li>
        <li>Malta Eriği</li>
    </ul>
</div>

CSS

body{margin:0; padding:0}


#menuKapsulu{
   float:left;
   width:100%;
   background:#369;
   overflow:hidden;
   position:relative;
}

#menuKapsulu ul{
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
   background-color:#990000        
}

#menuKapsulu ul li{
   display:block;
   float:left;
   list-style:none;
   margin:0 10px 0 0;
   padding:10px 0;
   position:relative;
   right:50%;
   color:#fff;
}