| |
|
|
| | На сайте http://relod.i-market.ru/ использую меню на технологии css.
При наведении на раздел с подменю нижние разделы поднимаются на 1 или 2 пикселя. А вот почему - понять не могу. Помогите разобраться!
Код из css:
/*для позиционирования при верстке страниц слоями,
при табличной верстке можно вернуться к оригиналу*/
#boxmenu {
BACKGROUND: #F9F8F5;
BORDER: 0px #000 solid;
POSITION: relative;
LEFT:0px;
WIDTH: 219px;
Z-INDEX: 1/*для IE*/
}
/*без этого нарушается работа меню*/
#m * {
BORDER-COLLAPSE: collapse
}
/*стили основного меню*/
#m {
}
/*стиль ссылок основного меню*/
.a {
BACKGROUND: #F9F8F5;
COLOR: #25336A;
TEXT-DECORATION: none;
}
/*стили выпадающего меню для IE*/
* HTML #m .a table {
DISPLAY: block
}
/*стили выпадающего меню*/
.a table {
DISPLAY: block
}
/*скрывает выпадающие меню*/
#m table {
DISPLAY: none
}
#m table A {
DISPLAY: none
}
#m .a {
COLOR: #25336A;
}
/*смена стилей при на ведении курсора*/
#m .a:hover {
BACKGROUND: #E1DECD;
COLOR: #25336A;
}
.menu:hover {
BACKGROUND: #E1DECD;
COLOR: #000;
BORDER: #000 0px solid/*для OP*/
}
/*стили выпадающего меню при на ведении курсора*/
#m .a:hover table {
BACKGROUND: #F9F8F5;
BORDER: #000 1px solid;
POSITION: absolute;
DISPLAY: block;
WHITE-SPACE: nowrap
}
.menu:hover table {
BACKGROUND: #F9F8F5;
BORDER: #000 1px solid;
POSITION: absolute;
DISPLAY: block;
WHITE-SPACE: nowrap
}
#m .a:hover table A {
COLOR: #25336A;
TEXT-DECORATION: none;
BORDER-RIGHT: #7da6ee 1px solid;/*дрожание по горизантали*/
PADDING: 1px 12px;/*отступы выпад меню*/
DISPLAY: block;
WHITE-SPACE: nowrap
}
#m .menu:hover table A {
COLOR: #25336A;
TEXT-DECORATION: none;
BORDER-RIGHT: #7da6ee 1px solid;
PADDING: 1px 12px;/*отступы в подменю выпад. меню*/
DISPLAY: block;
WHITE-SPACE: nowrap
}
/*стиль ссылок вып. меню при наведении курсора*/
#m .a:hover table A:hover {
BACKGROUND: #E1DECD;
COLOR: #25336A;
TEXT-DECORATION: none;
BORDER: #000 1px solid;/*дрожание по вертикали*/
PADDING-RIGHT: 12px;
PADDING-TOP: 0px;
PADDING-LEFT: 11px;
PADDING-BOTTOM: 0px;
DISPLAY: block
}
#m .menu:hover table A:hover {
BACKGROUND: #25336A;
COLOR: #000;
TEXT-DECORATION: none;
BORDER: #000 1px solid;
PADDING-RIGHT: 12px;
padding-top: 0px;
PADDING-LEFT: 11px;
PADDING-BOTTOM: 0px;
DISPLAY: block
}
.menu {
MARGIN: 1px;
FLOAT: left
}
/*стили второго вложения*/
.menu1 {
FONT: 8pt Verdana, sans-serif;
COLOR: #000
}
.a1 {
DISPLAY: none
}
.menu1:hover .a1 {
PADDING: 0px 115px;/*для FF*/
POSITION: absolute;
DISPLAY: block;
FLOAT: left;
LEFT: -40px;
TOP: 5px
}
.menu1:hover {
DISPLAY: block
}
/*стили третьего вложения*/
.menu2 {
FONT: 8pt Verdana, sans-serif;
COLOR: #000
}
.a2 {
DISPLAY: none
}
.menu2:hover .a2 {
PADDING: 0px 115px;/*для FF*/
POSITION: absolute;
DISPLAY: block;
FLOAT: left;
LEFT: -35px;
TOP: 5px
}
.menu2:hover {
DISPLAY: block
}
/*стили четвертого вложения*/
.menu3 {
FONT: 8pt Verdana, sans-serif;
COLOR: #000
}
.a3 {
DISPLAY: none
}
.menu3:hover .a3 {
PADDING: 0px 115px;/*для FF*/
POSITION: absolute;
DISPLAY: block;
FLOAT: left;
LEFT: -30px;
TOP: 5px
}
.menu3:hover {
DISPLAY: block
}
|
| |
| |
|
|
| |
|
|
| |
для: kid
(08.09.2005 в 17:48)
| | | А HTML-код? | |
| |
|
|
| |
|
|
| |
для: kid
(08.09.2005 в 17:48)
| | | Лучше почитать оригинал:
http://www.realcoding.net/article/view/2731 | |
| |
|
|
