?????? ???? ?? CSS ????? ????????????? ????????? ??? ????????? ????????? ????????? ??? ????????? ???????????? ???????. ???? ??????????? ????????, ?? ??????? ?? ?????? ?????????? ??? ?????? ???? ????? ???????????? ? ?????? ?????????.

?????????????????

??????? ???? ?? HTML+CSS3 ???.1
??????? ???? ?? HTML+CSS3
???.1

HTML

??? ?????? ?? ?????????? ??????????????? ?????? ??????. ???????? ????????, ??? ? ???????? ????????? ?????? ?????? ?????? ??????? ????????, ??? ????? ?????????????? ??? "???????????" ?????? ? ??????? ??? ?????? ????? ????? ??? ???????? ????????????? ???? ?????????.

???????? ???

CSS

????? CSS ??????? ???? ????? ????????????? ??? ????????? ?????????. ??? ?????? ?? ????????? ????? ??? ????? ???? ??? ??????? ????. ????? ?? ?????????? ????????? ???????? ?????, ???????? ?????? ? ???????? UL, ?? ??? ???? ?????. ??????? ?????????? ??????? ???????.

???????? ???
#menu {
width: 490px;
}
/*	???????? ???? */	
    ul
{	font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background: #ccc;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e9e9e9));
    background: -moz-linear-gradient(top, #fff, #e9e9e9);
    display: block;
    clear: left;
    float: left;
    padding: 0 15px;
    margin: 0 0 10px 0;
    -webkit-box-shadow: 0 0 2px #333;
    -moz-box-shadow: 0 0 2px #333;
    box-shadow: 0 0 2px #333;
    border: 1px solid #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px; }
/*	?????? ??????? */
    ul li
{	margin: 0;
    float: left;
    display: block;
    list-style: none; }
    /*	?????? ??????? ??????*/	
        ul li a
    {	padding: 10px;
        display: block;
        color: #666;
        text-decoration: none;
        text-shadow: 1px 1px 1px #fff; }
        ul li a:hover
    {	color: #000; }
        /*	?????? ??????? - ??????????  */
            ul li ul
        {	margin: 0 0 0 -15px;
            display: none;
            -webkit-border-top-left-radius: 0;
            -webkit-border-top-right-radius: 0;
            -moz-border-topleft-radius: 0;
            -moz-border-topright-radius: 0;
            border-top-left-radius: 0;
            border-top-right-radius: 0; }
            ul li:hover ul
        {	display: block;
            position: absolute; }
            /* 	?????? ??????? ?????? - ?????????? */
                ul li ul li
            {	clear: left; }

?????????? ?????

?? ?????? ???????? ????? ? ???????? ul, ??????? ????? ???????? ?? ???????? ????? ?????? ????.

? ?????????? ??? ??? ??????? ????? CSS ?????? ?????? ??? ??????? ????.

???????? ???
#menu {
width: 490px;
}
/*	???????? ???? */	
	ul
{	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: #ccc;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e9e9e9));
	background: -moz-linear-gradient(top, #fff, #e9e9e9);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9e9e9');
	display: block;
	clear: left;
	float: left;
	padding: 0 15px;
	margin: 0 0 10px 0;
	-webkit-box-shadow: 0 0 2px #333;
	-moz-box-shadow: 0 0 2px #333;
	box-shadow: 0 0 2px #333;
	border: 1px solid #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; }

/*	?????? ??????? */	
	ul li
{	margin: 0;
	float: left;
	display: block;
	list-style: none; }
	
	/*	?????? ??????? ??????*/	
		ul li a
	{	padding: 10px;
		display: block;
		color: #666;
		text-decoration: none;
		text-shadow: 1px 1px 1px #fff; }
		
		ul li a:hover
	{	color: #000; }
	
		/*	?????? ??????? - ??????????  */
			ul li ul
		{	margin: 0 0 0 -15px;
			display: none;
			-webkit-border-top-left-radius: 0;
			-webkit-border-top-right-radius: 0;
			-moz-border-topleft-radius: 0;
			-moz-border-topright-radius: 0;
			border-top-left-radius: 0;
			border-top-right-radius: 0; }
		
			ul li:hover ul
		{	display: block;
			position: absolute; }
				
			/* 	?????? ??????? ?????? - ?????????? */
				ul li ul li
			{	clear: left; }

/* ??????? ???? */

	.green, .green li ul
{	background: #78d526;
	background: -webkit-gradient(linear, left top, left bottom, from(#78d526), to(#4a9607));
	background: -moz-linear-gradient(top, #78d526, #4a9607);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#78d526', endColorstr='#4a9607'); }
	
	.green a
{	color: #fff;
	text-shadow: 0 -1px 1px #347812; }
	
	.green a:hover
{	color: #fff; }

/*	????????? ???? */

	.orange, .orange li ul
{	background: #fe9436;
	background: -webkit-gradient(linear, left top, left bottom, from(#fe9436), to(#da6d0c));
	background: -moz-linear-gradient(top, #fe9436, #da6d0c);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe9436', endColorstr='#da6d0c'); }
	
	.orange a
{	color: #fff;
	text-shadow: 0 -1px 1px #844915; }
	
	.orange a:hover
{	color: #fff; }

/*	?????????? ???? */

	.purple, .purple li ul
{	background: #dd37db;
	background: -webkit-gradient(linear, left top, left bottom, from(#dd37db), to(#901d8f));
	background: -moz-linear-gradient(top, #dd37db, #901d8f);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#dd37db', endColorstr='#901d8f'); }
	
	.purple a
{	color: #fff;
	text-shadow: 0 -1px 1px #6c0d77; }
	
	.purple a:hover
{	color: #fff; }

/*	??????? ???? */

	.red, .red li ul
{	background: #e01111;
	background: -webkit-gradient(linear, left top, left bottom, from(#e01111), to(#901d1d));
	background: -moz-linear-gradient(top, #e01111, #901d1d);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e01111', endColorstr='#901d1d'); }
	
	.red a
{	color: #fff;
	text-shadow: 0 -1px 1px #770d0d; }
	
	.red a:hover
{	color: #fff; }

/*	????? ???? */

	.blue, .blue li ul
{	background: #23a4ef;
	background: -webkit-gradient(linear, left top, left bottom, from(#23a4ef), to(#2272a0));
	background: -moz-linear-gradient(top, #23a4ef, #2272a0);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#23a4ef', endColorstr='#2272a0'); }
	
	.blue a
{	color: #fff;
	text-shadow: 0 -1px 1px #0d5877; }
	
	.blue a:hover
{	color: #fff; }

?? ?????? ???????????? ???? ??? ?????, ???? ??????????? ???? ??? ???????? ????????? ???????? ??????? ????. ??? ??? ??????? ?? CSS3 ??? ???????? ???????????, ??? ??? ??? ????? ??? ??? ?? ??????.

??????? ???? ?? HTML+CSS3 ???.2
??????? ???? ?? HTML+CSS3
???.2

?????????? ???? ???? ?? ????? ???? ??? ????? ??????.

????? ?????.