Blog's menu

Меню блога учителя истории

by Kostas

HTML

<div id="mainmenu">
  <ul>
    <li><a href="http://tzariuk.blogspot.com/">На головну</a></li>
    <li class="parent"><a href="#">Все про історію</a>
      <ul>
        <li><a href="http://tzariuk.blogspot.com/p/blog-page.html">Історія в школі</a></li>
        <li><a href="http://tzariuk.blogspot.com/p/blog-page_6.html">Історія для допитливих</a></li>
        <li><a href="http://tzariuk.blogspot.com/p/blog-page_5.html">Історичні відео матеріали</a></li>
        <li><a href="http://tzariuk.blogspot.com/p/blog-page_22.html">Презентації</a></li>
      </ul>
    </li>
    <li class="parent"><a href="#">Наші діти</a>
      <ul>
        <li><a href="http://tzariuk.blogspot.com/p/blog-page_27.html">Наші таланти</a></li>
        <li><a href="http://tzariuk.blogspot.com/p/blog-page_7.html">Класне життя</a></li>
        <li><a href="http://tzariuk.blogspot.com/p/blog-page_52.html">Проектна діяльність</a></li>
      </ul>
    </li>
    <li class="parent"><a href="#">Нормативні документи</a>
      <ul>
        <li><a href="http://tzariuk.blogspot.com/p/blog-page_68.html">Права та обов'язки учнів</a></li>
        <li><a href="http://tzariuk.blogspot.com/p/blog-page_23.html">Новини в освіті</a></li>
        <li><a href="http://tzariuk.blogspot.com/p/blog-page_70.html">Методична сторінка (критерії оцінювання)</a></li>
        <li><a href="http://tzariuk.blogspot.com/p/blog-page_30.html">Запрошуємо до обговорення</a></li>
        <li><a href="http://tzariuk.blogspot.com/p/blog-page_69.html">ЗНО = ДПА</a></li>
      </ul>
    </li>
    <li class="parent"><a href="#">Корисні посилання</a>
      <ul>
        <li><a href="http://sch1.edu.vn.ua/">Сайт гімназії</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*::after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}


/*************************** Основные пункты **/

#mainmenu {
  position: relative;
  border: 1px solid #222;
  background-color: #111;
  background-image: -moz-linear-gradient(#444, #111);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
  background-image: -webkit-linear-gradient(#444, #111);
  background-image: -o-linear-gradient(#444, #111);
  background-image: linear-gradient(#444, #111);
  border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -webkit-border-radius: 6px;
  -ms-border-radius: 6px;
  box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
  -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
  -o-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
  -ms-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
  -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
  height: 40px;
  margin: 50px auto;
  padding: 0;
  width: 850px;
  /*ширина главного меню*/
  z-index: 10/* для отображения подпунктов поверх остальных блоков */
}

#mainmenu ul,

/* сбрасываем поля и отступы у списков */

#mainmenu ul ul,
#mainmenu ul ul li {
  list-style: none;
  padding: 0;
  margin: 0;
}

#mainmenu ul {
  clear: left;
  position: relative;
  right: 50%;
  height: 40px;
  float: right;
  text-align: center;
  font: 12px Arial, Helvetica, sans-serif;
  text-transform: uppercase;
}

#mainmenu ul li {
  border-right: 1px solid #222;
  box-shadow: 1px 0 0 #444;
  -moz-box-shadow: 1px 0 0 #444;
  -o-box-shadow: 1px 0 0 #444;
  -ms-box-shadow: 1px 0 0 #444;
  -webkit-box-shadow: 1px 0 0 #444;
  position: relative;
  left: 50%;
  float: left;
  height: 39px;
}

#mainmenu...