Горизонтальное меню для сайта
Как сделать горизонтальное меню
<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 можно сделать так:
Главная | Поисковая оптимизация | 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. У меня установлены лишь последние версии браузеров. У кого есть возможность, взгляните, пожалуйста, как там с остальными браузерами.
17 комментариев:
Используйте browserstack.com/screenshots тогда.
Полностью солидарен.
"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