JSFiddle - React, Tailwind, and code Playground
by urahara
HTML
<div id="horizontalmenu">
<ul>
<li><a href="AboutUs.html">about us</a>
<ul>
<li><a href="CEO_Message.html">Welcome Message</a>
</li>
<li><a href="VisionMission.html">Our Vision & Mission</a>
</li>
<li><a href="Objectives.html">Our Objectives</a>
</li>
<li><a href="Business_excellence.html">Business Excellence</a>
</li>
<li><a href="OurBoard.html">Our Board</a>
</li>
<li class="Menu_second_level"><a href="Management.html">Musanada's Management</a>
<!--<ul>
<li><a href="#">second level</a></li>
<li><a href="#">second level</a></li>
</ul>
<span class="indicator2"></span>-->
</li>
</ul> <span class="indicator"></span>
</li>
<li><a href="Services.html">services</a>
<ul>
<li><a href="DesignCoordination.html">Design and Coordination</a>
</li>
<li><a href="RoadsInfrastructure.html">Roads and Infrastructure</a>
</li>
<li class="Menu_second_level"><a href="BuildingServices.html">Building Services </a>
<ul>
<li><a href="ProjectManagement.html">Project Management </a>
</li>
<li><a href="FacilitiesManagement.html">Facilities Management</a>
</li>
</ul> <span class="indicator2"></span>
</li>
<li><a href="FacilityManagement.html">Facility Management</a>
</li>
<li class="Menu_second_level"><a href="Overview.html">Procurement</a>
<ul>
<li><a...CSS
body{
background-color:#444;
}
#horizontalmenu {
/*width: 78%;*/
display: block;
float: right;
}
#horizontalmenu ul {
padding: 0;
margin: 0;
list-style: none;
}
#horizontalmenu li a {
font-family:'dinmedium';
font-size: 12.1px;
padding:19px 0px 14px 39px;
color: #fff;
text-decoration: none;
display: block;
text-transform: uppercase;
-webkit-transition: color 0.2s linear, background 0.2s linear;
-moz-transition: color 0.2s linear, background 0.2s linear;
-o-transition: color 0.2s linear, background 0.2s linear;
transition: color 0.2s linear, background 0.2s linear;
}
#horizontalmenu li {
float: left;
position: relative;
padding: 0 0px;
display: block;
}
#horizontalmenu li .indicator {
display: block;
position: absolute;
color: #dedede;
top: 23px;
right: -12px;
font-size: 17px;
background: url('../images/nav_arrow.png') center center no-repeat;
width: 8px;
height: 7px;
}
#horizontalmenu li ul {
display: none;
position: absolute;
}
#horizontalmenu li:hover ul {
display: block;
background:rgb(138, 0, 0);
height: auto;
/*width: 8em;*/
margin:0;
padding:0;
/*left: 10px;*/
box-shadow:0 0 4px #757575;
}
#horizontalmenu li ul li {
clear: both;
border-style: none;
}
#horizontalmenu ul li ul li.Menu_second_level ul {
display:none;
position:absolute;
}
#horizontalmenu ul li ul li .indicator2 {
display: block;
position: absolute;
color: #dedede;
top: 17px;
right: 10px;
font-size: 17px;
background: url('../images/2ndL_m_arrow.png') center center no-repeat;
width: 8px;
height: 7px;
}
#horizontalmenu ul li ul li.Menu_second_level:hover ul {
display:block;
background:rgb(138, 0, 0);
height: auto;
margin:0;
padding:0;
box-shadow:0 0 4px #757575;
right:100%;
...