JSFiddle - React, Tailwind, and code Playground

by jim ulle

HTML

<div id="mainWrapMenu">
<!-- MenuBar -->
<div id="menuBarWrap">
	<div id="menuBar">
    	<ul class="mainNav">
        	<li><a href="index.html">Prima Pagina</a>
            	<ul class="subNav">
                	<li class="subNavStyle">Click pentru a ajunge pe pagina principala in pozitia initiala.</li>
                </ul>
            </li>
            <li><a href="servicii.html">Servicii</a>
            	<ul class="subNav">
                	<li class="subNavStyle">Click pentru a va familiariza cu serviciile pe care salonul nostru vi le pune la dispozitie.</li>
                </ul>
            </li>
            <li><a href="cursuri.html">Cursuri</a>
            	<ul class="subNav">
                	<li class="subNavStyle">Scoala de formare.</li>
                </ul>
            </li>
            <li><a href="promotii.html">Promotii</a>
            	<ul class="subNav">
                	<li class="subNavStyle">Aici poti afla promotiile si ofertele pe care ti le punem la dispozitie. Oricine poate beneficia de acestea.</li>
                </ul>
            </li>
            <li><a href="galeriefoto.html">Galerie Foto</a>
            	<ul class="subNav">
                	<li class="subNavStyle">Portofoliul Salonului Estetique Studio.</li>
                </ul>
            </li>
            <li><a href="contact.html">Contact</a>
            	<ul class="subNav">
                	<li class="subNavStyle">Unde ne puteti gasi si cum ne puteti contacta.</li>
                </ul>
            </li>
            <li><a href="facebook.html">Facebook</a>
            	<ul class="subNav">
                	<li class="subNavStyle">Pentru actualizari in timp real, ne puteti urmari progresul pe Facebook.</li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div id="clear"></div>
<!-- END MenuBar -->
</div>

CSS

#mainWrapMenu { width:1000px; height:auto; margin-left:auto; margin-right:auto; background:#FFF;}


#menuBarWrap { width:auto; height:52px; }

#menuBar { width:auto; position:fixed; }

.mainNav { list-style-type:none; padding:0; margin:0; text-align:center; position: relative; }
.mainNav ul { padding:0; margin:0; position: absolute; left: 0; }
.mainNav li { float:left; width:142px; /*position:relative;*/ }
.mainNav a { text-decoration:none; color:#666; font-size:20px; display:block; line-height:52px; background:url(images/buttonBgrd.jpg); }
.mainNav a:hover { background:url(images/buttonBgrdHover.png); color:#fc951e; }

.subNav { display:none; text-align:center; }
.subNav li  { width:1000px; background:#fc951e; }
li:hover .subNav { display:block; }
.subNavStyle { list-style-type:none; text-align:center; }