D Ness Car Key

Including Jquery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Structure

<ul id="menu-main-menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Services</a>
   <!-- SUBMENU -->
    <ul style="display: none;">
      <li><a href="#">Live IT Support</a></li>
      <li><a href="#">On Site Support</a></li>
      <li><a href="#">Managed Email</a></li>
      <li><a href="#">Backup and Disaster Recovery</a></li>
    </ul>
   <!-- EOF SUBMENU -->
  </li>
  <li><a href="#">Clients</a></li>  <li><a href="#">Contact Us</a></li>
</ul>

Jquery

<script>
$(document).ready(function(){
$("ul.sub-menu").parent().mouseover(	  function(){
$(this).children('ul.sub-menu').show();
}	).mouseout(	   function(){
$(this).children('ul.sub-menu').hide();
});
});
</script>

Stylesheet

<style>
.navigation li{font-family:Arial, Helvetica, sans-serif; height:31px; font-size:12px; font-weight:bold; color:#ffffff; float:left; padding-left:25px; padding-right:25px; padding-top:24px; background:#304F9E; list-style:none;}
.navigation li a{ text-decoration:none; color:#ffffff;}
ul.sub-menu {padding:0px; margin:0px; position:absolute; z-index:1000; display:none; background-color:#304F9E; width:200px; padding-bottom:10px; margin-top:10px; margin-left:-10px; }
ul.sub-menu li {border-bottom:1px dotted #bbb; height:20px; clear:left; display:block; text-align:left; list-style:none outside none;width:180px; color:#fff; padding:5px; margin:5px;}
</style>

Demo

Click here for the demo

Skype, smart enough, but creates problem for your design with its feature to wrap numbers in button.

As skype’s  forum has suggested for the use of meta tag in the header but it didn’t worked for me.

So what you can do is just add a character in the  phone number and make it invisible.

<div class="ph_number">(403)26<span style="display:none">_</span>0-9021</div>

I have used underscore( _ ) here. You can use any character in it. But make sure you make it invisible. By use of non-numerical character, skype fails to recognize your number.

Simple And Effective. Cheers

Step 1: Include Jquery

<script src="{PATH TO JQUERY}/jquery.js'; ?" type="text/javascript"><!--mce:0--></script>

Step 2: Creating Tab

<ul class="tabs">
<li><a href="#tab1">TAB 1</a></li>
<li><a href="#tab2">TAB 2</a></li>
<li><a href="#tab3">TAB 3</a></li>
</ul>

<div class="tab_container">

<div id="tab1" class="tab_content">
Tab1 Content Here
<!-- TAB1 CONTAIN HERE --></div><!-- EOF TAB1-->

<div id="tab2" class="tab_content">
Tab2 Content Here
<!-- TAB2 CONTAIN HERE -->
</div><!-- EOF TAB2-->

<div id="tab3" class="tab_content">
Tab3 Content Here
<!-- TAB3 CONTAIN HERE -->
</div><!-- EOF TAB3-->

</div> <!-- EOF TAB CONTAINER -->

Step 3: Make It Work

$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
activeTab = activeTab.split("#");
$("#"+activeTab[1]).fadeIn(); //Fade in the active ID content

return false;
});
});

Step 4: Adding Beauty

<style>
ul.tabs {margin: 0;padding: 0;float: left;list-style: none;margin-top:30px;border-bottom:1px solid #e9e9e9;}
ul.tabs li {float: left;margin: 0;padding: 0;height: 28px;width:135px;margin-bottom: -1px; overflow: hidden;position: relative;background: #5D99A3;font-family: arial;font-size:11px;margin-right:5px;text-align:center;}
ul.tabs li a {text-decoration: none;color: #fff;display: block;padding-top:9px;outline: none;}
ul.tabs li:hover {background:#ece6d3;color:#454545;}
ul.tabs li.active, ul.tabs li.active a:hover  {background:#ece6d3;color:#454545;}
.tabs li.active a{color:#454545;}
.tab_container {border-top: none;overflow: hidden;clear: both;float: left;height: 533px;width: 470px;background: #ece6d3;margin:0 auto;border:1px solid #e9e9e9;border-top:0px;color:#454545;}
</style>

Demo
Click here for the demo.