JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="megamenuShops">
							<li><a href="#">Home</a><div class="dropdown_1column_shop" align="center"><table align="center" border="0" cellpadding="10" cellspacing="0"><tr valign="top">
                                <td style="border-left:0px solid #FF0000"><a href="index.php?menu='.$row[no].'&shopid=1000"><h3>TEST</h3></a></td></tr></table>
							</li>
							</ul>
<br>
    <br>
        <br>
            <br>
    <br>
        <br>
            <br>
    <br>
        <br>
            <br>
    <br>
        <br>
            <br>
    <br>
        <br>
            <br>
    <br>
        <br>
            <br>
    <br>
        <br>
            <br>
    <br>
        <br>
            <br>
    <br>
        <br>
            <br>
    <br>
        <br>
            <br>
    <br>
        <br>
            <br>
    <br>
        <br>
            <br>
    <br>
        <br>
            <br>
    <br>
        <br>
            <br>
    <br>
        <br>
            <div>abc</div>

CSS

#megamenuShops {
	list-style:none;
	list-style-type: none;
	width:100%;
	text-align:center;
	margin:auto;
	height:43px;
	padding:0px 10px 0px 10px;
	z-index: 100;

	/* Rounded Corners */
	
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;

	/* Background color and gradients */
	

	
	/* Borders */
	
	border: 1px solid #BBBBBB;
	border-left:none;
	border-right:none;
	/*box-shadow: 1px 1px 3px 3px rgba(180,180,180,1);
	-webkit-box-shadow: 1px 1px 3px 3px rgba(180,180,180,1);
	-moz-box-shadow: 1px 1px 3px 3px rgba(180,180,180,1);*/
}

#megamenuShops li {
    display:inline;
    text-align:center;
    float:left;
    position:relative;
    padding: 12px 10px 4px 10px;
    margin-right:10px;
    height:28px;
    border:none;

    }

#megamenuShops li:hover {
	border:1px solid #BBBBBB;
	border-top:none;
	border-bottom:none;
	padding: 12px 9px 4px 9px;
	
}

#megamenuShops li a {
	font-family:'Verdana', Sans-Serif;
	font-size:13px; 
	display:block;
	outline:0;
	text-decoration:none;
}
.dropdown_1column_shop {
	margin:16px 0px 0px 0px;
	float:left;
	/*z-index: -1;*/
	z-index: 100;
	/*position:fixed; hvis fixed bruges flytter menuen sig ikke ved scroll!*/
	position:absolute;
	left:-999em; /* Hides the drop down */
	text-align:left;
	/*padding:12px 5px 10px 5px;*/
	padding:0;
	border:1px solid #BBBBBB;
	border-top:none;
	line-height:14px;

}


.dropdown_1column_shop {
	display:block;
	width: 788px;
	margin-left:auto;
	margin-right:auto;
}


#megamenuShops li:hover .dropdown_1column_shop, 
#megamenuShops li:hover .dropdown_input_shop {

    left: calc(50% - 400px);
	left: -moz-calc(50% - 400px);
  left: -webkit-calc(50% - 400px);
	position:fixed;

  top:inherit;
}