А по-подробней пожалуйста. Я в CSS совсем
Расскажите как это все сделать пожалуйста. Очень надо.
/*----------------------------------------------------------------
Copyright:
Copyright (C) 2008 IceTheme. All Rights Reserved
License:
Copyrighted Commercial Software
Author:
IceTheme - http://wwww.icetheme.com
---------------------------------------------------------------- */
/*---------------
Main Nav
----------------*/
#main-nav{
height:56px;
margin:0;
width:970px;
position:relative;
overflow:visible;
clear:both;
background-repeat:no-repeat;
background-position:left;}
/* main menu ul or ol elment */
ul#nav{
display:block;
position: absolute;
list-style:none;
margin:0 0 0 10px;
z-index:5;
top:0;
left:0;
display:block;}
/* List items in main menu --[for non-javascript users this applies to submenus as well] */
ul#nav li {
background:url(../images/nav_border.png) no-repeat center right;
display:block;
list-style:none;
position:relative;
float:left;}
ul#nav li a,
#MainMenuSub a{
text-decoration:none;
display:block;
padding:5px 20px;}
/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
ul#nav li a{
margin:0;
float:left;
color:#fff;
text-decoration:none;
display:block;
font-size:1.3em;
font-family:Georgia, "Times New Roman", Times, serif;
padding:0 18px 9px;}
ul#nav li a span {
padding-top:9px;
display:block;}
ul#nav li li a span { display:inline; padding-top:0}
ul#nav li a span.sub {
display:block;
font-size:.7em;
padding-top:0;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
margin-top:3px;
color:#86B9DA;
letter-spacing:normal}
ul#nav li li a span.sub { display:inline; font-size:1em; margin-top:0;}
ul#nav li li a:hover span.sub { color:#fff}
/* All menu links on hover or focus */
ul#nav li a:hover, ul#nav li a:focus,
#MainMenuSub a:hover, #MainMenuSub a:focus,
ul#nav a.mainMenuParentBtnFocused, #MainMenuSub a.subMenuParentBtnFocused{
background:url(../images/nav_hover.png) repeat-x bottom ;
color:#FFF;}
/* sub menu links on hover or focus */
ul#nav li li a:hover, #nav li a:focus,
#MainMenuSub li a:hover, #MainMenuSub li a:focus,
#nav a.mainMenuParentBtnFocused, #MainMenuSub a.subMenuParentBtnFocused{
background-image:none;
color:#FFF;}
/* ----[ OLs ULs, LIs, and DIVs ]----*/
/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{
display:none;
position: absolute;
overflow:hidden;
/*the 2px left & right padding lets you have a 1px border
on the ul or ol inside since overflow is set to hidden*/
padding:0 2px;
margin:0 0 0 -1px;}
/* All ULs and OLs */
ul#nav ul, ul#nav ol,
#MainMenuSub ul, #MainMenuSub ol {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;}
ul#nav {
list-style: none;
line-height: 1em;
padding:0;}
/* All submenu OLs and ULs */
ul#nav ul,
#MainMenuSub ul {
left:0;
border-right-width:1px;
border-right-style:solid;}
ul#nav ul li a,
#MainMenuSub ul li a {
padding:0 40px 0 15px;
height:30px;
line-height:31px;
border-bottom-width:1px;
border-bottom-style:solid;}
#MainMenuSub li.parent a {
background:url(../images/nav_drop_arrow.png) no-repeat 96% 55%;}
#MainMenuSub li.parent a:hover {
background-image:url(../images/nav_drop_arrow_hover.png) }
#MainMenuSub li:hover {}
/* When the parent item is set to current or active */
ul#nav li#current a,
ul#nav li.active a {
color:#fff;
background:url(../images/nav_current.png) no-repeat bottom}
#MainMenuSub li#current a,
#MainMenuSub li.active a { color:#fff!important}
#MainMenuSub {
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:0;
overflow:visible;
z-index:1000000000; }
#MainMenuSub li{ list-style: none;}
/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
#nav li li{ float:none; }
#nav li li a{ /* Just submenu links*/
position:relative;
float:none;
font-size:1em;}
#nav li ul { /* second-level lists */
position: absolute;
width: 18em;
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin-top:45px;
}
/* third-and-above-level lists */
#nav li ul ul { margin: -1em 0 0 -1000em; }
#nav li:hover ul ul { margin-left: -1000em; }
/* lists nested under hovered list items */
#nav li:hover ul{ margin-left: 0; }
#nav li li:hover ul { margin-left: 18em; margin-top:-2.5em;}
/* extra positioning rules for limited noscript keyboard accessibility */
#nav li a:focus + ul { margin-left: 0; margin-top:45px }
#nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
#nav li li a:focus {left:0; margin-left:1000em; width:18em; margin-top:0;}
#nav li li li a:focus {left:0; margin-left: 2010em; width: 18em; margin-top:-1em;}
#nav li:hover a:focus{ margin-left: 0; }
#nav li li:hover a:focus + ul { margin-left: 18em; }
/*===========================///////////////////-===========================
OtherMenu
*===========================///////////////////-==========================*/
#othermenu_wrap{
clear:both;
padding:0;
margin-left:-2px;
position:relative;
overflow:visible;}
/* main menu ul or ol elment */
ul#othermenu {
display:block;
position: absolute;
list-style:none;
margin:0;
z-index:5;
top:0;
left:0;
display:block;}
/* List items in main menu --[for non-javascript users this applies to submenus as well] */
ul#othermenu li {
display:block;
list-style:none;
position:relative;
float:left;}
#OtherMenuSub{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:0;
overflow:visible;
z-index:1000000000; }
#OtherMenuSub li{
list-style: none;}
ul#othermenu li a,
#OtherMenuSub a{
text-decoration:none;
display:block;
width:182px;
font-size:1em;
letter-spacing:0.05em;
background: url(../images/othermenu_line.png) no-repeat bottom left;
color:#909090;
text-transform:uppercase;
padding:0 0 0 1px;
height:30px;
margin-top:-1px;
line-height:30px;}
ul#othermenu li a:hover{
color:#333;
background-position:bottom left;}
#OtherMenuSub a:hover{ background-image:none}
ul#othermenu li#current a,
ul#othermenu li.active a,
#OtherMenuSub li#current a {
color:#333}
ul#othermenu ul li#current a,
ul#othermenu ul li.active a,
#OtherMenuSub ul li#current a { background-image:none}
ul#othermenu li a span{
display:block;}
/* Just sub menu links */
ul#othermenu li li {
width:auto}
#OtherMenuSub a,
ul#othermenu li li a{
text-align:left;
text-transform:none;
font-size:1em;
background-image:none;
width:auto;
border-bottom:1px solid #E1E1D7;
letter-spacing:normal;}
ul#othermenu li a:hover,
#OtherMenuSub a:hover {
color:#333;}
#OtherMenuSub a {
padding:0 40px 0 20px;}
/* Parent Main Menu Links ---[javascript users only]*/
ul#othermenu li.parent a span,
#OtherMenuSub li.parent a {
background: url(../images/othermenu_arrow_parent.png) 95% 55% no-repeat;}
ul#othermenu li.parent a:hover span,
#OtherMenuSub li.parent a:hover {
background-image:url(../images/othermenu_arrow_parent_hover.png) }
ul#othermenu li.parent li a span,
#OtherMenuSub li.parent li a {
background: url(../images/othermenu_arrow_parent_2.png) 95% 55% no-repeat;}
ul#othermenu li.parent li a:hover span,
#OtherMenuSub li.parent li a:hover {
background-image:url(../images/othermenu_arrow_parent_2_hover.png) }
/* ----[ OLs ULs, LIs, and DIVs ]----*/
/* All submenu OLs and ULs */
ul#othermenu ol, ul#othermenu ul, #OtherMenuSub ul, #OtherMenuSub ol {
/*border around submenu goes here*/
border:1px solid #E1E1D7;
border-bottom:none;
left:0;
background:#F6F4F2}
/* All ULs and OLs */
ul#othermenu, ul#othermenu ul, ul#othermenu ol, #OtherMenuSub ul, #OtherMenuSub ol {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
ul#othermenu li li{ float:none; }
ul#othermenu li li a{ /* Just submenu links*/
position:relative;
float:none;
}
ul#othermenu li ul { /* second-level lists */
position: absolute;
width: 10em;
z-index:999999;
overflow:visible;
visibility:visible;
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
/* third-and-above-level lists */
ul#othermenu li ul ul { margin: -1em 0 0 -1000em; }
ul#othermenu li:hover ul ul { margin-left: -1000em; }
/* lists nested under hovered list items */
ul#othermenu li:hover ul{ margin-left: 186px; margin-top:-2.5em;}
ul#othermenu li li:hover ul { margin-left: 10em; }
/* extra positioning rules for limited noscript keyboard accessibility */
ul#othermenu li a:focus + ul { margin-left: 186px; margin-top:-2.5em; }
ul#othermenu li li a:focus + ul { left:186px; margin-left: 1010em; margin-top:-2.5em;}
ul#othermenu li li a:focus {left:186px; margin-left:1000em; width:10em; margin-top:-2.5em;}
ul#othermenu li li li a:focus {left:186px; margin-left: 2010em; width: 10em; margin-top:-2.5em;}
ul#othermenu li:hover a:focus{ margin-left: 0; }
ul#othermenu li li:hover a:focus + ul { margin-left: 10em; }
/*===========================///////////////////-===========================
Top Menu
===========================///////////////////-===========================*/
ul#topmenu {
margin:3px 0 0 6px;
float:left;}
ul#topmenu li{
list-style-type:none;
display:inline;
margin:0;
border-right:1px solid #C7C7C7}
ul#topmenu li a{
font-size:1em;
margin:0 7px;
font-size:.9em;
color:#1F648F;}
ul#topmenu li a:hover{}
ul#topmenu li a span {}
ul#topmenu li a:hover span {}
/*===========================///////////////////-===========================
Footer Links
===========================///////////////////-===========================*/
ul#footerlinks {
float:left;
width:100%;
margin:0 auto;
position:relative;
overflow:hidden;
text-align:center;
padding:0 0 12px;
margin:0 0 12px;
border-bottom:1px dashed #B2B2B2}
ul#footerlinks li{
list-style-type:none;
display:inline;
margin:0 0 0 15px;
border-right:1px dotted #A6A6A6}
ul#footerlinks li a{
margin-right:15px;
font-size:1em;
letter-spacing:0.05em;
text-transform:uppercase;
color:#888;}
ul#footerlinks li a:hover{
color:#222;
text-decoration:none;}
ul#footerlinks li#current a { color:#222}
/*===========================///////////////////-===========================
Footer Menu
===========================///////////////////-===========================*/
ul#footermenu {
float:right;
margin:0 50px 0 0; }
ul#footermenu li{
list-style-type:none;
float:left;
margin:0 0 0 10px;}
ul#footermenu li a{ margin-right:10px;}
03.02.2020, 18:49:47