HTML Горизонтальное CSS меню (VERSION 0.2)

[Anton.A]

Всем жителям деревни PI очередной огромный привет! Сегодня я бы хотел вам рассказать, что я продолжаю своё обучение с кодом CSS. Сегодня я вам покажу вторую версию своего горизонтального CSS меню. Почему версия 0.2, спросите вы. Версия 0.1 была простое горизонтальное меню, а сюда я выкладываю уже вторую версию. В неё я добавил выпадающие списки для двух первых разделов. Ну а теперь непосредственно к самому меню.

DEMO:

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ru">
<link rel="stylesheet" href="gmenu1.css" type="text/css"/>
<title>GMENU 1. VERSION 0.2</title>
</head>
<body">

<div id="gmenu1">
  <ul>
    <li><a href="#">Раздел 1</a>
      <ul> 
      <li><a href="#">Подраздел 1</a></li> 
      <li><a href="#">Подраздел 2</a></li> 
      <li><a href="#">Подраздел 3</a></li> 
      <li><a href="#">Подраздел 4</a></li> 
      </ul> 
     </li>
    <li><a href="#">Раздел 2</a>
      <ul> 
      <li><a href="#">Подраздел 5</a></li> 
      <li><a href="#">Подраздел 6</a></li> 
      <li><a href="#">Подраздел 7</a></li> 
      <li><a href="#">Подраздел 8</a></li> 
      </ul>
     </li>
    <li><a href="#">Раздел 3</a></li>
    <li><a href="#">Раздел 4</a></li>
  </ul>
</div>

</body>
</html>

CSS Код:

#gmenu1 {
  width: 100%; /* Задаём ширину для div */
  float: left; /* Добавляем список в div */
  border: 1px solid black;
  font-size: 15px; /* Размер текста в меню */
  font-weight: bold;
  background-color: #F5F5F5;
  padding: 0px 0px 0px 5px; /* отступ ul от края контейнера */
}

#gmenu1 ul {
  margin: 0;
  padding: 0;
}

#gmenu1 li {
  float: left; /* Оформляем наше меню по горизонтали */
  position: relative;
  list-style-type: none; /* Убераем маркеры */
  background-color: #B9B9B9; /* Задаём фоновой цвет элементов меню */
  border-right: 1px solid black;
  width: 100px;
  height: 33px;
  line-height: 33px;
  text-align: center;
}

#gmenu1 li:first-child {
  border-left: 1px solid black; /* Первая вертикальная линия в меню */
}

#gmenu1 a {
  text-decoration: none; /* Удаляем подчёркивание ссылок */
  padding: 0px 10px 0px 10px; /* Пространство с обеих сторон текста пункта меню */
  color: #006699; /* задаём цвет шрифта ссылок */
}

#gmenu1 a:hover {
  color: #ff3333; 
}

#gmenu1 li:hover {
  background-color: #F1F1F1;;
}

/* Раскрывающееся меню */ 

#gmenu1 ul li ul { 
  margin: 0px;  /* запрещает наследование временного поля ul из горизонтального меню */ 
  position: absolute;
  left: -1px; /* Выравниваем раскрываемое меню */
  width: 10em;  /* задает ширину меню - в сочетании с шириной И в 100% дает нам вертикальное меню */ 
} 
#gmenu1 ul li ul li  { 
  width: 100%;  /* заполняет контейнер списка (ul) элементами списка */
  border-left: 1px solid #000000;  /* три стороны каждого пункта раскрывающегося меню */ 
  border-bottom: 1px solid #000000; 
  border-right: 1px solid #000000; 
}

body #gmenu1 ul li ul{
  display: none; /* Прячем раскр. меню, когда мышь на него не наведена */
}

#gmenu1 ul li:hover ul {
  display: block; /* Раскр. меню появляется при наведении на него мышью */
}

#gmenu1 ul li:hover ul, #gmenu1 ul li ul: hover {
  display: block;
}

Вот пока что всё. Конечно внешний вид меню пока что оставляет желать лучшего, но в следующих версиях я над этим поработаю! Принимаю адекватную критику и хорошие пожелания.

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

​