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

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

Referenze

<embed>Tag per l'incorporamento di contenuti multimediali
<select>Usato per creare un menu a tendina.
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
minImposta il valore numerico o temporale minimo per un elemento input
idIdentifica univocamente un elemento HTML
sizeDetermina le dimensioni dell'elemento in base al valore contenuto

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Basketball Legends

Research Profiles

cambio parola al click

Esercitazione 2

INFORMATICA - ESERCIZIO 3

esercitazione 1

Banner cercatutto

Il museo di Leonardo

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;