| |
|
|
| | тело css файла
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.6em;
}
.menu{
position: relative;
left: -50%; /*Возврашаем меню точно в центр*/
float: left;
list-style: none;
margin: 0; padding: 0;
}
.menu, .menu ul {
border: 0;
list-style-type: none;
display: block;
}
.menu li {
margin: 0 15px 0 0
padding: 0 0 0 ;
border: 0;
display: block;
float: left;
z-index: 5;
font-weight:bold;
}
.menu li:hover {
z-index: 100;
white-space: normal;
}
.menu li li {
float: none;
width:15em;
font-weight:normal;
}
.menu ul {
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
}
.menu li:hover>ul {
visibility: visible;
top: 100%;
left:auto;
}
.menu li li:hover>ul {
top: 0;
}
.menu:after, .menu ul:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.menu, .menu ul {
min-height: 0;
}
.menu ul {
background-image: url(empty.gif);
padding: 0px 30px 30px 30px;
margin: 0 0 0 -30px;
}
.menu ul ul {
padding: 5px 30px 30px 10px;
margin: 0 0 0 -10px;
}
.menu, .menu ul li {
color: #eee;
background: #85a1d1;
}
.menu ul {
width: 11em;
}
.menu a {
text-decoration: none;
color: #eee;
padding: .4em 1em;
display: block;
position: relative;
}
.menu a:hover, .menu li:hover>a {
color: #000;
background-color:#5c739c;
}
.menu li li {
border: 1px solid #ccc;
height:1.7em;
cursor:pointer;
vertical-align:middle;
padding-top:0.2em;
padding-bottom:0.2em;
}
.menu li li:hover {
background-color:#5c739c;
height:1.7em;
}
.menu li a:hover {
background-color:#5c739c;
height:1.7em;
}
.menu ul>li + li {
border-top: 0;
}
.menu li li:hover>ul {
top: 5px;
left: 90%;
}
.menu>li:first-child>a, .menu li + li + li li:first-child>a {
}
.navi {
width: 100%; /*Устанавливаем фиксированную ширину*/
position: relative;
font-size: 1em;
border: 1px dotted red;
text-align: center;
clear:right;
}
.navicontainer {
position:relative;
float:left;
left: 50%; /*Сдвигаем влево на 50%*/
position: relative;
text-align: center;
clear:both;
}
|
тело меню
<div class="navi">
<div class="navicontainer">
<ul class="menu">
<li><a href="http://gals-agro.ru/index.php?page=about">О КОМПАНИИ</a></li>
<li><a href="http://gals-agro.ru/index.php?page=news">НОВОСТИ</a></li>
<li><a class="qmparent" href="javascript:void(0);">СЕЛЬХОЗТЕХНИКА</a>
<ul>
<li>КАТАЛОГ
<ul>
<li><a href="http://gals-agro.ru/index.php?page=samohod">САМОХОД.ТЕХНИКА</a></li>
<li><a href="http://gals-agro.ru/index.php?page=pochva">ПОЧВООБРАБОТКА</a></li>
<li><a href="http://gals-agro.ru/index.php?page=razbr">РАЗБРАСЫВАТЕЛИ</a></li>
<li><a href="http://gals-agro.ru/index.php?page=oprisk">ОПРЫСКИВАТЕЛИ</a></li>
<li><a href="http://gals-agro.ru/index.php?page=posev;">ПОСЕВНАЯ</a></li>
<li><a href="http://gals-agro.ru/index.php?page=korm">КОРМОЗАГОТОВ.</a></li>
</ul>
</li>
<li>ПРОИЗВОДИТЕЛИ
<ul>
<li><a href="javascript:void(0);">FENDT</a></li>
<li><a href="javascript:void(0);">VALTRA</a></li>
<li><a href="javascript:void(0);">KVERNELAND</a></li>
<li><a href="javascript:void(0);">GRIMME</a></li>
<li><a href="javascript:void(0);">LEMKEN</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="qmparent" href="javascript:void(0);">СЕРВИС</a>
<ul>
<li>ПОСТАВКА З/Ч</li>
<li>СЕРВИС.ОБСЛУЖИВАНИЕ</li>
</ul>
</li>
<li><a class="qmparent" href="javascript:void(0);">СЕМЕНА</a>
<ul>
<li><a href="javascript:void(0);">КАТАЛОГ</a></li>
<li><a href="javascript:void(0);">ПРОИЗВОДИТЕЛИ</a></li>
</ul>
</li>
<li><a class="qmparent" href="javascript:void(0);">СЗР</a>
<ul>
<li><a class="qmparent" href="javascript:void(0);">КАТАЛОГ</a>
<ul>
<li><a href="http://gals-agro.ru/index.php?page=gerb">ГЕРБИЦИДЫ</a></li>
<li><a href="http://gals-agro.ru/index.php?page=inset">ИНСЕКТИЦИДЫ</a></li>
<li><a href="http://gals-agro.ru/index.php?page=fun">ФУГИЦИДЫ</a></li>
<li><a href="http://gals-agro.ru/index.php?page=prot">ПОТРАВИТЕЛИ</a></li>
<li><a href="http://gals-agro.ru/index.php?page=des">ДЕСИКАНТ</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">ПРОИЗВОДИТЕЛИ</a></li>
</ul>
</li>
<li><a class="qmparent" href="javascript:void(0);">ЗЕРНО</a>
<ul>
<li><a href="javascript:void(0);">ПРОДУКЦИЯ</a></li>
<li><a href="http://gals-agro.ru/index.php?page=z_proizvod">ПРОИЗВОДИТЕЛИ</a></li>
<li><a href="javascript:void(0);">БО ЭЛЕВАТОР</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">ОВОЩИ</a></li>
<li ><a href="http://gals-agro.ru/index.php?page=akcii">АКЦИИ</a></li>
<li ><a href="javascript:void(0);">ВАКАНСИИ</a></li>
<li ><a href="http://gals-agro.ru/index.php?page=contact;">КОНТАКТЫ</a></li>
</ul>
</div>
</div>
|
это вроде рабочий пример размещения css меню ровно по центру, но у меня проблема в ослике7 и ФФ, что видно.. .смотри те не рисунке... то есть меню нормально центрируется, но появляется скролинг страницы направо... как сделать так что бы его не было... отключение скролиногов не вариант, потому что у меня страница будет прокручиваться глубоко вниз | |
| |
|
|
| |
|
|
| |
для: Валиант
(07.12.2007 в 12:47)
| | | можно выровнять по центру блок, только в том случае, если у него указана ширина в абсолютных единицах.
лучше откажитесь от такого меню, не надо бояться скриптов ))
кстати при навидение на пункт ie6 просто вылетел... | |
| |
|
|
| |
|
|
| |
для: AlexSol
(07.12.2007 в 13:20)
| | | Я это меню делал на шестом ослике если что)))
Меню же в итоге центрируется!!! просто надо сделать как то что бы блок, который мы смещаем на 50% влево был толи невидимым, то ли прозрачным, что бы его ширина не влияла на размер основного экрана... | |
| |
|
|
