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

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

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


<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


<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>

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


<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>

<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 меню с пунктами одинаковой ширины


<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>

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


<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


<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 можно сделать так:

<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. У меня установлены лишь последние версии браузеров. У кого есть возможность, взгляните, пожалуйста, как там с остальными браузерами.

в f t
наверх ↑

17 комментариев:

Татьяна Алексеевна Кулешова
А как и куда вставить этот код?
NMitra
На сайт. Если у вас блог на Blogger, то советую обратиться к статье http://shpargalkablog.ru/2011/10/gorizontalnoye-vypadayushcheye-menyu.html
@web_xaser
NMitra, в Internet Explorer же есть режим эмуляции для проверки вёрстки вплоть до IE5.
NMitra
А у меня что-то ничего нет http://1.bp.blogspot.com/-n5EmO2MOXos/U0Pq0wf6CaI/AAAAAAAAETk/9LiRtSiI_SI/s1600/ie-f12.png ((
@web_xaser
Ого, даже так. В 11.0.9600.16428 всё есть и работает.
NMitra
Предполагаю, что версия тут ни при чём 11.0.9600.16521. Мне, по-видимому, нужно что-то загрузить (( Как там выглядит то?
@web_xaser
В IE8 и выше всё нормально. В 7 уже поехало (http://lh6.googleusercontent.com/-O40piYL4xQI/U0aeiY6i8mI/AAAAAAAAINQ/Ot7jfmpg78o/s992/111.jpg).
Используйте browserstack.com/screenshots тогда.
NMitra
А нижнее с таблицей? Я не пойму почему z-index игнорируется.
@web_xaser
Там уже лучше (ничего не съезжает), но если навести курсор на пункт подменю, оно тут же убирается (http://lh4.googleusercontent.com/-JIV7dnkY8qU/U0bFuQwQ5TI/AAAAAAAAINk/sh3s0KWfYb4/s845/1.gif).
NMitra
Почитала про IE6-7. :hover работает только для тега a. Нужно обязательно применять JS. Сейчас техника быстро устаревает, особенно телефоны и ноутбуки. Сомневаюсь что кто-то кроме вебмастеров будет упорно загружать 6-7 версию, которые когда-то стояли на устройствах по умолчанию. Поэтому забудем про эти прекрасные версии браузеров.
@web_xaser
>> Поэтому забудем про эти прекрасные версии браузеров.
Полностью солидарен.
Анонимный
выпадающее меню супер! для отображения алфавита прекрасно подходит
Анонимный
почему то при наведении на выскочившее подменю оно выделяется не полностью цветом, а лишь его левый край.
NMitra
Пример в студию, лучше на http://jsfiddle.net/
Анонимный
jkgkjg
Анонимный
Почему вы не закрываете тег li?
NMitra
См. спецификация http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-li-element

"An li element's end tag may be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element."

Другими словами закрывающий тег необязателен, если после li идёт другой li или закрывающий /ol или /ul