prova museo (2) by @UCSAntonella - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<hr>Inserisce una linea orizzontale
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
<aside>Definisce un contenuto separato dal testo perincipale
<select>Usato per creare un menu a tendina.
<b>Formatta il testo in grassetto
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercitazione 3

Editor di testo HTML

provo copia prof

VERIFICA RANZI LEONARDO

Esercitazione 1

HTML Schwabisch

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Museo Diocesano </title>
		<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
	</head>
	<body>
      
      <div id="drop-menu">
			<ul id="menu">
				<li><a href="#">Dove Siamo </a></li>
				
			</ul>
		</div>
	</body>
</html>

body{
	font-size:100%;
	color:#333;
	font-family:sans-serif;
}

/*container*/
#drop-menu {
	margin: 0 auto;
	padding: 0;
	width: 960px;
}

/*menu*/

ul#menu {
	margin:60px 0 0;
	padding: 0;
	list-style: none;
	float:left;
	width: 100%px;
	font-size:80%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px; 
	background: rgb(255,175,75);
	background: rgb(98,125,77);
	background: -moz-linear-gradient(top,  rgba(98,125,77,1) 0%, rgba(31,59,8,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(98,125,77,1)), color-stop(100%,rgba(31,59,8,1)));
	background: -webkit-linear-gradient(top,  rgba(98,125,77,1) 0%,rgba(31,59,8,1) 100%);
	background: -o-linear-gradient(top,  rgba(98,125,77,1) 0%,rgba(31,59,8,1) 100%);
	background: -ms-linear-gradient(top,  rgba(98,125,77,1) 0%,rgba(31,59,8,1) 100%);
	background: linear-gradient(top,  rgba(98,125,77,1) 0%,rgba(31,59,8,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 );
	-webkit-box-shadow: 0px 0px 3px 0px #999;
	-moz-box-shadow: 0px 0px 3px 0px #999;
	box-shadow: 0px 0px 3px 0px #999; 
}

ul#menu li {
	margin:0;
	padding:0;
	float:left;
	display: block;
	border-right: 1px solid #1C2B10;
	position: relative;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
}

ul#menu li a {
	float: left;
	display:block;
	padding:12px 30px;
	color: #fff;
	text-transform: uppercase;
	text-decoration:none;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
}

ul#menu li a:hover {
	color:#fff;
	background: rgb(115,136,10);
	background: -moz-linear-gradient(top,  rgba(115,136,10,1) 0%, rgba(115,136,10,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(115,136,10,1)), color-stop(100%,rgba(115,136,10,1)));
	background: -webkit-linear-gradient(top,  rgba(115,136,10,1) 0%,rgba(115,136,10,1) 100%);
	background: -o-linear-gradient(top,  rgba(115,136,10,1) 0%,rgba(115,136,10,1) 100%);
	background: -ms-linear-gradient(top,  rgba(115,136,10,1) 0%,rgba(115,136,10,1) 100%);
	background: linear-gradient(top,  rgba(115,136,10,1) 0%,rgba(115,136,10,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#73880a', endColorstr='#73880a',GradientType=0 );
}

ul#menu li:first-child > a {
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-radius: 5px 0px 0px 5px;
	border-radius: 5px 0px 0px 5px;  
}

ul#menu ul li:first-child > a{
	-moz-border-radius-topleft: 0;
	-moz-border-radius-topright: 0;
	-moz-border-radius-bottomright: 0;
	-moz-border-radius-bottomleft: 0;
	-webkit-border-radius: 0 0 0 0;
	border-radius: 0 0 0 0;  
}

ul#menu ul li:first-child > a:after {
	content: '';
	position: absolute;
	left: 40px;
	top: -6px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #fff;
}

ul#menu ul ul li:first-child a:after {
	left: -6px;
	top: 50%;
	margin-top: -6px;
	border-left: 0;
	border-bottom: 6px solid transparent;
	border-top: 6px solid transparent;
	border-right: 6px solid #fff;
}

ul#menu ul {
	margin:2px 0 0;
	padding:0;
	display:inline-block;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 38px;
	left: 0;
	z-index:9999;
	background: rgb(115,136,10);
	background: -moz-linear-gradient(top,  rgba(115,136,10,1) 0%, rgba(115,136,10,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(115,136,10,1)), color-stop(100%,rgba(115,136,10,1)));
	background: -webkit-linear-gradient(top,  rgba(115,136,10,1) 0%,rgba(115,136,10,1) 100%);
	background: -o-linear-gradient(top,  rgba(115,136,10,1) 0%,rgba(115,136,10,1) 100%);
	background: -ms-linear-gradient(top,  rgba(115,136,10,1) 0%,rgba(115,136,10,1) 100%);
	background: linear-gradient(top,  rgba(115,136,10,1) 0%,rgba(115,136,10,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#73880a', endColorstr='#73880a',GradientType=0 );
	-webkit-box-shadow: 0px 2px 3px 0px #999;
	-moz-box-shadow: 0px 2px 3px 0px #999;
	box-shadow: 0px 2px 3px 0px #999; 
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
}

ul#menu ul li > ul{
	-webkit-box-shadow: 2px 2px 3px 0px #999;
	-moz-box-shadow: 2px 2px 3px 0px #999;
	box-shadow: 2px 2px 3px 0px #999; 
}

ul#menu li:hover > ul {
	opacity: 1;
	visibility: visible;
}

ul#menu ul li {
	float: left;
	display: block;
	border:none;
}

ul#menu ul a {
	padding:10px;
	width: 130px;
	display:block;
	float: left;
	text-transform: none;
	border-bottom:1px solid #1C2B10;
}

ul#menu ul li:last-child > a {
	border-bottom:none;
}

ul#menu ul ul {
	top: 0;
	left: 150px;
	margin: 0;
}

ul#menu ul a:hover{
	background: rgb(255,175,75);
	background: rgb(16,36,96);
	background: -moz-linear-gradient(top,  rgb(77,80,125) 0%, rgba(31,59,8,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(98,125,77,1)), color-stop(100%,rgba(31,59,8,1)));
	background: -webkit-linear-gradient(top,  rgba(98,125,77,1) 0%,rgba(31,59,8,1) 100%);
	background: -o-linear-gradient(top,  rgba(98,125,77,1) 0%,rgba(31,59,8,1) 100%);
	background: -ms-linear-gradient(top,  rgba(98,125,77,1) 0%,rgba(31,59,8,1) 100%);
	background: linear-gradient(top,  rgb(77,79,125) 0%,rgba(31,59,8,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 );
}
dropdown-content {
  display: none;
  position: absolute;
  background-color: #F7EFEF;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 20px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
  font-size: 110%;
  line-height: 1.4;
  position: relative;
}
#pulsante{
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
color: #fff;
padding: 10px 20px;
border: solid 1px #0076a3;
background: #0095cd;