JSFiddle - React, Tailwind, and code Playground

HTML

<div id="globalmainmenu">
    <div id="conteneur">

		<div id="mainmenu">
<ul>

<li class="menu">
    <a title="menu" href="#">Accueil</a></li>

<li class="menu1_com">
<a title="menu1" href="menu1.php">menu1</a></li>

<li class="menu2_com">
<a title="menu2" href="menu.php">menu</a></li>

<li class="menu3_com">
<a title="menu3" href="menu3php">menu3</a></li>
            </ul>
    </div>
    </div>
            </div>

CSS

body{
	background-image: url(http://lorempixel.com/800/850); 
	background-repeat: no-repeat; 
	background-attachment: fixed; 
	background-size: cover; 
	
}

#globalmainmenu {
    background-color:f3e1cb;
    height: 45px;
    margin: 10px;
    min-width: 980px;
    padding: 0;
    position: relative;
    transition: height 0.2s ease 0s;
    width: 98%;
		}
#conteneur{
	
	position:absolute;
	top:10px;
	Right:-25px;
	

	
}
#mainmenu{
	
	height:60px;
	margin:auto;
	padding:0;
	width:980px;
	
}

#mainmenu ul {
    height: 60px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 980px;
}



#mainmenu ul li a {
    color: black;
    cursor: pointer;
    display: 0;
    height: 60px;
    margin: 0;
    padding: 0;
}

a {
    color: #F9F400;
    margin: 0;
    outline: medium none;
    padding: 0;
    text-decoration: none;
}


#mainmenu ul li {
    color: #FFFFFF;
    float: left;
    font-family: creampuff;
    font-size: 110%;
    font-weight: normal;
    height: 60px;
    line-height: 250%;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    text-transform: 0;	
}

#mainmenu ul 
li.menu_com,
#submenu 
ul.menu_com {
    width: 60px;
}

#mainmenu ul 
li.menu1_com,
#submenu 
ul.menu1_com {
    width: 130px;
}

#mainmenu ul 
li.menu2_com,
#submenu 
ul.menu2_com {
    width: 110px;
	
}
#mainmenu ul
li.menu3_com, 
#submenu 
ul.menu3_com {
    width: 160px;
}