Горизонтальное выпадающее меню | CSS

• Горизонтальное меню
• Горизонтальное выпадающее меню
• Как выровнять пункты меню по ширине
• Что делать, когда скачет меню
• Простое адаптивное меню для сайта
• Многоуровневый выпадающий список
• Горизонтальное выпадающее меню для Blogger

Горизонтальное меню для сайта

Как сделать горизонтальное меню

• Главная
• Поисковая оптимизация
• HTML
• О блоге

<ul id="nav1">
  <li><a href="#1">Пункт 1</a>
  <li><a href="#2">Пункт 2</a>
  <li><a href="#3">Пункт 3</a>
  <li><a href="#4">Пункт 4</a>
</ul>

Как создать простое горизонтальное меню на CSS

• Главная
• Поисковая оптимизация
• HTML
• О блоге

<ul id="nav2">
  <li><a href="#1">Пункт 1</a>
  <li><a href="#2">Пункт 2</a>
  <li><a href="#3">Пункт 3</a>
  <li><a href="#4">Пункт 4</a>
</ul>

Горизонтальное меню по центру

• Главная
• Поисковая оптимизация
• HTML
• О блоге

<ul id="nav3">
  <li><a href="#1">Пункт 1</a>
  <li><a href="#2">Пункт 2</a>
  <li><a href="#3">Пункт 3</a>
  <li><a href="#4">Пункт 4</a>
</ul>

• Главная
• Поисковая оптимизация
• HTML
• О блоге

<ul id="nav4">
  <li><a href="#1">Пункт 1</a>
  <li><a href="#2">Пункт 2</a>
  <li><a href="#3">Пункт 3</a>
  <li><a href="#4">Пункт 4</a>
</ul>

Создание горизонтального HTML меню с пунктами одинаковой ширины

• Главная
• Поисковая оптимизация
• HTML
• О блоге

<ul id="nav5">
  <li><a href="#1">Пункт 1</a>
  <li><a href="#2">Пункт 2</a>
  <li><a href="#3">Пункт 3</a>
  <li><a href="#4">Пункт 4</a>
</ul>

Код горизонтального меню, растянутого на всё доступное пространство с пунктами разной величины

• Главная
• Поисковая оптимизация
• HTML
• О блоге

<ul id="nav6">
  <li><a href="#1">Пункт 1</a>
  <li><a href="#2">Пункт 2</a>
  <li><a href="#3">Пункт 3</a>
  <li><a href="#4">Пункт 4</a>
</ul>

Резиновое горизонтальное выпадающее меню на CSS

• Главная
• Поисковая оптимизация
  • Поиск ключевых слов
  • Оптимизация сайта
  • Индексация сайта
  • Улучшение значений поведенческих факторов ранжирования
• HTML
  • Теги HTML
  • Статьи
• О нас
  • Контакты
  • Отзывы
  • Правовые документы

<ul id="nav7">
  <li><a href="#1">Пункт 1</a>
  <li><a href="#2">Пункт 2</a>
      <ul>
        <li><a href="#2-1">Подменю 1</a>
        <li><a href="#2-2">Подменю 2</a>
        <li><a href="#2-3">Подменю 3</a>
        <li><a href="#2-4">Подменю 4</a>
      </ul>
  <li><a href="#3">Пункт 3</a>
      <ul>
        <li><a href="#3-1">Подменю 1</a>
        <li><a href="#3-2">Подменю 2</a>
      </ul>
  <li class="right"><a href="#4">Пункт 4</a>
      <ul>
        <li><a href="#4-1">Подменю 1</a>
        <li><a href="#4-2">Подменю 2</a>
        <li><a href="#4-3">Подменю 3</a>
      </ul>
</ul>

Для старых версий IE можно сделать так:

Главная

Поисковая оптимизация Поиск ключевых слов Оптимизация сайта Индексация сайта Улучшение значений поведенческих факторов ранжирования

HTML Теги HTML Статьи

О нас Контакты Отзывы Правовые документы

<style>
#nav8, #nav8 ul, #nav8 li {
  margin: 0;
  padding: 0;
  border: 0;
}
#nav8, #nav8 ul {
  background: rgb(46,95,122);
}
#nav8 {
  border-spacing: 0 0;
  position: relative;
  z-index: 50;
  width: 100%;
}
#nav8 ul {
  position: absolute;
  display: none;
}
#nav8 td:hover ul {
  display: block;
}
#nav8 ul li {
  list-style: none;
}
#nav8 .right {
  direction: rtl;
}
#nav8 .right ul {
  right: 0;
}
#nav8 .right li {
  direction: ltr;
}
#nav8 a {
  display: block;
  padding: 3px 0;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
#nav8 ul a {
  padding: 3px 15px;
  text-align: left;
}
#nav8 td:hover, #nav8 li:hover {
  background: rgb(96,145,172);
}
</style>

<table id="nav8" cellspacing="0"><tr>
      <td><a href="#1">Пункт меню 1</a></td>
      <td><a href="#2">Пункт меню 2</a><ul>
            <li><a href="#2-1">Пункт подменю 1</a>
            <li><a href="#2-2">Пункт подменю 2</a>
            <li><a href="#2-3">Пункт подменю 3</a>
            <li><a href="#2-4">Пункт подменю 4</a>
          </ul>
      </td>
      <td><a href="#3">Пункт меню 3</a>
          <ul>
            <li><a href="#3-1">Пункт подменю 1</a>
            <li><a href="#3-2">Пункт подменю 2</a>
          </ul>
      </td>
      <td class="right"><a href="#4">Пункт меню 4</a>
          <ul>
            <li><a href="#4-1">Пункт подменю 1</a>
            <li><a href="#4-2">Пункт подменю 2</a>
            <li><a href="#4-3">Пункт подменю 3</a>
          </ul>
      </td>
</tr></table>

P.S. У меня установлены лишь последние версии браузеров. У кого есть возможность, взгляните, пожалуйста, как там с остальными браузерами.