salve a tutti,ho fatto questa pagina web della quale vi riporto il codice 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
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
