Научное наследие

by pharma_nsk

HTML

<body>
<ul class="main-menu">
<li><a href="#">Научное наследие</a></li>
<li class="active"><a href="#">Теория</a>
  <ul>
  <li><a href="#">Отдельные издания</a></li>
  <li><a href="#">Труды РАО</a></li>
  <li><a href="#">Диссертационные материалы</a></li>
  </ul>
  </li>
<li><a href="#">Практика</a></li>
<li><a href="#">История</a></li>
<li><a href="#">Периодические издания</a></li>
<li><a href="#">Справочные материалы</a></li>
<li><a href="#">Библиография</a></li>
<li><a href="#">Материалы научно-практических мероприятий</a></li>
</ul>
</body>

CSS

body{background-color:white;  padding: 10px; font-family: "Arial", sans-serif; font-size: 14px;}
.main-menu {width:200px; margin:0px; padding:0px; list-style:none;}
.main-menu > li {border-bottom:1px solid lightgrey;}
.main-menu > li:last-child {border-bottom:none;}
.main-menu > li > a {text-decoration:none; color:black; display:block;} .main-menu > li > a {padding:10px 0;}
.main-menu > .active > a {text-decoration:underline; color:#5A5C96;}
.main-menu ul{padding:0; margin:0;  list-style-type: none;}
.main-menu ul li a{font-size: 12px; width:140px; }
 .main-menu ul li:before {content:''; display:inline-block; width:0px; height:0px; border: 5px solid transparent; border-left: 5px solid black; vertical-align:top; margin-top:7px;} 
.main-menu ul a{text-decoration:none; color:black; display:inline-block;  padding:5px 5px 5px 5px;}
.main-menu > li > a:hover{background-color:#DEDFFF; color:green;}
.active a:hover {background-color:#FFDEF9; color:green;}