#nav { /*элемент с идентификатором nav4 - наш список*/
   padding:0; /*внутренние отступы все о*/
   margin:0; /*внешние отступы все 0*/
   list-style:none; /*задаем стиль отображения маркеров или нумерации для элементов списка - отобразить без маркера*/
   height:38px; /*высота*/
   background:#fff url(three_0__4.gif) repeat-x; /*фоновое изображение и путь к нему, растянуть (повторить) по ои x*/
   position:relative; /*способ позиционирования элемента - обычное положение элемента, дочерние элементы с абсолютным позиционированием будут позиционироваться относительно границ родителя*/
   z-index:500; /*задаем положение на z-оси, т.е. какой из элементов будет виден, если они наложатся друг на друга (чем выше значение тем элемент выше, как бы ближе к экрану монитора)*/
   font-family:arial, verdana, sans-serif; /*шрифт*/
}
#nav li.top { /*элемент li с классом top элемента с идентификатором nav4*/
   display:block; /*блочный элемент - элементы начинаются с новой строки, после элемента также добавляется перенос строки*/
   float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
   height:38px; /*высота*/
}
#nav li a.top_link { /*ссылка с классом top_link элемента li элемента с идентификатором nav4*/
   display:block; /*блочный элемент - элементы начинаются с новой строки, после элемента также добавляется перенос строки*/
   float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
   height:35px; /*высота*/
   line-height:33px; /*задаем высоту линии (интерлиньяж, межстрочный интервал) текста*/
   color:#ccc; /*цвет*/
   text-decoration:none; /*подчеркивание отсутствует*/
   font-size:11px; /*размер шрифта*/
   font-weight:bold; /*насыщенность шрифта - стандартный полужирный шрифт (значение = 700)*/
   padding:0 0 0 12px; /*внутренние отступы сверху, справа, снизу, слева*/
   cursor:pointer; /*задаем тип курсора - обычный в виде руки*/
   background: url(three_0__4.gif); /*фоновое изображение и путь к нему*/
}
#nav li a.top_link span { /*тег span ссылки с классом top_link элемента li элемента с идентификатором nav4*/
   float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
   display:block; /*блочный элемент - элементы начинаются с новой строки, после элемента также добавляется перенос строки*/
   padding:0 24px 0 12px; /*внутренние отступы сверху, справа, снизу, слева*/
   height:35px; /*высота*/
   background: url(three_0__4.gif) right top no-repeat; /*фоновое изображение и путь к нему, не растягивать (не повторять), отобразить справа сверху*/
}
#nav li a.top_link span.down { /*тег span с классом down ссылки с классом top_link элемента li элемента с идентификатором nav4*/
   float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
   display:block; /*блочный элемент - элементы начинаются с новой строки, после элемента также добавляется перенос строки*/
   padding:0 24px 0 12px; /*внутренние отступы сверху, справа, снизу, слева*/
   height:35px; /*высота*/
   background: url(three_0a__4.gif) no-repeat right top; /*фоновое изображение и путь к нему, не растягивать (не повторять), отобразить справа сверху*/
}
#nav li:hover a.top_link { /*ссылка с классом top_link элемента li элемента с идентификатором nav4 при наведении курсора*/
   color:#fff; /*цвет*/
   background: url(three_1__4.gif) no-repeat; /*фоновое изображение и путь к нему, не растягивать (не повторять)*/
}
#nav li:hover a.top_link span { /*тег span ссылки с классом top_link элемента li элемента с идентификатором nav4 при наведении курсора*/
   background:url(three_1__4.gif) no-repeat right top; /*фоновое изображение и путь к нему, не растягивать (не повторять), отобразить справа сверху*/
}
#nav li:hover a.top_link span.down { /*тег span с классом down ссылки с классом top_link элемента li элемента с идентификатором nav4 при наведении курсора*/
   background:url(three_1a__4.gif) no-repeat right top; /*фоновое изображение и путь к нему, не растягивать (не повторять), отобразить справа сверху*/
} /* стиль по умолчанию */ #nav li:hover { /*элемент li элемента с идентификатором nav4 при наведении курсора*/
   position:relative; /*способ позиционирования элемента - обычное положение элемента, дочерние элементы с абсолютным позиционированием будут позиционироваться относительно границ родителя*/
   z-index:200; /*задаем положение на z-оси, т.е. какой из элементов будет виден, если они наложатся друг на друга (здесь самое малое значение, т.е. он будет самым нижним для последующих*/
}
#nav li:hover ul.sub { /*список ul с классом sub элемента li элемента с идентификатором nav4 при наведении курсора*/
   left:1px; /*расстояние от левого края родителя*/
   top:38px; /*расстояние от верхнего края родителя*/
   background: #54a9a9; /*цвет фона*/
   padding:3px; /*внутренние отступы 3px*/
   border:1px solid #00202d; /*граница - толщина, насыщенность, цвет*/
   white-space:nowrap; /*как отображать пробелы - автоматический перевод игнорируется, текст отображается одной строкой (т.е. если ссылка из нескольких слов, как в примере, то они отобразятся в одну строку)*/
   width:120px; /* ширина элемента содержательной части (здесь два наших слова ссылки займут такую ширину с запасом, если у вас больше добавьте здесь и далее в соответствующих местах, если меньше - уменьшите, но думаю уменьшать не надо и так красиво и наглядно)*/
   height:auto; /*высота содержательной части элемента*/
   z-index:300; /*задаем положение на z-оси, т.е. какой из элементов будет виден, если они наложатся друг на друга (этот элемент выше предыдущего)*/
}
#nav li:hover ul.sub li { /*элемент li списока ul с классом sub элемента li элемента с идентификатором nav4 при наведении курсора*/
   display:block; /*блочный элемент - элементы начинаются с новой строки, после элемента также добавляется перенос строки*/
   height:20px; /*высота содержательной части элемента*/
   position:relative; /*способ позиционирования элемента - обычное положение элемента, дочерние элементы с абсолютным позиционированием будут позиционироваться относительно границ родителя*/
   float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
   width:118px; /* ширина элемента содержательной части (строку списка сделаем чуть меньше, чем список, для более корректного отображения, ведь границы еще есть)*/
   font-weight:normal; /*насыщенность шрифта - нормальное начертание шрифта (значение = 400)*/
}
#nav li:hover ul.sub li a { /*ссылка элемента li списока ul с классом sub элемента li элемента с идентификатором nav4 при наведении курсора*/
   display:block; /*блочный элемент - элементы начинаются с новой строки, после элемента также добавляется перенос строки*/
   font-size:11px; /*размер шрифта*/
   height:18px; /*высота содержательной части элемента*/
   width:118px; /* ширина элемента содержательной части*/
   line-height:18px; /*задаем высоту линии (интерлиньяж, межстрочный интервал) текста*/
   text-indent:5px; /*отступ красной строки*/
   color:#000; /*цвет*/
   text-decoration:none; /*подчеркивание отсутствует*/
   border:1px solid #54a9a9; /*граница - толщина, насыщенность, цвет*/
}
#nav li ul.sub li a.fly { /*ссылка с классом fly элемента li списока ul с классом sub элемента li элемента с идентификатором nav4*/
   background:#54a9a9 url(arrow.gif) 110px 6px no-repeat; /*цвет, фоновое изображение и путь к нему, расположение фоновой картинки по оси x 110px по оси y 6px, не растягивать (не повторять), этим добавляем картинку для пункта, в котором есть вложенный уровень*/
}
#nav li:hover ul.sub li a:hover {/*ссылка элемента li списока ul с классом sub элемента li элемента с идентификатором nav4 при наведении курсора*/
   background:#28868d; /*цвет фона*/
   color:#fff; /*цвет*/
   border-color:#00202d; /*цвет границы*/
}
#nav li:hover ul.sub li a.fly:hover {/*ссылка с классом fly элемента li списока ul с классом sub элемента li элемента с идентификатором nav4 при наведении курсора*/
   background:#28868d url(arrow_over.gif) 110px 6px no-repeat; color:#fff; /*цвет, фоновое изображение и путь к нему, расположение фоновой картинки по оси x 110px по оси y 6px, не растягивать (не повторять), цвет текста*/
}

/*ЗДЕСЬ НАСТРОЙКИ ДЛЯ ЭЛЕМЕНТОВ КАЖДОГО ИЗ ВЛОЖЕННЫХ УРОВНЕЙ*/

#nav li:hover li:hover ul,/*список ul элемента li элемента с идентификатором nav4 при наведении курсора 2й уровень*/
#nav li:hover li:hover li:hover ul,/*список ul элемента li элемента с идентификатором nav4 при наведении курсора 3й уровень*/
#nav li:hover li:hover li:hover li:hover ul,/*список ul элемента li элемента с идентификатором nav4 при наведении курсора 4й уровень*/
#nav li:hover li:hover li:hover li:hover li:hover ul {/*список ul элемента li элемента с идентификатором nav4 при наведении курсора 5й уровень(у нас только 4 уровня вложенности, поэтому эту строку можно удалить, если не планируете вложенность больше)*/
   left:115px; /*расстояние от левого края родителя*/
   top:-4px; /*расстояние от верхнего края родителя*/
   background: #54a9a9; /*цвет фона*/
   padding:3px; /*внутренние отступы 3px*/
   border:1px solid #00202d; /*граница - толщина, насыщенность, цвет*/
   white-space:nowrap; /*как отображать пробелы - автоматический перевод игнорируется, текст отображается одной строкой*/
   width:120px; /*ширина*/
   z-index:400; /*задаем положение на z-оси, т.е. какой из элементов будет виден, если они наложатся друг на друга*/
   height:auto; /*высота*/
}

/*ЗДЕСЬ НАСТРОЙКИ ДЛЯ ЭЛЕМЕНТОВ КАЖДОГО ИЗ ВЛОЖЕННЫХ УРОВНЕЙ, УБИРАЕМ ИХ ЗА ПРЕДЕЛЫ СТРАНИЦЫ, ЕСЛИ НЕ НАВЕДЕН КУРСОР*/

#nav ul,/*список ul элемента li элемента с идентификатором nav4*/
#nav li:hover ul ul,/*список ul списка ul элемента li элемента с идентификатором nav4 при наведении курсора 2й уровень*/
#nav li:hover li:hover ul ul,/*список ul списка ul элемента li элемента с идентификатором nav4 при наведении курсора 3й уровень*/
#nav li:hover li:hover li:hover ul ul,/*список ul списка ul элемента li элемента с идентификатором nav4 при наведении курсора 4й уровень*/
#nav li:hover li:hover li:hover li:hover ul ul {/*список ul списка ul элемента li элемента с идентификатором nav4 при наведении курсора 5й уровень (здесь его нету)*/
   position:absolute; /*способ позиционирования элемента - абсолютное позиционирование элемента, относительно окна браузера или блока-родителя со свойствами position: absolute или position: relative*/
   left:-9999px; /*расстояние от левого края родителя*/
   top:-9999px; /*расстояние от верхнего края родителя*/
   width:0; /* ширина элемента содержательной части*/
   height:0; /*высота содержательной части элемента*/
   margin:0; /*внешние отступы все 0*/
   padding:0; /*внутренние отступы все 0*/
   list-style:none; /*задаем стиль отображения маркеров или нумерации для элементов списка - отобразить без маркера*/
}
#nav li:hover li:hover a.fly,/*ссылка с классом fly элемента li элемента с идентификатором nav4 при наведении курсора 2й уровень*/
#nav li:hover li:hover li:hover a.fly,/*ссылка с классом fly элемента li элемента с идентификатором nav4 при наведении курсора 3й уровень*/
#nav li:hover li:hover li:hover li:hover a.fly,/*ссылка с классом fly элемента li элемента с идентификатором nav4 при наведении курсора 4й уровень*/
#nav li:hover li:hover li:hover li:hover li:hover a.fly {/*ссылка с классом fly элемента li элемента с идентификатором nav4 при наведении курсора 5й уровень*/
   background:#28868d url(arrow_over.gif) 110px 6px no-repeat; /*цвет, фоновое изображение и путь к нему, расположение фоновой картинки по оси x 110px по оси y 6px, не растягивать (не повторять)*/
   color:#fff; /*цвет*/
   border-color:#00202d; /*цвет границы*/
}
#nav li:hover li:hover li a.fly,/*ссылка с классом fly в элементе li элемента li элемента с идентификатором nav4 при наведении курсора 2й уровень*/
#nav li:hover li:hover li:hover li a.fly,/*ссылка с классом fly в элементе li элемента li элемента с идентификатором nav4 при наведении курсора 3й уровень*/
#nav li:hover li:hover li:hover li:hover li a.fly {/*ссылка с классом fly в элементе li элемента li элемента с идентификатором nav4 при наведении курсора 4й уровень*/
   background:#54a9a9 url(arrow.gif) 110px 6px no-repeat; /*цвет, фоновое изображение и путь к нему, расположение фоновой картинки по оси x 110px по оси y 6px, не растягивать (не повторять)*/
   color:#000; /*цвет*/
   border-color:#54a9a9; /*цвет границы*/
}