25/10/14 11:42
Aangelus
Salve a tutti ho creato un menu a tendina e fino qui funzionava tutto, una volta introdotto subito sotto un div con margini che comprende tutta la larghezza del menu, quando vado a selezionare un sotto menu scompare subito senza poterlo selezionare suggerimenti ? grazie
foglio Style :
pagina php
foglio Style :
#menu { width: 500px; margin: 150px auto; } #menu ul { padding: 0; margin: 0; } #menu li { position: relative; float: left; list-style: none; margin: 0; padding: 0 5px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; } #menu li a { width: 120px; line-height: 40px; padding: 5px 13px; display: block; text-decoration: none; text-align: center; background-color: #222222; color: white; } #home { background: url("img/home.png") no-repeat no-repeat 10px 7px; } #feed { background: url("img/rss.png") no-repeat no-repeat 10px 7px; } #sezioni { background: url("img/sezioni.png") no-repeat 10px 7px; } #home:hover { border-bottom: 3px solid #32CD32; } #feed:hover { border-bottom: 3px solid #FFA500; } #sezioni:hover { border-bottom: 3px solid #FFFF00; } #menu li a:hover{ text-shadow: 0px 0px 1px #FFF; background-color: #000000; } #menu ul li:hover { transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); /* IE 9 */ -webkit-transform: scale(1.1, 1.1); /* Safari and Chrome */ } #menu ul li ul li:first-child { margin-top: 3px; } #menu ul li ul li:last-child:after, ul li ul li:last-child:before { display: none; } #menu ul ul { position: absolute; top: 50px; right: -1px; visibility: hidden; } #menu ul li:hover ul{ visibility: visible; } .Sub li:before { content: ""; border-color: transparent #000000 transparent transparent; border-style: solid; border-width: 13px; height: 0px; width: 0px; position: absolute; left: -8px; top: 38px; z-index: -1; } .Sub li:after { content: ""; border-color: transparent transparent transparent #000000; border-style: solid; border-width: 13px; height: 0px; width: 0px; position: absolute; right: -8px; top: 38px; z-index: -1; } #Box{ border: 1px solid blue; height: 38px; left: 533px; position: absolute; top: 206px; width: 323px; text-align: center; padding: 2px; box-shadow: 0 0 8px inset; }
pagina php
<link rel="stylesheet" href= "Style2.css?v=1"/> <div id="menu"> <!-- Lista generale --> <ul> <!-- 1° Elemento: Home --> <li> <a href="#" id="home">Home</a> </li> <!-- 2° Elemento: Feed --> <li> <a href="#" id="feed">Sezioni1</a> </li> <!-- 3° Elemento: Sezioni --> <li> <a href="#" id="sezioni">Sezioni2</a> <!-- Voci annidate 2° Elemento --> <ul class="Sub"> <li> <a href="#">Link 3-1</a> </li> <li> <a href="#">Link 3-2</a> </li> <li> <a href="#">Link 3-3</a> </li> </ul> </li> </ul> </div> <div id="Box"> </div>
Ultima modifica effettuata da Aangelus 25/10/14 14:20
aaa