Visto che non riesco a trovare la soluzione devo per forza chiedere a voi sperando che a qualcuno venga l'illuminazione e capisca dove sbaglio.
Praticamente ho fatto un menu a tendina utilizzando i css (se utilizzassi i javascript poi, almeno per ie, bisogna attivarli ogni volta e se qualcuno c'è li ha disattivati non lo visualizza) ma il problema c'è l'ho quando utilizzo google chrome o ie (nello specifico ie7, gli altri non so).
Ecco i codice utilizzati:
Questo è il cssCodice PHP:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
[url]http://www.w3.org/TR/html4/loose.dtd[/url]>
<html>
<head>
<link href="aspetto3.css" type="text/css" rel="stylesheet">
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="hormenu">
<ul id="menu_a_2livelli">[*][url="#"]Principiante[/url]
<ul>[*]<select id="select" name='principiante' onchange="select(this.value);">
<option>Regolamento Principale</option>
<optgroup class="opt1" label="Lombardia">
<option value="Do This">Venezia</option>
<option value="Do That">Chioggia</option>
<option value="c">Portogruaro</option></optgroup>
<option>Portogruaro</option>
<option>Portogruaro</option>
<option>Portogruaro</option>
<option>Portogruaro</option>
</select>
Scegli l'argomento dal menu soprastante[/list]
[*][url="#"]Intermedio[/url]
<ul>[*][url="#"]Madrid[/url][*][url="#"]Barcelona[/url][*][url="#"]Zaragoza[/url][/list]
[*][url="#"]Esperto[/url]
<ul>[*][url="#"]Berlin[/url][*][url="#"]Munchen[/url][*][url="#"]Kholn[/url][/list]
[/list]
</div>
<div id="dati">
<div id="1" style="display: none">sf e ge </div>
csa
</div>
</div>
</body>
</html>
Inoltre c'è anche un file in javascript che mi serve per caricare solo parte del testo (la parte selezionata nel menu) ma questo non va a influire con il menu. Comunque lo posto lo stesso per darvi un quadro completo.Codice PHP:a:link{
color:#900;
text-decoration: underline;
font-weight:bold;
}
a:hover{
text-decoration: none;
background:#900;
color:#fff;
}
ul#menu_a_2livelli{
float: left;
margin: 0;
padding: 0;
border-top: 1px solid #D76120;
border-bottom: 1px solid #D76120;
border-left: 1px solid #D76120;
background: #ca2020;
list-style:none;
font:1em Trebuchet MS;
width: 100%;
}
ul#menu_a_2livelli li ul li{
list-style:none;
margin:0;
padding:0;
}
ul#menu_a_2livelli li{
float:left;
margin: 0;
padding: 0;
border: 1px solid #D76120;
color:black;
width: 33%;
text-align:center;
}
ul#menu_a_2livelli a:link,
ul#menu_a_2livelli a:visited{
display: block;
padding: 4px 16px;
color: #fff;
text-decoration: none;
}
ul#menu_a_2livelli a:hover,
ul#menu_a_2livelli a:focus,
ul#menu_a_2livelli a:active{
background-color: #D76120;
color: #FFFFFF;
text-decoration: none;
}
ul#menu_a_2livelli li ul{
display: none;
}
ul#menu_a_2livelli li:hover ul{
display: block;
position: absolute;
z-index:1;
width:253px;
padding: 0;
margin: 0 0 0 -1px;
border:1px solid #D76120;
background: #ca2020;
font-size:.8em;
}
ul#menu_a_2livelli li li {
border-bottom:1px solid #D76120;
width:100%;
}
#container {
border: 1px solid black;
height: 540px;
margin: auto;
width: 770px;
}
#select {
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background: #CCCCCC;
width: 209px;
}
#dati {
background-color: #b1adad;
background-image: url("http://www.cantilux.net/files3/2279460807.png");
height: 506px;
background-position: right bottom;
background-repeat: no-repeat;
overflow: auto;
}
Codice PHP:function aprisezione(s){
var w = 1;
while(document.getElementById(w)){
document.getElementById(w).style.display='none';
w++;
}
document.getElementById(s).style.display='block';
}
function select(optionValue)
{
switch(optionValue)
{
case "Do This" :
aprisezione('1');
break;
case "Do That" :
aprisezione('2');
break;
}
}
Ed ecco i problemi riscontrati:
Con google chrome mi si vede solo il menu, la parte sottostante dove c'è il riquadro ed il testo appare bianca e non riesco a capire il perchè.
Con IE (7 per quanto ne so io) invece mi sposta i sottomenu più a destra mentre mi rende inutilizzabile il select poichè non riesco a scendere più di tanto.
Spero che qualcuno riesca ad aiutarmi, grazie in anticipo
Rispondi quotando