Ciao ragazzi ho un problema che mi sta facendo impazzire, sto realizzando un portale web e ho riscontrato alcuni intoppi.
Ho il file index.html
Con il relativo file css che è collocato in un file chiamato menu.css.
I problemi che ho riscontrato sono:
Pendo dalle Vostre labbra io ci ho provato in tutti i modi e non ci sono riuscito.
Vi ringrazio in anticipo.
Ho il file index.html
Codice:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Menù</title>
<link rel="stylesheet" href="./css/menu.css"/>
</head>
<body>
<ul id="nav">
<li><a href="#">Agrumi</a>
<ul>
<li><a href="#">Arance</a></li>
<li><a href="#">Limoni</a></li>
<li><a href="#">Madarini</a></li>
</ul>
</li>
<li><a href="#">Drupe</a>
<ul>
<li><a href="#">Albicocche</a></li>
<li><a href="#">Ciliegie</a></li>
<li><a href="#">Susine</a></li>
</ul>
</li>
</ul>
<div class="img">
<img src="./image/frutti.jpg" width="800" height="400" />
</div>
</body>
</html>
Codice:
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
/*Rimozione delle rientranze e dei punti*/
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
/*Ricopre il bordo del menu*/
border-bottom: 1px solid #ccc;
position: fixed;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
/*Stile del barra laterale*/
ul li a {
background: #ffc4af;
display: block;
text-decoration: none;
color: #000;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
opacity:0.9;
font-weight:bold;
}
/*Comparsa al passaggio del mouse*/
li:hover ul, li.over ul {
display: block;
}
/*Colore al passaggio del mouse*/
ul li a:hover {
color: #000; background: #fd4300;
}
/*Grandezza Immagine*/
div.img {
text-align: center;
}I problemi che ho riscontrato sono:
- Il menù deve stare in alto a sinistra sopra l'immagine;
- Il menù deve essere a comparsa, rimane solo una linguetta e al passaggio del mouse si apre. Deve fare in questo modo però sopra l'immagine.
Pendo dalle Vostre labbra io ci ho provato in tutti i modi e non ci sono riuscito.
Vi ringrazio in anticipo.