JSFiddle - React, Tailwind, and code Playground
by charliejsford
HTML
<div id="main-nav"><ul id="trans-nav">
<li <?php if ($page == 'About') { echo 'class="current"'; }?>>
<a href="#">About Us</a>
<ul>
<li><a href="/contact">Contact Us</a></li>
<li><a href="/login">Login</a></li>
<?php
$sql="SELECT * from websitepages where pagetype = 'About' order by pagedesc ASC ";
$rs=mysql_query($sql,$conn) or die(mysql_error());
while($result=mysql_fetch_array($rs))
{
echo '<li><a href="/index.php?p='.$result["pagename"].'">'.$result["pagedesc"].'</a></li>';
}
?>
</ul>
</li>
<li <?php if ($page == 'Telecoms') { echo 'class="current"'; }?>>
<a href="#">Telecoms</a>
<ul>
<?php
$sql="SELECT * from websitepages where pagetype = 'Telecoms' order by pagedesc ASC ";
$rs=mysql_query($sql,$conn) or die(mysql_error());
while($result=mysql_fetch_array($rs))
{
echo '<li><a href="/index.php?p='.$result["pagename"].'">'.$result["pagedesc"].'</a></li>';
}
?>
</ul>
</li>
<li <?php if ($page == 'I.T. support') { echo 'class="current"'; }?>>
<a href="#">Telecoms</a>
<ul>
<?php
$sql="SELECT * from websitepages where pagetype = 'I.T. Support' order by pagedesc ASC ";
$rs=mysql_query($sql,$conn) or die(mysql_error());
while($result=mysql_fetch_array($rs))
{
echo '<li><a href="/index.php?p='.$result["pagename"].'">'.$result["pagedesc"].'</a></li>';
}
?>
</ul>
</li>
<li <?php if ($page == 'Security') { echo 'class="current"'; }?>>
<a href="#">Telecoms</a>
<ul>
<?php
$sql="SELECT * from websitepages where pagetype = 'Security' order by pagedesc ASC ";
$rs=mysql_query($sql,$conn) or die(mysql_error());
while($result=mysql_fetch_array($rs))
{
echo '<li><a...
CSS
#main-nav {
width:100%;
}
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
position:relative;
z-index:999;
}
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
}
#trans-nav li {
float: left;
position: relative;
padding: 0;
line-height: 40px;
}
#trans-nav li:hover {
background-position: 0 -40px;
}
#trans-nav li a {
display: block;
padding: 0 15px;
color: #666666;
text-decoration: none;
}
#trans-nav li a:hover {
background-color:#F36F25;
color: #eeeeee;
}
#trans-nav li ul {
opacity: 0;
position: absolute;
left: 0;
width: 220px;
background: #EEEEEE;
list-style-type: none;
padding: 0;
margin: 0;
}
#trans-nav li:hover ul {
opacity: 1;
}
#trans-nav li ul li {
float: none;
position: static;
height: 0;
line-height: 0;
background: none;
}
#trans-nav li:hover ul li {
height: 30px;
line-height: 30px;
}
#trans-nav li ul li a {
background: #EEEEEE;
}
#trans-nav li ul li a:hover {
background: #666666;
color:#EEEEEE;
}