Вертикальное выпадающее меню.
5 минут чтениеВертикальное выпадающее меню при помощи 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; }
