Вертикальное выпадающее меню.

Вертикальное выпадающее меню при помощи CSS также как и горизонтальное имеет один большой плюс, это экономия рабочего пространства. Напишем код html для этого меню:

посмотреть результат

Далее вставим код CSS:

ul#set-v, ul#set-v li, ul#set-v ul { margin: 0; border: 0 none; padding: 0; width: 160px; list-style: none; } ul#set-v:after { clear: both; display: block; font: 1px/0px serif; content: «.»; height: 0; visibility: hidden; } ul#set-v li { float: left; display: block !important; display: inline; position: relative; } ul#set-v a { border: 1px solid #FFF; border-right-color: #527337; border-bottom-color: #527337; padding: 0 6px; display: block; background: #FFCC99; color: #663333; font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; height: auto !important; height: 1%; } ul#set-v a:hover, ul#set-v li:hover a, ul#set-v li.iehover a { background: #663333; color: #FFCCCC; } ul#set-v li:hover li a, ul#set-v li.iehover li a { background: #FFCC99; color: #663333; } ul#set-v li:hover li a:hover, ul#set-v li:hover li:hover a, ul#set-v li.iehover li a:hover, ul#set-v li.iehover li.iehover a { background: #663333; color: #FFCCCC; } ul#set-v li:hover li:hover li a, ul#set-v li.iehover li.iehover li a { background: #FFCCCC; color: #663333; } ul#set-v li:hover li:hover li a:hover, ul#set-v li:hover li:hover li:hover a, ul#set-v li.iehover li.iehover li a:hover, ul#set-v li.iehover li.iehover li.iehover a { background: #663333; color: #FFCCCC; } ul#set-v li:hover li:hover li:hover li a, ul#set-v li.iehover li.iehover li.iehover li a { background: #663333; color: #FFCCCC; } ul#set-v li:hover li:hover li:hover li a:hover, ul#set-v li.iehover li.iehover li.iehover li a:hover { background: #663333; color: #FFCCCC; } ul#set-v ul, ul#set-v ul ul, ul#set-v ul ul ul { display: none; position: absolute; top: 0; left: 160px; } ul#set-v li:hover ul ul, ul#set-v li:hover ul ul ul, ul#set-v li.iehover ul ul, ul#set-v li.iehover ul ul ul { display: none; } ul#set-v li:hover ul, ul#set-v ul li:hover ul, ul#set-v ul ul li:hover ul, ul#set-v li.iehover ul, ul#set-v ul li.iehover ul, ul#set-v ul ul li.iehover ul { display: block; } .pquote { margin:0 auto; width: 80%;clear:both; background: #F7FAF5; border:1px dotted #74A451; padding: 11px; 9px; 11px; 9px;color:#405B2D; font:12px verdana, arial, helvetica, sans-serif; } #counter { display:none; text-align:center; } h1,h2 { color:#648B43; }

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

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

ul#set-v,

ul#set-v li,

ul#set-v ul {

  margin: 0;

  border: 0 none;

  padding: 0;

  width: 160px;

  list-style: none;

}

ul#set-v:after {

  clear: both;

  display: block;

  font: 1px/0px serif;

  content: «.»;

  height: 0;

  visibility: hidden;

}

ul#set-v li {

  float: left;

  display: block !important;

  display: inline;

  position: relative;

}

ul#set-v a {

  border: 1px solid #FFF;

  border-right-color: #527337;

  border-bottom-color: #527337;

  padding: 0 6px;

  display: block;

  background: #FFCC99;

  color: #663333;

  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;

  text-decoration: none;

  height: auto !important;

  height: 1%;

}

ul#set-v a:hover,

ul#set-v li:hover a,

ul#set-v li.iehover a {

  background: #663333;

  color: #FFCCCC;

}

ul#set-v li:hover li a,

ul#set-v li.iehover li a {

  background: #FFCC99;

  color: #663333;

}

ul#set-v li:hover li a:hover,

ul#set-v li:hover li:hover a,

ul#set-v li.iehover li a:hover,

ul#set-v li.iehover li.iehover a {

  background: #663333;

  color: #FFCCCC;

}

ul#set-v li:hover li:hover li a,

ul#set-v li.iehover li.iehover li a {

  background: #FFCCCC;

  color: #663333;

}

ul#set-v li:hover li:hover li a:hover,

ul#set-v li:hover li:hover li:hover a,

ul#set-v li.iehover li.iehover li a:hover,

ul#set-v li.iehover li.iehover li.iehover a {

  background: #663333;

  color: #FFCCCC;

}

ul#set-v li:hover li:hover li:hover li a,

ul#set-v li.iehover li.iehover li.iehover li a {

  background: #663333;

  color: #FFCCCC;

}

ul#set-v li:hover li:hover li:hover li a:hover,

ul#set-v li.iehover li.iehover li.iehover li a:hover {

  background: #663333;

  color: #FFCCCC;

}

ul#set-v ul,

ul#set-v ul ul,

ul#set-v ul ul ul {

  display: none;

  position: absolute;

  top: 0;

  left: 160px;

}

ul#set-v li:hover ul ul,

ul#set-v li:hover ul ul ul,

ul#set-v li.iehover ul ul,

ul#set-v li.iehover ul ul ul {

  display: none;

}

ul#set-v li:hover ul,

ul#set-v ul li:hover ul,

ul#set-v ul ul li:hover ul,

ul#set-v li.iehover ul,

ul#set-v ul li.iehover ul,

ul#set-v ul ul li.iehover ul {

  display: block;

}

.pquote {

margin:0 auto;

width: 80%;clear:both;

background: #F7FAF5;

border:1px dotted #74A451;

padding: 11px; 9px; 11px; 9px;color:#405B2D;

font:12px verdana, arial, helvetica, sans-serif;

}

#counter {

display:none;

text-align:center;

}

h1,h2 {

color:#648B43;

}

посмотреть результат

Вот и всё. У нас вышло довольно таки симпатичное меню без всяких Javascript.

Полный код выглядит так:

ul#set-v, ul#set-v li, ul#set-v ul { margin: 0; border: 0 none; padding: 0; width: 160px; list-style: none; } ul#set-v:after { clear: both; display: block; font: 1px/0px serif; content: «.»; height: 0; visibility: hidden; } ul#set-v li { float: left; display: block !important; display: inline; position: relative; } ul#set-v a { border: 1px solid #FFF; border-right-color: #527337; border-bottom-color: #527337; padding: 0 6px; display: block; background: #FFCC99; color: #663333; font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; height: auto !important; height: 1%; } ul#set-v a:hover, ul#set-v li:hover a, ul#set-v li.iehover a { background: #663333; color: #FFCCCC; } ul#set-v li:hover li a, ul#set-v li.iehover li a { background: #FFCC99; color: #663333; } ul#set-v li:hover li a:hover, ul#set-v li:hover li:hover a, ul#set-v li.iehover li a:hover, ul#set-v li.iehover li.iehover a { background: #663333; color: #FFCCCC; } ul#set-v li:hover li:hover li a, ul#set-v li.iehover li.iehover li a { background: #FFCCCC; color: #663333; } ul#set-v li:hover li:hover li a:hover, ul#set-v li:hover li:hover li:hover a, ul#set-v li.iehover li.iehover li a:hover, ul#set-v li.iehover li.iehover li.iehover a { background: #663333; color: #FFCCCC; } ul#set-v li:hover li:hover li:hover li a, ul#set-v li.iehover li.iehover li.iehover li a { background: #663333; color: #FFCCCC; } ul#set-v li:hover li:hover li:hover li a:hover, ul#set-v li.iehover li.iehover li.iehover li a:hover { background: #663333; color: #FFCCCC; } ul#set-v ul, ul#set-v ul ul, ul#set-v ul ul ul { display: none; position: absolute; top: 0; left: 160px; } ul#set-v li:hover ul ul, ul#set-v li:hover ul ul ul, ul#set-v li.iehover ul ul, ul#set-v li.iehover ul ul ul { display: none; } ul#set-v li:hover ul, ul#set-v ul li:hover ul, ul#set-v ul ul li:hover ul, ul#set-v li.iehover ul, ul#set-v ul li.iehover ul, ul#set-v ul ul li.iehover ul { display: block; } .pquote { margin:0 auto; width: 80%;clear:both; background: #F7FAF5; border:1px dotted #74A451; padding: 11px; 9px; 11px; 9px;color:#405B2D; font:12px verdana, arial, helvetica, sans-serif; } #counter { display:none; text-align:center; } h1,h2 { color:#648B43; }