JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<div id="dl_menu" class="dl_menu_class"><ul id="dl_menu_ul_id" class="dl_menu_ul_class"><li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children menu-item-20"><a href="http://localhost:8888/dentaluna/">Başlangıç</a>
<ul class="sub-menu" style="display: table;">
	<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost:8888/dentaluna/?page_id=2">Örnek sayfa</a></li>
	<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://localhost:8888/dentaluna/?page_id=2">Örnek sayfa</a></li>
	<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://localhost:8888/dentaluna/?page_id=2">Örnek sayfa</a></li>
</ul>
</li>
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://localhost:8888/dentaluna/?page_id=2">Örnek sayfa</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-19"><a href="http://localhost:8888/dentaluna/?page_id=2">Örnek sayfa</a>
<ul class="sub-menu" style="display: none;">
	<li id="menu-item-22" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22"><a href="http://localhost:8888/dentaluna/?cat=1">Genel</a></li>
	<li id="menu-item-23" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-23"><a href="http://localhost:8888/dentaluna/?cat=1">Genel</a></li>
	<li id="menu-item-24" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="http://localhost:8888/dentaluna/?cat=1">Genel</a></li>
</ul>
</li>
</ul></div>

CSS

#dl_menu {
    float: right;
    margin-bottom: 0;
    padding: 0;
    position: relative;
    width: 100%;
}
#dl_menu #dl_menu_ul_id {
    float: right;
    margin: 0;
    padding: 0;
}
#dl_menu li {
    float: left;
    list-style: none outside none;
    position: relative;
}
#dl_menu li a {
    color: #292929;
    float: left;
    padding: 10px;
}
#dl_menu li a :hoer .sub-menu{
	display:block;
}
#dl_menu .sub-menu {
	display:none !important;
}
#dl_menu .sub-menu > li {
    display: inline-block;
    position: relative;
}
#dl_menu .sub-menu li a {
    background: none repeat scroll 0 0 #800080;
    color: #FFFFFF;
    float: left;
    padding: 15px 10px;
    width: 100%;
}
#dl_menu li a:hover ~ .sub-menu{
	color: #36BCD3;
	display:block !important;
	width: 330px;
	padding: 0;
	position: absolute;
	top: 40px;
	left:0;
}
#dl_menu li a:hover ~ .sub-menu:last-child{
	margin-left:-110px !important;
}