Все о программировании, веб‑разработке и электронике.
https://web-codes.net/
Код: Выделить всё
<style type="text/css">
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop-table.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#menu {width:750px; height:36px;text-align:center; position:relative;}
#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
#menu ul {display:inline-block;}
#menu ul {display:inline;}
#menu #table {display:table; margin:0 auto;}
#menu #table ul {display:table-row;}
#menu li {margin:0; padding:0;}
#menu li {margin-right:1px;}
#menu ul table {position:absolute; left:-9999px; width:750px; font-family:verdana, arial, sans-serif; background:url(anywidth/black60.png);}
#menu ul table td {vertical-align:top; padding:3px; margin:0;}
#menu ul table td.border {border-right:1px dashed #fff;}
#menu ul table td img {padding:0; display:inline; margin:0; border:1px solid #fff;}
#menu ul table td.image {width:122px;}
#menu ul table th {padding:4px 0 4px 10px; margin:0; color:#fc0; font-size:11px; text-align:left;}
#menu ul table caption {font-size:14px; color:#fff; font-weight:bold; padding:5px 0; margin:0; background:url(anywidth/black60.png);}
#menu ul table tfoot td {font-size:10px; color:#ff0; padding-left:10px;}
#menu ul.level1 li.level1-li {float:left; display:block;}
#menu ul table td p {line-height:16px; font-size:11px; color:#fff; white-space:normal; margin:0; padding:0 5px;}
#menu ul table td p a {padding:0; margin:0; font-weight:bold; color:#fc0;}
#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#fff; line-height:36px; text-decoration:none;}
#menu ul.level1 li.level1-li a.level1-a {float:left; padding:0 10px 0 0; background: url(anywidth/tab4a.gif) no-repeat right top;}
#menu ul.level1 li.level1-li a.level1-a b {float:left; padding:0 0 0 10px; background: url(anywidth/tab4.gif) no-repeat left top; cursor:pointer;}
#menu ul li:hover table {visibility:visible; left:0; top:36px;}
#menu a:hover table {left:0; top:36px;}
#menu ul.level1 li.level1-li a.drop {background: url(anywidth/tab4a-arrow.gif) no-repeat right top;}
#menu ul.level1 li.level1-li a.level1-a:hover {background-position:right bottom; color:#000}
#menu ul.level1 li.level1-li a.level1-a:hover b {background-position:left bottom;}
#menu ul.level1 li.level1-li:hover > a {background-position:right bottom; color:#000}
#menu ul.level1 li.level1-li:hover > a > b {background-position:left bottom;}
#menu ul table td a {line-height:18px; padding:0 0 0 10px;}
#menu ul table a:hover {background:transparent; text-decoration:underline;}
#menu ul table a:hover img {border:1px solid #000;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#menu ul table caption {background:transparent;}
#menu ul table {background:transparent;}
#menu ul table {_azimuth: expression(this.shimmed = this.shimmed || 'shimmed:'+this.REPLACEAdjacentHTML('beforeBegin','<div style="background:#000; filter:alpha(opacity=60);
padding:0; margin:0; border:0;"></div>'),'inherit');}
#menu ul div {position:absolute; left:-9999px; top:0;}
#menu a:hover div { left:expression(this.nextSibling.offsetLeft);top:expression(this.nextSibling.offsetTop);width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);}
</style>
<![endif]-->
<div id="menu">
<div id="table">
<ul class="level1">
<li class="level1-li"><a class="level1-a" href="#url"><b>Home</b></a></li>
<li class="level1-li"><a class="level1-a drop" href="#url"><b>Camera Equipment</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<table>
<caption>Camera Equipment</caption>
<thead>
<tr>
<th scope="col">Cameras</th>
<th scope="col">Makes</th>
<th scope="col">Lenses</th>
<th scope="col">Type</th>
<th scope="col">Framing</th>
<th scope="col">Services</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="6">Camera Equipment and Services - May 7th 2009 - Copyright ©2009 stu nicholls</td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="image">
<a href="#url"><img src="anywidth/camera1.jpg" alt="camera" /></a>
</td>
<td class="border">
<a href="#url">Nikon</a>
<a href="#url">Minolta</a>
<a href="#url">Pentax</a>
</td>
<td class="image">
<a href="#url"><img src="anywidth/camera4.jpg" alt="lens" /></a>
</td>
<td class="border">
<a href="#url">Wide Angle</a>
<a href="#url">Standard</a>
<a href="#url">Telephoto</a>
<a href="#url">Mirror</a>
</td>
<td class="image">
<a href="#url"><img src="anywidth/frame.jpg" alt="frame" /></a>
</td>
<td>
<a href="#url">Printing</a>
<a href="#url">Photo Framing</a>
<a href="#url">Retouching</a>
<a href="#url">Archiving</a>
</td>
</tr>
</tbody>
</table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li class="level1-li"><a class="level1-a drop" href="#url"><b>Resort</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<table>
<caption>Resorts in this area</caption>
<thead>
<tr>
<th colspan="2" scope="colgroup">Resort one</th>
<th colspan="2" scope="colgroup">Resort two</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">Ski Resorts in Gloucestershire - May 7th 2009 - Copyright ©2009 stu nicholls</td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="image">
<a href="#url"><img src="anywidth/resort1.jpg" alt="Resort" /></a>
</td>
<td class="border">
<p>Ut sit amet felis lacus. Vestibulum pretium iaculis lacus, a venenatis mi venenatis vel. Nulla posuere, arcu sed placerat hendrerit, dui nunc commodo velit, egestas pulvinar odio dolor non leo.
<a href="#url">more information...</a></p>
</td>
<td class="image">
<a href="#url"><img src="anywidth/resort2.jpg" alt="Resort" /></a>
</td>
<td>
<p>Roin pulvinar, est sed aliquam blandit, eros urna iaculis dolor, at cursus libero sapien eu neque. Integer nec pellentesque odio. Donec hendrerit faucibus dui, sit amet porta ante aliquet vel.
<a href="#url">more information...</a></p>
</td>
</tr>
</tbody>
</table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li class="level1-li"><a class="level1-a drop" href="#url"><b>Surrounding Area</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<table>
<caption>Road map of surrounding area</caption>
<thead>
<tr>
<th colspan="2" scope="colgroup">Places of interest</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">Ski resort surrounding area - May 7th 2009 - Copyright ©2009 stu nicholls</td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="image">
<a href="#url"><img src="anywidth/map.jpg" alt="Road Map" /></a>
</td>
<td>
<p>Here you will find Roman foundations,Victorian Docklands and the magnificent Norman Cathedral rubbing shoulders with a bustling city centre that boasts an incredible range of shops, markets, restaurants, pubs and visitor attractions.<br />
An ideal base to tour the Cotswolds and Forest of Dean, there are plenty of places to stay from country house hotels to cosy Bed and Breakfasts.<br />
There are literary links abound with Beatrix Potter's Tailor of Gloucester and the Cloisters at Gloucester Cathedral which were a location of the Harry Potter movies.
<a href="#url">more information...</a></p>
</td>
</tr>
</tbody>
</table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li class="level1-li left"><a class="level1-a drop" href="#url"><b>Information</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<table>
<caption>Further Information</caption>
<thead>
<tr>
<th scope="col">Photo Links</th>
<th scope="col">Ski Links</th>
<th scope="col">Area Links</th>
<th scope="col">Ad Links</th>
<th scope="col">Restaurant Links</th>
<th scope="col">Places of Interest</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="6">Links to further information - May 7th 2009 - Copyright ©2009 stu nicholls</td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="border">
<a href="#url">Pellentesque</a>
<a href="#url">Semper</a>
<a href="#url">Aliquam</a>
</td>
<td class="border">
<a href="#url">Blandit</a>
<a href="#url">Turpis</a>
<a href="#url">Gravida</a>
</td>
<td class="border">
<a href="#url">Elementum</a>
<a href="#url">Tincidunt</a>
<a href="#url">Posuere</a>
</td>
<td class="border">
<a href="#url">Massa euismod</a>
<a href="#url">Consectetur adipiscing</a>
<a href="#url">Convallis</a>
<a href="#url">Dolor sit amet</a>
</td>
<td class="border">
<a href="#url">Maecenas dignissim</a>
<a href="#url">Sed aliquam</a>
<a href="#url">Tincidunt</a>
</td>
<td>
<a href="#url">Pellentesque ipsum</a>
<a href="#url">Aliquam blandit</a>
<a href="#url">Adipiscing elit</a>
<a href="#url">Sit amet elementum</a>
</td>
</tr>
<tr>
<td colspan="6">
<p>The House of the Tailor of Gloucester can be found just off Westgate Street Gloucester. This charming shop and museum is open to the public every day where you will be served by our enthusiastic and knowledgeable volunteers. The house, pictured is the original building used by Beatrix Potter in her wonderful story, The Tailor of Gloucester.<br />
<a href="http://www.tailor-of-gloucester.org.uk/">http://www.tailor-of-gloucester.org.uk</a></p>
</td>
</tr>
</tbody>
</table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li class="level1-li"><a class="level1-a" href="#url"><b>Privacy</b></a></li>
</ul>
</div>
</div>X-3me