Web-Codes

Код: Выделить всё

<style type="text/css">
/* ================================================================  
This copyright notice must be untouched at all times.
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */

#pad {height:200px;} /* this demo only */

#nav, #nav ul {padding:0; margin:0 auto; list-style:none; background:#fff;}
#nav {position:relative; z-index:50;}
#nav ul {display:none;}

#nav li {float:left; position:relative;}
#nav li a {text-decoration:none; font-family:garamond, serif; font-size:16px; white-space:nowrap}
#nav li b {display:block; padding:0 20px 0 10px; cursor:pointer; height:20px; ; line-height:20px; float:left; background:url(http://lyonnais-fc.ru/asdgbcn45q.jpg) center top; font-weight:normal; color:#fff;}
#nav li.first b {padding-left:255px; background-position:left top;}
#nav li.last b {padding-right:245px; background-position:right top;}
#nav li a b.clicked {color:#fff;}

#nav li ul {position:absolute; left:0; top:20px; height:auto; float:left; background:#f8f8f8; padding:2px; border:1px solid #;}
#nav li ul.w1 {width:190px;}
#nav li ul.w2 {width:130px;}
#nav li ul.w3 {width:110px;}
#nav li ul.w4 {width:130px;}
#nav li ul.w5 {width:150px;}

#nav li ul li {float:none;}
#nav li ul li a {display:block; height:20px; line-height:20px; padding:0 5px; color:#000; font-size:14px}
#nav li ul li a:hover {background:#aaa; color:#fff;}
</style>
<script src="http://lyonnais-fc.ru/jquery-1.2.6.min.js" type="text/javascript"></script>

<script type="text/javascript">
/* ================================================================  
This copyright notice must be untouched at all times.
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */
$(document).ready(function(){
closetimer = 0;
  if($("#nav")) {
  $("#nav b").mouseover(function() {
  clearTimeout(closetimer);
  if(this.className.indexOf("clicked") != -1) {
  $(this).parent().next().slideUp(500);
  $(this).removeClass("clicked");
  }
  else {
  $("#nav b").removeClass();
  $(this).addClass("clicked");
  $("#nav ul:visible").slideUp(500);
  $(this).parent().next().slideDown(500);
  }
  return false;
  });
  $("#nav").mouseover(function() {
  clearTimeout(closetimer);
  });
  $("#nav").mouseout(function() {
  closetimer = window.setTimeout(function(){
  $("#nav ul:visible").slideUp(500);
  $("#nav b").removeClass("clicked");
  }, 2000);
  });  
  }
});
</script>
<div id="content">

<center>
<ul id="nav">
  <li class="first"><a href="#url"><b>Home</b></a></li>
  <li class="sub"><a href="#url"><b>Sales</b></a>
  <ul class="w1">
  <li><a href="#url">Digital SLR Cameras</a></li>
  <li><a href="#url">Interchangeable Lenses</a></li>
  <li><a href="#url">Flash Guns and Accessories</a></li>

  <li><a href="#url">Professional Tripods</a></li>
  <li><a href="#url">Filters & Lens Hoods</a></li>
  </ul>
  </li>
  <li><a href="#url"><b>Services</b></a>
  <ul class="w2">

  <li><a href="#url">Printing & Framing</a></li>
  <li><a href="#url">Photo Editing</a></li>
  <li><a href="#url">Storage & Backup</a></li>
  </ul>
  </li>

  <li><a href="#url"><b>Contacts</b></a>
  <ul class="w3">
  <li><a href="#url">Support</a></li>
  <li><a href="#url">Sales</a></li>
  <li><a href="#url">Buying</a></li>
  <li><a href="#url">Photographers</a></li>

  <li><a href="#url">Stockist</a></li>
  <li><a href="#url">General</a></li>
  </ul>
  </li>
  <li><a href="#url"><b>Stores Location</b></a>
  <ul class="w4">
  <li><a href="#url">South West Region</a></li>

  <li><a href="#url">North East Region</a></li>
  <li><a href="#url">Central Region</a></li>
  </ul>
  </li>
  <li><a href="#url"><b>Contact Us</b></a>
  <ul class="w5">
  <li><a href="#url">Email Addresses</a></li>

  <li><a href="#url">By Post</a></li>
  <li><a href="#url">Telephone Numbers</a></li>
  </ul>
  </li>
  <li class="last"><a href="#url"><b>Privacy Policy</b></a></li>
</ul>
</center>
</div>