class DarkRaha extends com { // разработка приложений
            String a="Главная" b="Контакты" c="О сайте"
};

введение
css селекторы
внедрение стилей
значение свойств стилей
передний, задний фон
текст
шрифт
боксовая модель
поля, отступы
настройка рамки
позиция и размеры элемента
плавающие элементы
обтекание и наложение текста
разбиение на столбцы
ссылки
списки
видимость элемента
выпадающее меню
таблицы
устройства

Справочник по CSS

Выпадающее меню

Возможности CSS позволяют создать простое меню с выпадающими списками практически без применения JavaScript. Во фрейме приведена страница с подобным меню. Данный пример тестировался в Mozilla Firefox и Internet Exlorer версий 6 и 7.

Для лучшего понимания оставлен минимальный набор стилей, необходимый для функционирования такого меню.

К сожалению IE6 все еще является одним из популярных браузеров и игнорировать его рано. Но он не поддерживает некоторые псевдоклассы CSS2, и только для него нам понадобится небольшой скрипт.

код страницы с меню

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!-- текст заголовка и меню нашего HTML документа -->
<html>
<head>
 <title></title>
 <meta http-equiv="content-type" 
  content="text/html; charset=windows-1251">
 <meta name="author" content="DarkRaha (Verma Rahul)"> 

<!-- стили для нашего меню -->
<link rel="stylesheet" type="text/css" href="menudemo.css">

<!-- только для поддержки IE6 -->
 <script type="text/javascript" src="menuevent.js"></script>

</head>
<body onload="correctMenuIE6();"> <!-- onload только для поддержки IE6 -->

<!-- определение меню, для этого были использованы списки -->
<ul id="mainMenu">
<li>Api 
  <ul class="submenu">
  <li><a href="#OpenGl">OpenGl</a>
  <li><a href="#wxWdigets">wxWidejts</a>
  <li><a href="#SamrtWin">SamrtWin</a>
  </ul>
<li>Web
   <ul class="submenu">
   <li><a href="#HTML">HTML</a>
   <li><a href="#JavaScript">JavaScript</a>
   </ul>
</ul>
<br>
...
определение стиля меню

/* описание главного меню */
#mainMenu {
list-style:none; /* отключаем маркеры */
background: #DEB887; /* фон меню */
}

/*общее описание всех элементов меню */
#mainMenu li{
background: #DEB887;

/*чтобы элементы главного меню отображались в ряд */
display: inline; 
float: left;
width: 100px;
margin: 0;

text-align: center;
}


/*описание выпадающих меню  */
.submenu {
/*по умолчанию все выпадающие меню скрыты
и позиционируются абсолютно */
display: none;
position:absolute;
background: #DEB887;

/* следующие определения необходимы 
только для IE (6 и 7) */
margin: 0;       /* убираем отступы*/
left:0;          /* иначе выпадающий список будет сдвинут 
                    в сторону, относительно родительского элемента*/
top: 100%;       /* чтобы выпадающий список отображался под
                    родительским, иначе родительский будет закрыт
                    первым элементом*/
}


/* при наведении на элемент меню
мы будем отображать соответствующее ему
выпадающее меню*/
#mainMenu li.hover  .submenu, /*для IE6*/
#mainMenu li:hover  .submenu {
display: block;
list-style:none;
padding: 0;
}

/* при наведении на любой элемент меню,
и в главном меню и выпадающих меню,
делаем подсветку и определяем позиционирование
в относительные координаты */
#mainMenu  li.hover, /*для IE6*/
#mainMenu  li:hover {
position: relative;
background: #FFE4B5
}

/* настройка ссылок входящих в меню*/
#mainMenu a, 
#mainMenu a:link, 
#mainMenu a:visited {
text-decoration:none;
color: #000080;
}
js код коррекции меню для IE6

function correctMenuIE6(){
// если не IE то ничего не делаем (хотя в IE7 тоже все работает)
if(navigator.appName!='Microsoft Internet Explorer') return;

 // выбераем все элементы <li> вложенные в главное меню
 var nodes = document.getElementById("mainMenu").
                 getElementsByTagName("li");

 // используем то, что в свойстве className
 // можно задать несколько классов сразу через пробелы
 for (var i=0; i<nodes.length; i++) {
  // устанавливаем обработчик
  // при наведении добавляем к имени класса hover
  // и тогда к нему применятся стили
  nodes[i].onmouseover = function() {
   this.className += " hover";
  }

  // устанавливаем обработчик
  // когда курсор мыши покидает элемент
  // из имени класса удаляем hover
  nodes[i].onmouseout = function()  {
  this.className = this.className.replace(" hover", "");
  }
 }
}

Рейтинг@Mail.ru