Ciao a tutti
allora dovrei fare un menu a tendina verticale...
io seguendo le guide proposte dal sito
mi sono creata per il momento un menù a tendina orizzonatel:
"Un menu a tendine solo con i CSS"
ohhh questo menù però invece che essermi orizzontale mi servirebbe verticale...
è possibile modificare tale menù partendo da questo o è totalmente un'altra cosa?
Mi spiego..
quello che a me servirebbe è un menù che abbia le voci principali in verticale e
passando sopra di esse compaiano i sottomenù ma non di lato..sotto la voce principale facendo scorrere le altri voci principali sotto.
Cmq il codice che ho adesso è questo:
______________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<link href="CSS/menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="hormenu">
<ul> [*]Menu 1
<ul> [*]Submenu 1[*]Submenu 1[*]Submenu 1[*]Submenu 1[*]Submenu 1[/list]
[*]Menu 2
<ul> [*]Submenu 1[*]Submenu 1[*]Submenu 1[*]Submenu 1[*]Submenu 1[/list]
[*]Menu 3
<ul> [*]Submenu 1[*]Submenu 1[*]Submenu 1[*]Submenu 1[*]Submenu 1[/list]
....[/list]
</div>
</body>
</html>
________________________
il cui CSS è:
_________________________
div#hormenu {
width: 100%;
float: left;
margin: 0;
padding: 0;
border-top: 1px solid black;
background: red;
}
div#hormenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
div#hormenu li {
width:100px;
float:left;
margin: 0;
padding: 0;
border-right: 1px solid black;
color:black;
}
div#hormenu a {
display: block;
padding: 5px;
color: #000;
text-decoration: none;
}
div#hormenu a:hover {
background-color: #000033;
color: #FFFFFF;
text-decoration: none;
}
div#hormenu li ul {display: none}
div#hormenu li:hover ul {
display: block;
position: absolute;
z-index:1;
width:150px;
padding: 0;
margin: 0 0 0 -1px;
border:1px solid black;
background: white;
}
div#hormenu li li {border: none; width: 150px;}
div#hormenu li li a {padding: 2px 2px 2px 10px;}
_______________________
potete darmi una mano?
Rispondi quotando