Buongiorno a tutti ho cercato, prima di scrivere questo messaggio, di ceracre una soluzione nel forum e di risolverla da solo ma purtroppo non riesco a trovare l'inghippo...o forse l'inghippo è solamente IE.
Ho questo bene amato problema da risolvere:
Sto realizzando un sito per una ditta calzaturiera e per esigenze del cliente mi hanno chiesto di inserire un menù a cascata posizionato in alto a destra.
Dovendo ovviare al problema flash su dispositivi mobili ho ricreato una pagina che si adatta alla larghezza dello schermo in html+css, e fin qui tutto bene il problema mi viene purtroppo con il menù perchè per tutti i "bottoni" va bene tranne che per l'ultimo che è contact che mi fa evidenziare tutta la larghezza del menù...
qualcuno può dirmi dove sbaglio???
vi incollo sia il codice della pagina che il css del menù
pagina:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Lagoa</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css" media="screen,projection">
html,body{margin:0;padding:0}
body{font: 100.01% Verdana,Arial,sans-serif}
h1,h2,h3{font-family: "Trebuchet MS",Arial,sans-serif;margin: 0}
h1{color: #FFA54C;font-size: 200%}
h2{color: #999;font-size: 180%}
h3{color: #666;font-size: 150%}
p{
margin: 0 0 0.8em 0;
font-size: 12px;
text-align: justify;
}
div#container{min-width: 500px}
div#header{height:70px;line-height: 70px;padding: 0 2%;
background: #fff}
div#header a#skipnav{position: absolute;left: -9000px}
div#sidebar{
float: left;
width:29%;
\width:33%;
w\idth:50%;
padding: 0 2%;
color: #333;
font-size:80%;
margin-top: 25px;
}
div#content{
position: relative;
margin: 0 2% 0 35%;
margin-right: 200px;
}
div#content p{line-height:1.3}
div#footer{
clear:left;
background: #fff url(image/footer.jpg) repeat-x top;
height: 80px;
position: absolute;
bottom: 0px;
width: 100%;
}
div#footer p{margin: 0;padding: 10px 0;text-align: center;font-size: 75%}
.Stile1 {
font-size: 100.01px;
vertical-align: middle;
}
</style>
<!--[if lte IE 6]>
<style type="text/css" media="screen,projection">
div#container{ width: expression(document.body.clientWidth<=500 ? "500px" : "auto")}
</style>
<![endif]-->
<style type="text/css" media="print">
body{font: 12pt Arial,sans-serif}
h1,h2,h3{font-family: "Trebuchet MS",Arial,sans-serif}
h1{font-size: 160%}
h2{font-size: 140%}
h3{font-size: 120%}
p{line-height: 1.2}
div#header{border-bottom: 1px solid #000}
div#sidebar, a#skipnav{display:none}
div#footer{border-top: 1px solid #000;font-size: 80%}
</style>
<style type="text/css">
<!--
.Stile2 {font-size: 12px}
-->
</style>
<link rel="stylesheet" type="text/css" href="menu-dd.css">
</head>
<body>
<div id="container">
<div id="header"><table width="700 px" border="0">
<tr>
<td> <ul id="nav">[*]
about us
[*]
stores
[*]
man collection
<ul>[*]siviglia[*]siviglia street
[*]granada[/list]
[*]
woman collection
<ul>[*]siviglia[*]siviglia street[*]andorra[/list]
[*]
press
[*]
news
contact
</td>
</tr>
</table>
</div>
<div id="sidebar">
<div align="center">[img]image/mondo01b.jpg[/img]</div>
</div>
<div id="content">
<h2></h2>
<h2></h2>
<h2></h2>
<h2>[img]image/logolagoa.jpg[/img]</h2>
</p>
testo
</div>
<div id="footer">
© Lagoa Srl</p>
</div>
</div>
</body>
</html>
css menù
/*CSS principale per il menu*/
ul#nav{
font: 8pt/1.5 Verdana, Arial, Helvetica, sans-serif;
position:fixed;
top:0px;
right: 0px;
}
ul#nav,ul#nav li,ul#nav ul,ul#nav ul li{margin:0;padding:0;list-style-type:none}
ul#nav{height:26px;line-height:25px;margin-left:25px;
background: #fff;color: #79ac36}
ul#nav a{display:block;padding: 0 15px;text-decoration: none; color:#79ac36}
ul#nav li{float: left;position: relative}
ul#nav li li{float: none;line-height: 22px;
display:block !important;display: inline; /*IE*/}
ul#nav ul{position: absolute;top: 23px;left: -9999px;
width: 15em;background: #fff;color: #79ac36}
ul#nav ul{padding: 7px 0;border: 0px}
ul#nav ul,ul#nav li li a{background-color: #FFF;color: #79ac36}
ul#nav li:hover,ul#nav a:hover{background-color: #79ac36;color: #fff}
ul#nav li:hover ul,ul#nav li.sfhover ul{left: -1px;z-index: 100}
/*regole per separatore e le icone */
ul#nav li.sep{height: 34px;background: #fff}
ul#nav li.sep span{display: block;height: 1px;overflow: hidden;
margin: 6px 5px 0;background: #CCC}
ul#nav li li.icon a{padding-left: 24px}
Rispondi quotando
...e grazie mille per l'osservazione sulla ul non me ne ero accorto
