[HTML/JAVASCRIPT] Problema Blocco Menù

manumanu90

Nuovo Utente
17 Mag 2009
1
0
0
salve a tutti,ho fatto questa pagina web della quale vi riporto il codice html
Codice:
<html>

<head>
<title>Gruppo Sportivo Casoretto</title>

</head>

<body background="Sfondo.jpg">

<table border="0" cellspacing="0" width="980" cellpadding="0" id="table1">
	<tr>
		<td width="200" height="100" style="background-image: url('1.gif'); background-repeat: no-repeat; background-attachment: fixed"> </td>
		<td style="background-image: url('2.gif'); background-repeat: no-repeat; background-attachment: fixed"> </td>
		<td style="background-image: url('3.gif'); background-repeat: no-repeat; background-attachment: fixed" width="200" height="100"> </td>
	</tr>
	<tr>
		<td style="background-image: url('4.gif'); background-repeat: no-repeat; background-attachment: fixed" width="200" height="69"> </td>
		<td style="background-image: url('5.gif'); background-repeat: no-repeat; background-attachment: fixed"> </td>
		<td style="background-image: url('6.gif'); background-repeat: no-repeat; background-attachment: fixed" width="200" height="69"> </td>
	</tr>
	<tr>	</tr>
	<tr>
		<td> </td>
		<td><style type="text/css">

	/* General */
	#cssdropdown, #cssdropdown ul { list-style: none; }
	#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }
	
	/* Head links */
	#cssdropdown li.headlink { width: 80px; height: 30; float: left; margin-left: -1px; border: 1px black solid; background-color: #e9e9e9; text-align: center; }
	#cssdropdown li.headlink a { display: block; padding: 7px; }

	/* Child lists and links */
	#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; }
	#cssdropdown li.headlink:hover ul { display: block; }
	#cssdropdown li.headlink ul li a { padding: 5px; height: 17px; }
	#cssdropdown li.headlink ul li a:hover { background-color: yellow; }
	
	/* Pretty styling */
	body { font-family: Verdana; font-size: 0.8em;}
	#cssdropdown a { color: white; } #cssdropdown ul li a:hover { text-decoration: none; }
	#cssdropdown li.headlink { background-color: white; background-color: blue; }
	#cssdropdown li.headlink ul { background-color: blue; background-position: bottom; padding-bottom: 10px; }
	</style>

<script language="JavaScript">
	window.onload = function()
	{
		var lis = document.getElementById('cssdropdown').getElementsByTagName('li');
		for(i = 0; i < lis.length; i++)
		{
			var li = lis[i];
			if (li.className == 'headlink')
			{
				li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }
				li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }
			}
		}
	}
	/* or with jQuery:
	$(document).ready(function(){
		$('#cssdropdown li.headlink').hover(
			function() { $('ul', this).css('display', 'block'); },
			function() { $('ul', this).css('display', 'none'); });
	});
	*/
</script>
	</head>
<body>
<ul id="cssdropdown">

		<li class="headlink">
			<a href="http://google.com/">Menu1</a>
		</li>
		<li class="headlink">
			<a href="http://shopping.com">Menu2</a>

			<ul>
				<li><a href="http://amazon.com/">link2</a></li>
				<li><a href="http://ebay.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
			</ul>
		</li>
		<li class="headlink">
			<a href="http://shopping.com">Menu3</a>

			<ul>
				<li><a href="http://amazon.com/">link2</a></li>
				<li><a href="http://ebay.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
			</ul>
		</li>
		<li class="headlink">
			<a href="http://shopping.com">Menu4</a>

			<ul>
				<li><a href="http://amazon.com/">link2</a></li>
				<li><a href="http://ebay.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
			</ul>
		</li>
		<li class="headlink">
			<a href="http://shopping.com">Menu5</a>

			<ul>
				<li><a href="http://amazon.com/">link2</a></li>
				<li><a href="http://ebay.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
				<li><a href="http://craigslist.com/">link2</a></li>
			</ul>
		</li>
</ul></td>
	</tr>
	<tr>
		<td style="background-image: url('7.gif'); background-repeat: no-repeat; background-attachment: fixed" width="200" height="35"> </td>
		<td style="background-image: url('8.gif'); background-repeat: no-repeat; background-attachment: fixed"> </td>
		<td style="background-image: url('9.gif'); background-repeat: no-repeat; background-attachment: fixed" width="200" height="35"> </td>
	</tr>
</table>

</body>

</html>
il problema è che quando si apre il menù si allarga tutto il sito mentre in teoria il menu dovrebbe passare sopra gli altri elementi del sito...vi allego un immagine del problema:



spero che possiate essermi d'aiuto,
grazie mille

:) :)