Want the code?
Here it is, help yourself! Just copy this and paste this into an HTML widget on your Yola website:
<link href="http://tester3.yolasite.com/resources/css/dropdown.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(200);
},
function () {
//hide its submenu
$('ul', this).slideUp(200);
});
});
</script>
<div id="navcontainer">
<ul id="nav" style="">
<li><a href="./" class="nav-link" id="tab-1">Home</a></li>
<li><a href="./features/" class="nav-link">About us</a>
<ul>
<li><a href="./codes.php">About Company</a></li>
<li><a href="./tutorials.php">About Owner</a></li>
<li class="last-tab"><a class="last-tab" href="./directions.php">Directions</a></li>
</ul>
<div class="clear"></div>
</li>
<li><a href="#" class="nav-link" onclick="return false">Pricing</a>
</li>
<li><a href="#" onclick="return false" class="nav-link" >Help & Support</a>
<ul>
<li><a href="./faq.php">FAQ</a></li>
<li><a href="./report.php">Report a Problem</a></li>
<li class="last-tab"><a class="last-tab" href="./tech-support.php">Tech Support</a></li>
</ul>
</li>
<li><a href="#" class="nav-link" onclick="return false" id="tab-5">Contact us</a>
<ul>
<li><a href="./contact-owner.php">Contact Owner</a></li>
<li class="last-tab"><a class="last-tab"href="./contact.php">Contact Support</a></li>
</ul>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="clear"></div>