Выпадающее меню без javascript 2

08 10/09
36

На CSSplay недавно была опубликована новая версия выпадающего меню на «чистом» CSS. В этой версии никаких хаков, условных комментариев и таблиц для IE6.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<ul id="nav">
  <li><a href="">Главная</a></li>
  <li><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>
    <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>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

*{
  margin:0;
  padding:0
}
#nav{
  font-size:0.7em;
  list-style-type:none;
  width:600px;
  height:25px;
  display:inline-block;
  background:#355C96;
  line-height:25px
}
  #nav li{
    float:left;
    width:120px;
    margin-top:-10000px
  }
    #nav li a{
      width:120px;
      text-decoration:none;
      text-align:center;
      color:#fff;
      position:relative;
      float:left;
      margin-right:-119px;
      margin-top:10000px
    }
    #nav li a:hover, #content #nav li a:focus, #content #nav li a:active{
      background:#DCE2FC;
      margin-right:0;
      color:#355C96
    }
    #nav li ul{
      background:#6286BD;
      float:left;
      margin-top:-25px;
      padding-top:25px;
      margin-bottom:-10000px;
      list-style-type:none
    }
      #nav li ul li{
        float:none;
        margin:0;
        width:auto
      }
        #nav li ul li a{
          float:none;
          display:block;
          margin:0;
          margin-right:-1px;
          background:#6286BD
        }
Теги: