Cascading Style Sheets - CSS

CSS-Cascading Style Sheets (foi de stil in cascada), este un standard, ce ofera designerilor/programatorilor un mod eficient de a controla modul de prezentare al paginilor "WEB".

Elemente de baza

Ce se poate face cu CSS ?

-CSS defineste modul de afisare al elementelor de tip HTML
-Stilurile utilizate se pot salva intr-un fisier extern (numit de obicei 'style.css' ) sau in sectiunea "head"

Sintaxa

Sintaxa declaratiilor CSS contine trei elemente: selector, proprietate, valoare

selector {proprietate: valoare}

Selectorul este elementul HTML pe care vrem sa-l definim. Prprietatea este atributul pe care vrem sa-l modificam prin atribuirea valorii "valoare"

Setare background

Setare background body

body {background-color: culoare}

Setare background texte

h1 {background-color: #00ff00}

Setare background paragraf

p {background-color: #00ff00}

Exemplu de utilizare

Text de marime h1

Text de marime h2

Paragraful

Dupa cum se remarca , stilurile sunt definite in sectiunea "head"

Transparenta imaginii

Vom realiza o imagine care isi schimba opacitatea in momentul cand mouse-ul se afla deasupra imaginii

Transparenta imaginii
Teatrul National

Clase in CSS

In urmatoarea aplicatie, caracteristicile tabelelor vor fi modificate folosind clase CSS. Se vor realiza doua tabele cu doua tipuri de border (normal si collapse)

<html>
<style type="text/css">
table.t1 
{
border-collapse: collapse
}
</style>
<body>
<center> 
<table width="800"><tr><td align="center" valign="center">
<center> Tabel border=1<br><br></center> 
<table cellspacing="0" border="1" width="400">
<tr>
<th align="center" width="25%">Nume-culoare</th>
<th align="center" width="25%">Valoarea HEX</th>
<th align="center" width="50%">Culoare</th>
</tr>
<tr>
<td align="left">AliceBlue </td>
<td align="left">#F0F8FF</td>
<td bgcolor="#F0F8FF"> </td></tr>
<tr>
<td align="left">AntiqueWhite </td>
<td align="left">#FAEBD7</td>
<td bgcolor="#FAEBD7"> </td></tr>
<tr>
<td align="left">Aqua </td>
<td align="left">#00FFFF</td>
<td bgcolor="#00FFFF"> </td></tr>
<tr>
<td align="left">Aquamarine </td>
<td align="left">#7FFFD4</td>
<td bgcolor="#7FFFD4"> </td></tr>
<tr>
<td align="left">Azure </td>
<td align="left">#F0FFFF</a></td>
<td bgcolor="#F0FFFF"> </td></tr>
</table>
</td><td>  </td><td>
<center> Tabel border=1 collapse </center>
<br>
<table class="t1" cellspacing="0" border="1" width="400">
<tr>
<th align="center" width="25%">Nume-culoare</th>
<th align="center" width="25%">Valoarea HEX</th>
<th align="center" width="50%">Culoare</th>
</tr>
<tr>
<td align="left">AliceBlue </td>
<td align="left">#F0F8FF</td>
<td bgcolor="#F0F8FF"> </td></tr>
<tr>
<td align="left">AntiqueWhite </td>
<td align="left">#FAEBD7</td>
<td bgcolor="#FAEBD7"> </td></tr>
<tr>
<td align="left">Aqua </td>
<td align="left">#00FFFF</td>
<td bgcolor="#00FFFF"> </td></tr>
<tr>
<td align="left">Aquamarine </td>
<td align="left">#7FFFD4</td>
<td bgcolor="#7FFFD4"> </td></tr>
<tr>
<td align="left">Azure </td>
<td align="left">#F0FFFF</a></td>
<td bgcolor="#F0FFFF"> </td></tr>
</table>
</td></tr></table></center>  
</body>
</html>

Tabel border=1

Nume-culoare	Valoarea HEX	Culoare
AliceBlue	#F0F8FF
AntiqueWhite	#FAEBD7
Aqua	#00FFFF
Aquamarine	#7FFFD4
Azure	#F0FFFF

Tabel border=1 collapse

Nume-culoare	Valoarea HEX	Culoare
AliceBlue	#F0F8FF
AntiqueWhite	#FAEBD7
Aqua	#00FFFF
Aquamarine	#7FFFD4
Azure	#F0FFFF

Urmatoarea aplicatie afiseaza un text transparent peste background folosind clase CSS

Universitatea "UMFST"
Targu Mures

Plasarea elementelor in pagina utilizand CSS

Utilizarea tabelelor pentru a plasa diferite elemente intr-o pagina WEB este destul de greoaie, si nu ofera control absolut la plasarea elementelor in diverse celule ale tabelelor imaginare deschise. O solutie mult mai buna este realizarea paginilor utilizand marcatori <div> impreuna cu CSS in care se declara tot felul de atribute referitoare la "div"-uri. Centrarea paginii pe centrul ecranului indiferent de rezolutia acestuia nu se poate face decat prin utilizarea "div"-urilor si CSS-urilor.
Sa realizam pentru inceput o schita de pagina care se centreaza pe mijlocul ecranului indiferent de rezolutie.

Pentru inceput, vom realiza numai continutul principal, centrat in pagina.

Urmeaza sa plasam antetul si baza paginii (zona de jos)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test pagini centrate</title>
<style type="text/css"> 
 
</style>
</head>
<body class="pag_centr">
<div id="continut">
  <div id="antet">
    <h1><strong><center>Utilizarea CSS pentru desig-ul paginilor WEB</center></strong></h1>
    <h1><center> Antet (antet) </center></h1>
  </div>

<div id="continut_p">
    <center><h3> Continut principal (continut_p) </h3></center><br>
	<br>
	.
	.
	.
	<br>
    <br><center>Sfarsit continut principal</center><br>
  </div>
   <div id="zona_jos">
    <p> Zona de jos (zona_jos) </p>
  </div>
</div>
</body>
</html>

Vom plasa in continuare meniul lateral si vom pozitiona in zona de continut div-urile "C1" si "C2" necesare plasarii elementelor de continut.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pagina web centrata</title>
<style type="text/css"> 
<!-- 
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0; 
	padding: 0;
	text-align: center;
	font-size: 12px; 
	color: Red;
	background-attachment: scroll;
	background-image: url(imm_j.bmp);
	background-repeat: repeat-x;
	/*background-color: Wheat;*/
	background-color: #8EBBDB;
}

h1 {
	padding:0px;
	font-size:18px;
	line-height:2px;
	font-weight:5;
	color:#ccc;
	}
.pag_centr #continut {
	/*width: 60em;*/
	width: 860px;
	/*1 em este echivalent cu  font-size-ul fontului curent.*/
	margin: 20 auto ; 
	border: 1px solid #000;
	text-align: left; 
	background-color: WhiteSmoke;
} 
.pag_centr #antet {
	padding: 0 10px; 
	background-color: OliveDrab;
} 
.pag_centr #antet h1 {
	margin: 0;
	padding: 15px 0; 
}
.pag_centr #meniu {
	border:hidden;
	float: left;
	margin: 10px 10px 10px 10px;
	/*width: 12em;*/
	height: 300px;
	width: 160px;
	/*padding: 15px 25px; */
	background-color: LightGrey;
}
.pag_centr #meniu h3{
	margin-left: 10px; 
	margin-right: 10px;
} 
.pag_centr #meniu p {
	
	margin-left: 10px; 
	margin-right: 20px;
}
.pag_centr #continut_p {
	float: left;
	margin: 10px 10px 10px 10px;
	width: 650px;
	height: 300px;
	background-color: Lavender ; 
} 
.pag_centr #c1{
	border:hidden;
	float: left;
	margin: 10px 10px 10px 10px;
	width: 160px;
	height: 100px;
	padding: 15px 25px; 
	background-color: Yellow;
}

.pag_centr #c2{
	border:hidden;
	float: left;
	margin: 10px 10px 10px 10px;
	width: 200px;
	height: 200px;
	padding: 15px 25px; 
	background-color: GreenYellow;
}

.pag_centr #zona_jos {
	padding: 0 10px;
	background-color: YellowGreen;
} 
.pag_centr #zona_jos p {
	margin: 0; 
	padding: 10px 0;
}

/* Diferite resurse */
.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
    	height:0;
    	font-size: 1px;
    	line-height: 0px;
}
a:link {
	color: Red
}
a:visited {
	color: Blue; font-size: 12px;
}
--> 
</style>
</head>
<body class="pag_centr">
<div id="continut">
  <div id="antet">
    <h1><strong><center>Utilizarea CSS pentru desig-ul paginilor WEB</center></strong></h1>
    <h1><center> Antet (antet) </center></h1>
  </div>
  <div id="meniu"> 
  <h5><center> Meniu (meniu) </center></h5>
    <div align="left">
      <p><a href="#"><strong>Meniu 1</strong></a>	</p>
      <p><a href="#"><strong>Meniu 2</strong></a>	</p>
      <p><strong><a href="#">Meniu 3</a></strong>	</p>
      <p><strong><a href="#">.</a></strong>			</p>
      <p><strong><a href="#">.</a></strong>			</p>
      <p><strong><a href="#">.</a></strong>			</p>
      <p><strong><a href="#">Meniu n</a></strong>	</p>
    </div>
    
  </div>
  <div id="continut_p">
    <center><h3> Continut principal (continut_p)</h3></center> 
	<div id="c1">
		Text 1
	</div>
	<div id="c2">
		Text 2
	</div>
  </div>
<center> Sfarsit continut principal </center>
<br class="clearfloat" /> 	
				
   <div id="zona_jos">
    <p> Zona de jos (zona_jos) </p>
  </div>
</div>
</body>
</html>

Dupa cum se observa div-urile "C1" si "C2" sunt definite "float: left;" Deci nu putem preciza pe x sau pe y. Pentru a putea controla pozitia pe x si pe y a div-urilor vom folosi "position:relative;"

h1 {
	padding:0px;
	font-size:18px;
	line-height:2px;
	font-weight:5;
	color:#ccc;
	}
	
.pag_centr{
	position:relative;
	top:0px;
	left:0px;
	/*width: 60em;*/
	/*1 em este echivalent cu  font-size-ul fontului curent.*/
	width: 860px;
	height: 515px;
	margin: 0 auto; 
	border: 1px solid #999;
	text-align: left; 
}
.pag_centr #continut{
	position:relative;
	top:0px;
	left:0px;
	width: 860px;
	height: 515px;
	margin: 0 auto; 
	border: 1px solid #999;
	text-align: left; 
	background-color: WhiteSmoke;
}
	
.pag_centr #antet {
	padding: 0 10px; 
	background-color: OliveDrab;
} 
.pag_centr #antet h1 {
	margin: 0;
	padding: 15px 0; 
}
.pag_centr #meniu {
	border:hidden;
	float: left;
	margin: 10px 10px 10px 10px;
	/*width: 12em;*/
	height: 300px;
	width: 160px;
	/*padding: 15px 25px; */
	background-color: LightGrey;
}
.pag_centr #meniu h3{
	margin-left: 10px; 
	margin-right: 10px;
} 
.pag_centr #meniu p {
	
	margin-left: 10px; 
	margin-right: 20px;
}
.pag_centr #continut_p {
	float: left;
	margin: 10px 10px 10px 10px;
	width: 650px;
	height: 400px;
	background-color: Lavender ; 
} 
.pag_centr #c1{
	border:hidden;
	position:absolute;
	top:110px;
	left:200px;
	margin: 10px 10px 10px 10px;
	width: 160px;
	height: 120px;
	padding: 15px 25px; 
	background-color: Yellow;
} 
.pag_centr #c2{
	border:hidden;
	position:absolute;
	top:130px;
	left:440px;
	margin: 10px 10px 10px 10px;
	width: 200px;
	height: 200px;
	padding: 15px 25px; 
	background-color: GreenYellow;
} 
.pag_centr #c3{
	border:hidden;
	position:absolute;
	top:410px;
	left:190px;
	margin: 10px 10px 10px 10px;
	width: 570px;
	height: 120px;
	padding: 15px 25px; 	
} 
.pag_centr #zona_jos {
	padding: 0 10px;
	background-color: YellowGreen;
} 
.pag_centr #zona_jos p {
	margin: 0; 
	padding: 10px 0;
}

/* Diferite resurse */
.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
    	height:0;
    	font-size: 1px;
    	line-height: 0px;
}
a:link {
	color: Red
}
a:visited {
	color: Blue; font-size: 12px;
}
--> 
</style>
</head>
<body class="pag_centr">
<div id="continut">
  <div id="antet">
    <h1><strong><center>Utilizarea CSS pentru desig-ul paginilor WEB</center></strong></h1>
    <h1><center> Antet (antet) </center></h1>
  </div>
  <div id="meniu"> 
  <h5><center> Meniu (meniu) </center></h5>
    <div align="left">
      <p><a href="#"><strong>Meniu 1</strong></a>	</p>
      <p><a href="#"><strong>Meniu 2</strong></a>	</p>
      <p><strong><a href="#">Meniu 3</a></strong>	</p>
      <p><strong><a href="#">.</a></strong>			</p>
      <p><strong><a href="#">.</a></strong>			</p>
      <p><strong><a href="#">.</a></strong>			</p>
      <p><strong><a href="#">Meniu n</a></strong>	</p>
    </div>
    
  </div>
  <div id="continut_p">
    <center><h3> Continut principal (continut_p)</h3></center> 
	<div id="c1">
		Text 1
	</div>
	<div id="c2">
		Text 2
	</div>
	<div id="c3">
		<center> Sfarsit continut principal </center>
	</div>
  </div>

Realizarea meniurilor utilizand CSS

Vom modifica vechiul meniu folosindu-ne de CSS

.pag_centr #meniu {
	float: left;
	margin: 0px -3px 0px 0px;
	/*width: 12em;*/
	width: 110px;
	height: 400px;
	padding: 25px 25px;
	background-color: LightGrey;
}

.pag_centr #meniu ul {
	margin: 15px 0 15px 0;
	padding: 0;
	list-style: none;
	border: 0;
}
.pag_centr #meniu li {
	text-align: center;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	width: 100px;
	margin: 0;
	padding: 0;
	font: 10px/15px "Lucida Sans Unicode", Verdana, sans-serif;
	color: #000;
	background: #FFF;
}
.pag_centr #meniu li a {
	display: block;
	font-weight: normal;
	padding: 0;
	border-left: 1px solid #000;
	border-right:1px solid #000;
	background: #FFF;
	color: #000;
	text-decoration: none;
	width: 100px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 100px;
}

.pag_centr #meniu li a:hover {
	font-weight: normal;
	background: #999;
	color: #000;
	text-decoration: none;
}
.pag_centr #meniu h3 {
	font-size: 120%;
	text-decoration: underline;
	background-image: none;
	text-align: center;
	padding: 0;
}

.pag_centr #continut_p {
	margin: 0px 0px 0px 0px;
	padding-top: 15px; 
	/*zoom: 1;*/
	background-color: Lavender ; 
} 
.pag_centr #zona_jos {
	padding: 0 10px;
	background-color: YellowGreen;
} 
.pag_centr #zona_jos p {
	margin: 0; 
	padding: 10px 0;
}

/* Diferite resurse */
.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
a:link {
	color: Red
}
a:visited {
	color: Blue; font-size: 12px;
}
--> 
</style>
</head>
<body class="pag_centr">
<div id="continut">
  <div id="antet">
    <h1><strong><center>Utilizarea CSS pentru desig-ul paginilor WEB</center></strong></h1>
    <h1><center> Antet (antet) </center></h1>
  </div>
  <div id="meniu"> 
    <div align="center">
    <center> Meniu (meniu) </center>
     <ul>
      <li><a href="#">Meniu 1</a></li>
      <li><a href="#">Meniu 2</a></li>
      <li><a href="#">Meniu 3</a></li>
      <li><a href="#">.</a></li>
      <li><a href="#">.</a></li>
      <li><a href="#">.</a></li>
      <li><a href="#">Meniu n</a></li>
      </ul>
    </div>
    
  </div>
  <div id="continut_p">
    <center><h3> Continut principal (continut_p) </h3></center><br>
  </div>
	<br class="clearfloat" /> 	
					
   <div id="zona_jos">
    <p> Zona de jos (zona_jos) </p>
  </div>
</div>
</body>
</html>

Realizarea meniurilor orizontale utilizand CSS

Vom adauga acum, folosindu-ne de CSS, un meniu orizontal.

h1 {
	padding:0px;
	font-size:18px;
	line-height:2px;
	font-weight:5;
	color:#ccc;
	}
.pag_centr #continut {
	/*width: 60em;*/
	width: 850px;
	/*1 em este echivalent cu  font-size-ul fontului curent.*/
	margin: 20 auto ; 
	border: 1px solid #000;
	text-align: left; 
	background-color: WhiteSmoke;
} 
.pag_centr #antet {
	padding: 0 10px; 
	background-color: OliveDrab;
} 
.pag_centr #antet h1 {
	margin: 0;
	padding: 15px 0; 
}

.pag_centr #meniu {
	float: left;
	margin: 0px -3px 0px 0px;
	/*width: 12em;*/
	width: 110px;
	height: 400px;
	padding: 25px 25px;
	background-color: LightGrey;
}

.pag_centr #continut_p {
	margin: 0px 0px 0px 0px;
	padding-top: 0px;
	width: 800px 
	/*zoom: 1;*/
	background-color: Lavender ; 
} 
.pag_centr #zona_jos {
	padding: 0 10px;
	background-color: YellowGreen;
} 
.pag_centr #zona_jos p {
	margin: 0; 
	padding: 10px 0;
}

#meniu_h {
	height:16px;
	list-style:none;
	text-transform:uppercase;
	font-size:12px;
	margin:0;
	padding:0;
	position:relative;
	background-color: #D0D0D0;
}	
a {
	color:#09c;
	font-size:12px;
	text-decoration:none;
	font-weight:normal;
	font-family:verdana, arial, helvetica, sans-serif;
	}
    A:link {color: #000fff; font-size: 8pt; font-family: arial, helvetica, sans-serif; text-decoration:none;}
    A:visited {color: #0000ff; font-size: 8pt; font-family: arial, helvetica, sans-serif; text-decoration:none;}
    A:hover{color: #ff0000; font-size: 8pt; font-family: arial, helvetica, sans-serif; text-decoration:none;}
       
#meniu_h li
{
	width:220px;
	height:18px;
	position:relative;
	float:left;
	background-color: #D0D0D0;
	border-top: 1px solid #000;
	border-bottom:1px solid #000;	
	border-left: 1px solid #000;
	border-right:1px solid #000;
}

#meniu_h li a:hover
{
	height:15px;
	width:228px;
	font-size:12;
	text-indent:0px;
	background-color: #7EBBDB;
}

/* Diferite resurse */
.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
a:link {
	color: Red
}
a:visited {
	color: Blue; font-size: 12px;
}
--> 
</style>
</head>
<body class="pag_centr">
<div id="continut">
  <div id="antet">
    <h1><strong><center>Utilizarea CSS pentru plasarea meniurilor in pagini WEB</center></strong></h1>
    <h1><center> Antet (antet) </center></h1>
  </div>
  <div id="meniu"> 
    <div align="center">
    <center> Meniu (meniu) </center>
     <ul>
      <li><a href="#">Meniu 1</a></li>
      <li><a href="#">Meniu 2</a></li>
      <li><a href="#">Meniu 3</a></li>
      <li><a href="#">.</a></li>
      <li><a href="#">.</a></li>
      <li><a href="#">.</a></li>
      <li><a href="#">Meniu n</a></li>
      </ul>
    </div>
    
  </div>
  <div id="continut_p">
           <ul id="meniu_h">
            <tr><td><li><a href="#">   Facultatea de Inginerie    </a></li>
            <li><a href="#">   Facultatea de Litere    </a></li>
            <li><a href="#">   Facultatea de st.Economice    </a></li>
  		</ul> 
    <center><h3> Continut principal (continut_p) </h3></center><br>
  </div>
	<br class="clearfloat" /> 	
								
   <div id="zona_jos">
    <p> Zona de jos (zona_jos) </p>
  </div>
</div>
</body>
</html>

Realizarea meniurilor dinamice utilizand CSS

In cazul unor pagini web complexe, cu multe optiuni, se utilizeaza meniuri dinamice, meniuri care permit inserarea unui numar mare de optiuni. Una din metodele des utilizate pentru realizarea meniurilor dinamice este utilizarea CSS.
Sa realizam un meniu dinamic cu complexitate redusa.

Fisierul sursa pagina_v4.html:

<body>
	<div class="container">
      <div class="content">
       <h2> <center><br> Meniu dinamic </center> </h2>
    	 <div class="meniu_principal">
        	<ul>
            	<li><a href="#">Pagina1</a>
                
               		<ul>
                    	<li><a href="#">Pagina 1.1</a></li>
                        <li><a href="#">Pagina 1.2</a></li>
                        <li><a href="#">Pagina 1.3</a></li>
                    </ul>
               	</li>
                <li><a href="#">Pagina2</a>
                
               		<ul>
                    	<li><a href="#">Pagina 2.1</a></li>
                        <li><a href="#">Pagina 2.2</a></li>
                    </ul>
                 </li> 
                 <li><a href="#">Pagina3</a>
                 
                 	<ul>
                    	<li><a href="#">Pagina 3.1</a></li>
                        <li><a href="#">Pagina 3.2</a></li>
                        <li><a href="#">Pagina 3.3</a></li>
                 	</ul>
                 
                 </li>
                 <li><a href="#">Pagina4</a></li>
                 <li><a href="#">Pagina5</a></li>
                 <li><a href="#">Pagina6</a></li>
        	</ul>
        </div>
   </div> 
<div class="continut_p">
 <h2>Continut pagina</h2>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div> 
</body>
</html>

Fisierul sursa style_meniu.css:

@charset "utf-8";
/* CSS Document */

html,body{
	background-image: url(main_blue_bg.jpg);
}
body{
	behavior: url(csshover.htc);  /*   SCRIPT PENTRU  IE6 DEOARECE IE6 nu stie unele comenzi de ex: li:hover sau a:hover ul    */
}

.container{
	width:850px;
	margin:0 auto;
	height:auto !important;
	min-height:75%;
	height:75%;
	background-attachment: scroll;
	/*background-image: url(midlle_bg.jpg);*/
	background-color:#808080;
	background-repeat: repeat-y;
	position:relative;
}
.meniu_principal{
	width:850px;
	height:35px;
	margin:0;
	padding:0;
	position:relative;
	background-color:#6633CC;
}
.meniu_principal li{
	display:block;
	float:left;
	width:120px;
	line-height:35px;
	padding-left:15px;
}
.meniu_principal li a{
	color:#FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
}
.meniu_principal li a:hover{
	text-decoration:underline;
}
.meniu_principal li:hover ul,
.meniu_principal li a:hover ul{
	display:block;
}
.meniu_principal li ul{
	display:none;
	position:absolute;
	height:35px;
	top:35px;
	left:0;
	background-color:#FFFFFF;
	width:850px;
	margin:0;
	padding:0;
}

.meniu_principal li ul li{
	color:#000099;
	font-weight:bold;
	padding-left:25px;
}

.meniu_principal li ul li a{
	color:#000099;
	font-weight:bold;
	padding-left:25px;
}
.content{
	width:850px;
	position:relative;
}
.continut_p{
	width:850px;
	background-color:#D3D3D3;
}

#menu li:hover ul,
#menu  a:hover ul{
	display:block;
}

Fisierul sursa csshover.htc:

<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 *	Whatever:hover - V1.42.060206 - hover & active
 *	------------------------------------------------------------
 *	(c) 2005 - Peter Nederlof
 *	Peterned - http://www.xs4all.nl/~peterned/
 *	License  - http://creativecommons.org/licenses/LGPL/2.1/
 *
 *	Whatever:hover is free software; you can redistribute it and/or
 *	modify it under the terms of the GNU Lesser General Public
 *	License as published by the Free Software Foundation; either
 *	version 2.1 of the License, or (at your option) any later version.
 *
 *	Whatever:hover is distributed in the hope that it will be useful,
 *	but WITHOUT ANY WARRANTY; without even the implied warranty of
 *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *	Lesser General Public License for more details.
 *
 *	Credits and thanks to:
 *	Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	------------------------------------------------------------
 */

var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
	onhover:{on:'onmouseover', off:'onmouseout'},
	onactive:{on:'onmousedown', off:'onmouseup'}
}

try {
			var rules = (currentSheet = sheet).rules, l = rules.length;
			for(var j=0; j<l; j++) parseCSSRule(rules[j]);
		} catch(securityException){}
	}

function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!csshoverReg.test(select) || !style) return;

var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
		var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
		var affected = select.replace(/:(hover|active).*$/, '');
		var elements = getElementsBySelect(affected);
		if(elements.length == 0) return;

currentSheet.addRule(newSelect, style);
		for(var i=0; i<elements.length; i++)
			new HoverElement(elements[i], className, activators[pseudo]);
	}

function unhookHoverEvents() {
		for(var e,i=0; i<hoverEvents.length; i++) {
			e = hoverEvents[i]; 
			e.node.detachEvent(e.type, e.handler);
		}
	}

Sa realizam un meniu dinamic cu complexitate ridicata.

Fisierul sursa pagina_v5.html:

<!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=utf-8" />
<title>INDEX</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body><br><br>
  <div class="container">
    <div class="header">
    <center><h1> Utilizarea CSS pentru realizarea meniurilor dinamice</h1></center>
    </div>
    <div class="content">
      <div class="contentTop">
        <div class="contentMenu">
          <ul id="menu">
            <li id="item1"><a href="#">   Facultatea de Inginerie    </a>
              <ul>
                <li class="level2"><a href="">Inginerie Electrica</a>
                  <ul class="level3_ul">
                    <li class="level3"><a href="">Calculatoare</a></li>
                    <li class="level3"><a href="">A.I.A</a></li>
                    <li class="level3"><a href="">I.S.E</a></li>
                  </ul>
                </li>
                <li class="level2"><a href="">Inginerie Mecanica</a>
                  <ul class="level3_ul">
                    <li class="level3"><a href="">Mecatronica</a></li>
                    <li class="level3"><a href="">T.C.M</a></li>
                    <li class="level3"><a href="">Inginerie economica</a></li>
                    <li class="level3"><a href="">Design industrial</a></li>                   
                  </ul>
                </li>
                <div class="bottom"></div>
              </ul>
            </li>
            <li id="item2"><a href="">   Facultatea de Stiinte si Litere   </a>
              <ul>
                <li class="level2"><a href="">Stiinte</a></li>
                   <ul class="level3_ul">
                    <li class="level3"><a href="">Informatica</a></li>
                    <li class="level3"><a href="">Matematica-Informatica</a></li>
                  </ul>
                </li>
                <li class="level2"><a href="">Litere</a></li>
                   <ul class="level3_ul">
                    <li class="level3"><a href="">Istorie</a></li>
                    <li class="level3"><a href="">Limba si literatura engleza</a></li>
                    <li class="level3"><a href="">Relatii internationale</a></li>
                    <li class="level3"><a href="">Limbi moderne aplicate</a></li>                   
                  </ul>
                </li>
                <div class="bottom"></div>
              </ul>
            </li>
            <li id="item3"><a href="">   Facultatea de Stiinte Ecnomice   </a>
              <ul>
                <li class="level2"><a href="">Management</a>
                  <ul class="level3_ul">
                      <li class="level3"><a href="">C.I.G</a>
                      <li class="level3"><a href="">Finante Banci</a></li>
                      <li class="level3"><a href="">E.C.T.S</a></li>
                     </ul>
                    </li>
                <li class="level2"><a href="">Administratie publica</a>
                     <ul class="level3_ul">
                      <li class="level3"><a href="">A.P.</a>
                      <li class="level3"><a href="">Drept</a></li>
                   </ul>
                </li>
                <div class="bottom"></div>
              </ul>
            </li>
            <li id="item4"><a href="">   Masterate   </a>
              <ul>
                <li class="level2"><a href="">Facultatea de Inginerie</a>
                  <ul class="level3_ul">
                    <li class="level3"><a href="">Managementul energiei</a></li>
                    <li class="level3"><a href="">Grafica si design industrial</a></li>
                  </ul>
                </li>
                <li class="level2"><a href="">Stiinte Economice</a>
                   <ul class="level3_ul">
                    <li class="level3"><a href="">Managementul afacerilor</a></li>
                    <li class="level3"><a href="">Managementul proiectelor</a></li>
                  </ul>
                </li>
                <div class="bottom"></div>
              </ul>
            </li>
            <li id="item5"><a href="">   Despre UPM   </a>
              <ul>
                <li class="level2"><a href="">Misiune</a>
                  <ul class="level3_ul">
                    <li class="level3"><a href="">Invatamant</a></li>
                    <li class="level3"><a href="">Cercetare</a></li>
                  </ul>
                </li>
                <li class="level2"><a href="">Baza materiala</a></li>
                <li class="level2"><a href="">Publicatii</a></li>
                <li class="level2"><a href="">Evenimente</a></li>
                <div class="bottom"></div>
              </ul>
            </li>
            <li id="item6"><a href="">   Contact   </a>
              <ul>
                <li class="level2"><a href="">NET</a>
                  <ul class="level3_ul">
                    <li class="level3"><a href="">Pagina web</a></li>
                    <li class="level3"><a href="">Mail</a></li>
                  </ul>
                </li>
                <li class="level2"><a href="">Telefoane</a></li>
                <div class="bottom"></div>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <div class="contentMidle">
        <div class="contentLeft">
          <div class="mainContent"><br>
          <h1>O UNIVERSITATE PENTRU COMUNITATE </h1>
	 De la fondarea sa in anul 1960, asigurandu-si continuitatea institutionala si permanenta culturala 
in ciuda a numeroase constrangeri si obstacole, Universitatea "UMFST", la inceput de mileniu, 
se prezinta in deplina sa maturitate si reputatie ca o autentica si generoasa "Universitate pentru comunitate".
        </div>
        </div>
        <div class="contentRight"><center>  <br><br> <h3> UMFST-Targu Mures </h3><br><img src="../../../Images/logo_upm.gif"></div>
      </div>
    </div>
    <div class="clear" style="height:100px;"></div>
    <div class="footer">
    </div>
  </div>
</body>
</html>

Fisierul sursa style.css:

@charset "utf-8";
/* CSS Document */
@import url(contentMenu.css);

html{
	margin:0;
	padding:0;
	height:100%; /* needed for container min-height */
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000000;
}
body{
	background-attachment: scroll;
	background-image: url(main_blue_bg.jpg);
	background-repeat: repeat-x;
	height:100%;
	background-color: #8EBBDB;
}
body{
	behavior: url(csshover.htc);
}
form{
	margin:0;
	padding:0;
}
*{
	margin:0;
	padding:0;
}
.container{
	width:900px;
	margin:0 auto;
	height:auto !important;
	min-height:75%;
	height:85%;
	background-attachment: scroll;
	background-image: url(midlle_bg.jpg);
	background-repeat: repeat-y;
	position:relative;
}
.header{
	height:70px;
	background-attachment: scroll;
	background-color: OliveDrab;
	background-repeat: repeat-x;
	background-position:left top;
}
.header h1 {
	margin: 0;
	padding: 10px; 
	font-size:18px;
	color:#ffffff;
}

/*****    CONTENT   **************************/
.content{
	width:900px;
	position:relative;
}
.contentTop{
}
.contentMidle{
	padding-left:20px;
	width:880px;
}
.contentLeft{
	width:590px;
	float:left;
	padding-left:20px;
}
.mainContent{
	width:540px;
}

.contentRight{
	width:270px;
	float:left;
}
.mainContent H1,
.mainContent_home H1{
	color:#F27C08;
	font-size:18px;
	letter-spacing:-1px;
	font-weight:normal;
	padding-bottom:5px;
}

Fisierul sursa "contentMenu.css" pentru definirea meniului dinamic fiind:

@charset "utf-8";
/* CSS Document */

.contentMenu{
	width:900px;
}
#menu {
	height:16px;
	list-style:none;
	text-transform:uppercase;
	font-size:12px;
	margin:0;
	padding:0;
	position:relative;
	background-color: #D3D3D3;
}	
a {
	color:#09c;
	font-size:12px;
	text-decoration:none;
	font-weight:400;
	font-family:verdana, arial, helvetica, sans-serif;
	}
    A:link {color: #000fff; font-size: 8pt; font-family: arial, helvetica, sans-serif; text-decoration:none;}
    A:visited {color: #0000ff; font-size: 8pt; font-family: arial, helvetica, sans-serif; text-decoration:none;}
    A:hover{color: #ff0000; font-size: 8pt; font-family: arial, helvetica, sans-serif; text-decoration:none;}

/***  ITEM 1  ***/

#menu li#item1,
#menu li#item1_active{
	width:180px;
	height:16px;
	display:block;
	position:relative;
	float:left;
	background-color: #8EBBDB;
}

#menu li#item1:hover a,                                  
#menu li#item1_active a{
	display:block;
	height:16px;
	font-size:12;
	text-indent:0px;
	background-color: #D3D3D3;
}
#menu li#item1 ul,
#menu li#item1_active ul{
	position: absolute;
	width:220px;
	list-style:none;
	top:16px;
	left:0px;
}
#menu li#item1 ul li ul.level3_ul,
#menu li#item1_active ul li ul.level3_ul{
	position: relative;
	top:0;
	left:0;
	border:0;
	width:220px;
}

/**  ITEM 2   ****/
#menu li#item2,
#menu li#item2_active{
	width:200px;
	display:block;
	height:16px;
	position:relative;
	float:left;
	background-color: #8EBBDB;	
}

#menu li#item2:hover a,                                        
#menu li#item2_active a{
	background-attachment: scroll;
	display:block;
	height:16px;
	font-size:12;
	text-indent:0px;
	background-color: #D3D3D3;
}
#menu li#item2 ul,
#menu li#item2_active ul{
	position: absolute;
	width:220px;
	z-index: 10;
	list-style:none;
	top:16px;
	left:0px;
}
#menu li#item2 ul li ul.level3_ul,
#menu li#item2_active ul li ul.level3_ul{
	position: relative;
	top:0;
	left:0;
	border:0;
	width:220px;
}

/**  ITEM 3   ****/
#menu li#item3,
#menu li#item3_active{
	width:200px;
	display:block;
	height:16px;
	position:relative;
	float:left;
	background-color: #8EBBDB;
}

#menu li#item3:hover a,                                            
#menu li#item3_active a{
	background-attachment: scroll;
	display:block;
	height:16px;
	font-size:12;
	text-indent:0px;
	background-color: #D3D3D3;
}
#menu li#item3 ul,
#menu li#item3_active ul{
	position: absolute;
	width:220px;
	z-index: 10;
	list-style:none;
	top:16px;
	left:0px;
}
#menu li#item3 ul li ul.level3_ul,
#menu li#item3_active ul li ul.level3_ul{
	position: relative;
	top:0;
	left:0;
	border:0;
	width:220px;
}

/**  ITEM 4   ****/
#menu li#item4,
#menu li#item4_active{
	width:106px;
	display:block;
	height:16px;
	position:relative;
	float:left;
	background-color: #8EBBDB;
}

#menu li#item4:hover a,                                    
#menu li#item4_active a{
	display:block;
	height:16px;
	font-size:12;
	text-indent:0px;
	background-color: #D3D3D3;
}
#menu li#item4 ul,
#menu li#item4_active ul{
	position: absolute;
	width:220px;
	z-index: 10;
	list-style:none;
	top:16px;
	left:0px;
}
#menu li#item4 ul li ul.level3_ul,
#menu li#item4_active ul li ul.level3_ul{
	position: relative;
	top:0;
	left:0;
	border:0;
	width:219px;
}

/**  ITEM 5   ****/
#menu li#item5,
#menu li#item5_active{
	width:109px;
	display:block;
	height:16px;
	position:relative;
	float:left;
	background-color: #8EBBDB;
}

#menu li#item5:hover a,                                                  
#menu li#item5_active a{
	display:block;
	height:16px;
	font-size:12;
	text-indent:0px;
	background-color: #D3D3D3;
}
#menu li#item5 ul,
#menu li#item5_active ul{
	position: absolute;
	width:220px;
	z-index: 10000;
	list-style:none;
	top:16px;
	left:-110px;
}
#menu li#item5 ul li ul.level3_ul,
#menu li#item5_active ul li ul.level3_ul{
	position: relative;
	top:0;
	left:0;
	border:0;
	width:219px;
}

/**  ITEM 6   ****/
#menu li#item6,
#menu li#item6_active{
	width:103px;
	display:block;
	height:16px;
	position:relative;
	float:left;
	background-color: #8EBBDB;
}

#menu li#item6:hover a,                                                  
#menu li#item6_active a{
	display:block;
	height:16px;
	font-size:12;
	text-indent:0px;
	background-color: #D3D3D3;
}
#menu li#item6 ul,
#menu li#item6_active ul{
	position: absolute;
	width:220px;
	z-index: 10;
	list-style:none;
	top:16px;
	left:-114px;
}
#menu li#item6 ul li ul.level3_ul,
#menu li#item6_active ul li ul.level3_ul{
	position: relative;
	top:0;
	left:0;
	border:0;
	width:219px;
}

#menu li:hover ul,
#menu  a:hover ul{
	display:block;
}

/*submeniu ul */

#menu li ul{
	display: none;
	position: absolute;
	width:224px;
	z-index: 10;
	color:#000000;
	list-style:none;
/*	margin-bottom:-8px;*/

}
#menu  li.level2 ul.level3_ul{
	position:relative;
	background:#8EBBDB;
}

div.bottom{
	width:220px;
	height:8px;
	display:block;

}
html .bottom{
	width:220px;
	height:8px;
	display:block;

}
#menu li#item1 ul li.level2,#menu li#item1_active ul li.level2,#menu li#item1_active ul li.level2_active,
#menu li#item2 ul li.level2,#menu li#item2_active ul li.level2,#menu li#item2_active ul li.level2_active,
#menu li#item3 ul li.level2,#menu li#item3_active ul li.level2,#menu li#item3_active ul li.level2_active,
#menu li#item4 ul li.level2,#menu li#item4_active ul li.level2,#menu li#item4_active ul li.level2_active,
#menu li#item5 ul li.level2,#menu li#item5_active ul li.level2,#menu li#item5_active ul li.level2_active{
	display:block;
	padding-top:5px;
	background-color:#FFFF00;
	border-left:0px solid #E2E2E2;
	border-right:0px solid #E2E2E2;
}
#menu li#item6 ul li.level2,#menu li#item6_active ul li.level2,#menu li#item6_active ul li.level2_active{
	display:block;
	padding-top:5px;
	background-color:#FFFF00;
	border-left:1px solid #E2E2E2;
	border-right:1px solid #E2E2E2;
}
#menu li#item1 ul li.level2 a,
#menu li#item2 ul li.level2 a,
#menu li#item3 ul li.level2 a,
#menu li#item4 ul li.level2 a,
#menu li#item5 ul li.level2 a,
#menu li#item6 ul li.level2 a{
	list-style:none;
	background-color:#FFFF00;
	background-image:none;
	color:#325C91;
	text-decoration:none;
	font-size:11px;
	font-weight:bold;
	height:auto;
	padding-left:15px;
	padding-top:5px;

}
#menu li#item1_active ul li.level2 a,#menu li#item1_active ul li.level2_active a,
#menu li#item2_active ul li.level2 a,#menu li#item2_active ul li.level2_active a,
#menu li#item3_active ul li.level2 a,#menu li#item3_active ul li.level2_active a,
#menu li#item4_active ul li.level2 a,#menu li#item4_active ul li.level2_active a,
#menu li#item5_active ul li.level2 a,#menu li#item5_active ul li.level2_active a,
#menu li#item6_active ul li.level2 a,#menu li#item6_active ul li.level2_active a{
	list-style:none;
	background-color:#FFFF00;
	background-image:none;
	color:#325C91;
	text-decoration:none;
	font-size:11px;
	font-weight:bold;
	height:auto;
	padding-left:15px;
	padding-top:5px;
}
#menu li.level3{
	display:block;
	padding-bottom:3px;
	background-color:#FFFF00;
	border-right:0px solid #E2E2E2;
	
}
#menu li#item1 ul li.level3 a,#menu li#item1_active ul li.level3 a,
#menu li#item2 ul li.level3 a,#menu li#item2_active ul li.level3 a,
#menu li#item3 ul li.level3 a,#menu li#item3_active ul li.level3 a,
#menu li#item4 ul li.level3 a,#menu li#item4_active ul li.level3 a,
#menu li#item5 ul li.level3 a,#menu li#item5_active ul li.level3 a,
#menu li#item6 ul li.level3 a,#menu li#item6_active ul li.level3 a{
	list-style:none;
	background-color:#FFFF00;
	background-image:none;
	color:#8A8A8A;
	text-decoration:none;
	font-size:11px;
	font-weight:bold;
	height:auto;
	padding-top:5px;
	padding-left:23px;
}
ul#menu li ul li ul{
	position:relative;
	
}

Utilizare HTML CSS Bootstrap:

Meniu dinamic

<html>
<head> 
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Meniu dinamic</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="slideshow-container">
<font color="red" size="4"> Meniu dinamic Web responsive</h3> </font>
  <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">UMFST</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Produse<span class="caret"></span></a>
          <ul class="dropdown-menu">
            	<li><a href="#" >Produse 1-1</a></li>
            	<li><a href="#" >Produse 1-2</a></li>
            	<li><a href="#" >Produse 1-3</a></li>
		<li><a href="#" >Produse 1-4</a></li>
          </ul>
        </li>
	<li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Noutati<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Noutati 2-1</a></li>
            <li><a href="#">Noutati 2-2</a></li>
            <li><a href="#">Noutati 2-3</a></li>
          </ul>
        </li>
        <li><a href="#">Despre noi</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
</body>
</html>

Pagina web responsive

<!DOCTYPE html>
<html>
    <head>
        <title>Requirements</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <style>
            .row > div {
                padding: 10px;
                background-color: yellow;
                border: 1px solid teal;
            }
        </style>
    </head>
<body>
  <div class="container">
	<h5><font color="OliveDrab">Utilizare Bootstrap</font></h4>
    <div class="row">
        <div class="col-lg-3 col-sm-6">
		Text1
        </div>
        <div class="col-lg-3 col-sm-6">
		Text2
        </div>
        <div class="col-lg-3 col-sm-6">
		Text3
        </div>
        <div class="col-lg-3 col-sm-6">
		Text4
        </div>
	<div class="col-lg-3 col-sm-6">
		Text5
        </div>
	<div class="col-lg-3 col-sm-6">
		Text6         
	</div>
	<div class="col-lg-3 col-sm-6">
		Text7
	</div>
	<div class="col-lg-3 col-sm-6">
		Text8
	</div>							
    </div>
  </div>
</body>
</html>

    Bootstrap's grid model

    Animatie CSS utilizand Django

     Schitare pagina web

<!DOCTYPE html>
<html>
    <head>
        <title>Pabina web</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="layout.css" rel="stylesheet" type="text/css" />
    </head>
<body>
<center> 
<table border=0 bgcolor="whiteSmoke" width="100%" >
 <tr>
  <td bgcolor="OliveDrab" align="center" valign="center">
    <h1> Pagina web </h1>
  </td>
 </tr>
 <tr>
  <td>
   <table width="100%">
    <tr>
     <td bgcolor="LightGrey" width="100" Align="left" Valign="top">
      <font color="Red">
	<div id="menu">	
	 <ul>
	   <li><strong><a href="pag0.html" target="content">Pagina 0</a></strong></li>
	    <li><strong><a href="pag1.html" target="content">Pagina 1</a></strong></li>
	    <li><strong><a href="pag2.html" target="content">Pagina 2</a></strong></li>
	    <li><strong><a href="pag3.html" target="content">Pagina 3</a></strong></li>
	    <li><strong><a href="pag_css_v1.html" target="content">Web responsive </a></strong></li>
	 </ul>
	</div>
      </font>
     </td>
     <td bgcolor="Lavender"  height="100%">
      <font color="Blue">
	<div id="ifr">
		<iframe src="pag0.html" name="content" width="100%" height="100%"></iframe>
	</div>
      </font>
     </td>
    </tr>
   </table
  </td>
 </tr>
 <tr>
  <td bgcolor="OliveDrab" align="right">
   <font color="yellow" size="3" >Traian Turc      </font>
  </td>
 </tr>
</table>
</center>  
</body>
</html>

"layout.css" fiind

@media (min-width: 600px) {
	body {
		background-color: Azure;
	}
	 div[id="ifr"] {
		 height: 60vh;
	}
	 div[id="menu"] {
		 height: 45vh;
	}
}
 @media (max-width: 599px) {
	 body {
		 background-color: DarkSeaGreen;
	}
	 div[id="ifr"] {
		 height: 70vh;
	}
	 div[id="menu"] {
		 height: 55vh;
	}
}
 h1 {
	 font-size: 28px;
	 text-decoration: none;
	 background-image: none;
	 text-align: center;
	 color: Yellow;
	 padding: 0;
}
 menu {
	 float: left;
	 margin: 0 -3px 0 0;
	 width: 110px;
	 padding: 5px 5px;
}
 #menu ul {
	 margin: 15px 0 15px 0;
	 padding: 0;
	 list-style: none;
	 border: 0;
}
 #menu li {
	 text-align: center;
	 border-top: 1px solid #000;
	 border-bottom: 1px solid #000;
	 width: 100px;
	 margin: 0;
	 padding: 0;
	 font: 10px/15px "Lucida Sans Unicode", Verdana, sans-serif;
	 color: #000;
	 background: #fff;
}
 #menu li a {
	 display: block;
	 font-weight: normal;
	 padding: 0;
	 border-left: 1px solid #000;
	 border-right: 1px solid #000;
	 background: #fff;
	 color: #000;
	 text-decoration: none;
	 width: 100px;
}
 #menu li a:hover {
	 font-weight: normal;
	 background: #999;
	 color: #000;
	 text-decoration: none;
}

Schitare pagina web utilizand meniu dinamic

<html>
<head> 
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Meniu dinamic</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="slideshow-container">
<font color="red" size="4"> Meniu dinamic Web responsive</h3> </font>
  <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">UMFST</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Pagini web<span class="caret"></span></a>
          <ul class="dropdown-menu">
         	<li><a href="pag0.html" target="content">Pagina 0</a></li>
        	<li><a href="pag1.html" target="content">Pagina 1</a></li>
		<li><a href="pag2.html" target="content">Pagina 2</a></li>
		<li><a href="pag3.html" target="content">Pagina 3</a></li>
          </ul>
        </li>
	<li><a href="pag_css_v1.html" target="content">Web responsive </a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
<div id="ifr">
	<iframe src="pag0.html" name="content" width="100%" height="450"></iframe>
</div>

</body>
</html>