1. Горизонтальное НЕ выпадающее меню.

Любое меню — прежде всего список:

XHTML————————————————————
<ul id=»nav»>
<li><a href=»#» title=»Новости»>Новости</a></li>
<li><a href=»#» title=»Новости»>Новости</a></li>
<li><a href=»#» title=»Новости»>Новости</a></li>
<li><a href=»#» title=»Новости»>Новости</a></li>
</ul>

CSS————————————————————
/*reset нужен вроде * {margin:0;padding:0;} */
body {
font:100.01% Tahoma, Helvetica, sans-serif;
color:#000;
}
ul, li {
padding:0;
margin:0;
}
ul#nav {
background:#00FF00;
float:left; /* Предотвращаем эффект, при котором список не охватит внутри себя свои пункты. Это будет видно, если задать ul видимые границы */
font:bold .75em Tahoma, Helvetica, sans-serif; /* Устанавливаем параметры шрифта */
border-right:1px solid #CCC;
}
ul#nav li {
float:left; /* «Прижимаем» элементы списка налево, эмулируя горизонталь */
list-style:none;
}
ul#nav li a {
display:block; /* Делаем ссылки блочным элементом, чтобы они могли нативно работать с внутренними полями */
padding:4px 8px; /* Внутренние поля */
background:#FFF; /* Цвет фона */
border:1px solid #CCC; /* Границы */
border-width:1px 0 1px 1px;
color:#47AAE9; /* Цвет шрифта */
position:relative; /* Небольшой «хак», чтобы в IE кликабельная область распространилась на внутренние поля */

}
ul#nav li a:hover {
background:#F2F2F2; /* Цвет фона при наведении на ссылку */
color:#000; /* Цвет шрифта при наведении на ссылку */
}

В стандарте CSS 2.1, который является текущим, предусмотрен псевдоселектор :hover, благодаря которому мы можем менять стиль элемента по тому же принципу, как делаем при onmouseover при помощи Javascript. Одна проблема — IE шестой версии и ниже применяет :hover только к ссылкам. Но не стоит отчаиваться. Поскольку наш список все-таки является навигацией, в нем совершенно очевидным образом находятся ссылки, к которым :hover в IE 5 и 6 можно применить без лишних проблем. Заодно на ссылки мы навесим и другие элементы оформления, такие как оступы, границы и цвет.
Осталась небольшая деталь. Так как мы не рисовали правую границу для ссылок внутри элементов списка — у нашего меню не хватает правой границы. Конечно можно было бы задать класс последнему элементу списка и переопределить нужные стили, но в данном случае можно сделать все проще и без лишней разметки. Достаточно лишь добавить границу самому списку.

Напомню, что если несколько идущих подряд блоков заfloat’ить в одну сторону, то каждый следующий будет пытаться разложиться со свободной стороны от предыдущего. Этот эффект широко используется для того, чтобы превращать списки разделов сайта в горизонтально расположенные меню. Используем для форматирования меню – списки, а каждый элемент списка делаем плавающим (не используем display: inline; – появляются пробелы обрамляющие элемент. И потому что блоковые <a> будут в строчном li). Маргины и паддинги у li и ul обнуляем.
ul, li {
float:left;
list-style:none;
margin:0; padding:0;
}

Обратите внимание, что для раскладки все свойства назначаются и для элементов ul, и для li. Это удобно свести в одно правило, потому что:

* float:left нужен элементам списка, чтобы они разложились горизонтально, а самому списку — чтобы элементы через него не проваливались;
* нулевые margin и padding устраняют отступы, которые браузеры делают для списков по умолчанию, но они это делают очень по-разному, поэтому проще сказать «всем всё по нулям», чем помнить что отдельно для какого элемента проставлять.

2. На многих веб-сайтах подсвечивается пункт меню, соответствующий местонахождению пользователя на сайте. Это существенно помогает пользователю ориентироваться на сайте и является основным требованием, обеспечивающим удобство и простоту использования. Однако удобную навигацию по сайту может обеспечить только отлаженная HTML разметка для каждой страницы, на создание которой уходит много времени. Возможно, ли задать подсветку навигации для каждой страницы сайта одним HTML-кодом? Да.

Прежде всего, необходимо определить класс для каждого пункта навигации:
<ul>
<li><a href=»#» class=»home»>Home</a></li>
<li><a href=»#» class=»about»>About us</a></li>
<li><a href=»#» class=»contact»>Contact us</a></li>
</ul>
Затем нужно добавить id для тега <body>. Идентификатор id должен отображать, в каком разделе сайта находиться пользователь, и изменяться, когда пользователь переходит в другой раздел. Так, если пользователь находится на главной странице, содержание id будет следующим: <body id =“about”>, в разделе «О компании» – <body id =“home”>, в разделе «Контакты» – <body id =“ contact”>.

Следующим шагом будет создание нового CSS правила:

#home .home, #about .about, #about .about, #contact .contact
{
commands for highlighted navigation go here
}

Это правило будет действовать только при условии, когда class=“home” содержится в id=“home”, class=“about” в id=“about”, а class=“contact” в id=“contact”. Это произойдет только тогда, когда пользователь зайдет в соответствующий раздел сайта, незаметно для себя подсвечивая пункт меню.
Список.
список: когда li {float:left} то ul схлопывается и его не видно. Если ul {float:left} то его видно, ширина на ширину контента, т.е. кнопок. Если ul {overflow:hidden;} то его тоже видно, ширина на весь экран.

Есть другой вариант:

<ul>
<li><a href=»/»>Главная</a></li>
<li><a href=»products.html» id=»current»>
Продукция</a></li>
<li><a href=»gallery.html»>Фото</a></li>
<li><a href=»responses.html»>Отзывы</a></li>
</ul>

Здесь необходимо обратить внимание на пункт, где встречается id=»current». В реально работающем меню необходимо определять текущую страницу при ее загрузке и присваивать этот id соответствующему пункту.

ul li a#current {
background-color:#fff;
border-bottom:1px solid #fff; – делаем невидимой нижнюю полоску которая прерывает общую полоску
под кнопками меню, т.е. когда мы в данном разделе. Стили для элемента имеющего id=»current».
Цвет фона задаем совпадающим с цветом основного фона страницы, как впрочем и цвет нижней рамки.
}

3. Правильная подсветка пунктов меню в зависимости от того на какой странице находимся.

<ul>
<li><а hrеf=»#» class=»home»>Home</a></li>
<li><а hrеf=»#» class=»about»>About us</a></li>
<li><а hrеf=»#» class=»contact»>Contact us</a></li>
</ul>
Хитрость и простота одновременно в этом примере заключаются в том, чтобы задать уникальный id в тэге body, для каждой страницы сайта. Id страницы должен совпадать с названием класса элемента меню и тогда стили к этим элементам можно применять постранично:

#home .home, #about .about, #about .about, #contact .contact{
color:red;  font-weight: bold; /*Стили на ваше усмотрение*/
}

Получается что когда id страницы это “home”, то к элементу меню с классом .home применяются стили описанные выше. И так далее. Просто, правда? Меня этот способ привлек тем, что в своей работе я использую id для тэга body очень часто и для меня реализация такой подсветки – описание одного стиля.

5. Для меню можно ховер-вариант повесить на фон тэга li а неховер варинат повесить на <a> и при наведении тэг фона <a> делать транспарент.

6. Горизонтальное ВЫпадающее меню.

 

#nav li ul {

position: absolute;

width: 10em;

left: -999em;

}

#nav li:hover ul {

left: auto;

}

Обратите внимание что здесь не используется display:none, для того чтобы сохранить максимальную доступность. Вместо него мы используем left: -999em. Это не обязательно и может быть легко заменено на display:none. Вы конечно же обратили внимание на то, что у селектора li описан псевдо класс :hover, который конечно же не будет работать в Интернет Эксплорере. Для того, чтобы заставить наше выпадающее (и класс :hover) меню работать в Интернет Эксплорере мы используем этот маленький скриптик:

sfHover = function() {

var sfEls = document.getElementById(«nav»).getElementsByTagName(«LI»);

for (var i=0; i<sfEls.length; i++) {

sfEls[i].onmouseover=function() {

this.className+=» sfhover»;

}

sfEls[i].onmouseout=function() {

this.className=this.className.replace(new RegExp(» sfhover\\b»), «»);

}

}

}

if (window.attachEvent) window.attachEvent(«onload», sfHover);

Скрипт подменяет псевдо класс :hover для Интернет Эксплорера следующим способом –  при событии mouseOver для элемента li скрипт добавляет ему класс sfhover для которого в свою очередь мы тоже должны прописать стиль. При событии mouseOut класс обнуляется.

#nav li.sfhover ul{

left: auto;

}

Т.е. left: auto; при абсолютном позиционировании обнуляет ранее прописанное left: -999em; и выводит меню там где оно и долно быть – т.е. винзу. Получается что значение auto делает ширину равную ширине контента, т.е. ширине кнопки