|
|
Модератор форума: Yuri_G |
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Неправильно отображается CSS меню |
Неправильно отображается CSS меню |
установил css меню на сайте. Сам css работает, НО. При прокрутке страницы вниз съезжает подраздел меню вниз( т.е для того что бы корректно отображалось нужно обязательно прокрутить страницу в самый топ), а так же при изменении масштаба съезжает конструкция. Как исправить не знаю. Подскажите пожалуйста, скрины прикрепляю
css /*---------- Wrapper --------------------*/ #menu { list-style:none; width:1000px; margin:-40px 0px 0px 0px; height:43px; padding:0px 0px 0px 0px; /* Rounded Corners */ -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; /* Background color and gradients */ background: #808080; background: -moz-linear-gradient(top, #808080, #808080); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#191919), to(#5E5E5E)); /* Borders */ border: 0px solid #002232; -moz-box-shadow:inset 0px 0px 1px #edf9ff; -webkit-box-shadow:inset 0px 0px 1px #edf9ff; box-shadow:inset 0px 0px 1px #edf9ff; } #menu li { float:left; text-align:center; position:relative; padding: 4px 2px 4px 10px; margin: 7px 5px 0px 5px; border:none; } #menu li:hover { border: 1px solid #777777; padding: 4px 10px 4px 10px; /* Background color and gradients */ background: #F4F4F4; background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); /* Rounded corners */ -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; } #menu li a { font-family:Arial, Helvetica, sans-serif; font-size:14px; color: #EEEEEE; display:block; outline:0; text-decoration:none; text-shadow: 1px 1px 1px #000; } #menu li:hover a { color:#161616; text-shadow: 1px 1px 1px #FFFFFF; } .col_6 { display:inline; float:left; position:relative; margin-left:2px; margin-right:2px; width:690px; } .col_2 { display:inline; float:left; position:relative; margin-left:120px; margin-right:5px; width:490px; } #menu li:hover .dropdown_2columns { left:292px; top:auto; } .col_3 { display:inline; float:left; position:relative; margin-left:242px; margin-right:5px; width:410px; } #menu li:hover .dropdown_3columns { left:292px; top:auto; } .col_4 { display:inline; float:left; position:relative; margin-left:5px; margin-right:5px; width:550px; } #menu li:hover .dropdown_4columns { left:292px; top:auto; } .col_5 { display:inline; float:left; position:relative; margin-left:468px; margin-right:5px; width:690px; } #menu li:hover .dropdown_5columns { left:292px; top:auto; } .col_7 { display:inline; float:left; position:relative; margin-left:570px; margin-right:5px; width:690px; } #menu li:hover .dropdown_7columns { left:292px; top:auto; } .col_8 { display:inline; float:left; position:relative; margin-left:675px; margin-right:5px; width:690px; } #menu li:hover .dropdown_8columns { left:292px; top:auto; } .dropdown_1column { float:left; position:absolute; left:-999em; text-align:left; border:1px solid #777; border-top:none; background:0 to(#BBBBBB)); -moz-border-radius:0 5px 5px; -webkit-border-radius:0 5px 5px 5px; border-radius:0 5px 5px 5px; width:100px; margin:3px auto; padding:9px 5px 5px; } #menu li:hover .dropdown_1column, { left:-1px; top:auto; } .col_1 { display:inline; float:left; position:relative; width:100px; margin:10px 5px 5px; } #menu .menu_right { float:right; margin-right:0; } #menu li .align_right { -moz-border-radius:5px 0 5px 5px; -webkit-border-radius:5px 0 5px 5px; border-radius:5px 0 5px 5px; } #menu li:hover .align_right { left:auto; right:-1px; top:auto; } d #menu p,#menu h2,#menu h3,#menu ul li { font-family:Arial, Helvetica, sans-serif; line-height:21px; font-size:12px; text-align:left; text-shadow:1px 1px 1px #FFF; } #menu h2 { font-size:21px; font-weight:400; letter-spacing:-1px; padding-bottom:14px; border-bottom:1px solid #666; margin:7px 0 14px; } #menu h3 { font-size:14px; padding-bottom:7px; border-bottom:1px solid #888; margin:7px 0 14px; } #menu p { line-height:18px; margin:0 0 10px; } #menu li:hover div a { font-size:12px; color:#00273a; } #menu li:hover div a:hover { color:#029feb; } .strong { font-weight:700; } .italic { font-style:italic; } .imgshadow { background:#FFF; border:1px solid #777; margin-top:5px; -moz-box-shadow:0 0 5px #666; -webkit-box-shadow:0 0 5px #666; box-shadow:0 0 5px #666; padding:4px; } .img_left { width:auto; float:left; margin:5px 15px 5px 5px; } #menu li .black_box { background-color:#333; color:#eee; text-shadow:1px 1px 1px #000; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -webkit-box-shadow:inset 0 0 3px #000; -moz-box-shadow:inset 0 0 3px #000; box-shadow:inset 0 0 3px #000; padding:4px 6px; } #menu li ul { list-style:none; margin:0; padding:0; } #menu li ul li { font-size:12px; line-height:24px; position:relative; text-shadow:1px 1px 1px #fff; float:none; text-align:left; width:130px; margin:0; padding:0; } #menu li ul li:hover { background:none; border:none; margin:0; padding:0; } #menu li .greybox li { background:#F4F4F4; border:1px solid #bbbbbb; margin:0px 0px 4px 0px; padding:4px 6px 4px 6px; width:90px; /* Rounded Corners */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #menu li .greybox li:hover { background:#ffffff; border:1px solid #aaaaaa; padding:4px 6px 4px 6px; margin:0px 0px 4px 0px; } .dropdown_2columns,.dropdown_3columns,.dropdown_4columns,.dropdown_5columns,.dropdown_7columns,.dropdown_8columns { width:988px; float:left; position:fixed; left:-999em; text-align:left; border:1px solid #777; border-top:none; background:#F4F4F4; background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); -moz-border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; border-radius:0 0 5px 5px; margin:3px auto; padding:5px; } Добавлено (12 Фев 2015, 00:08:33) <div style="position:absolute;z-index:1;"> <ul id="menu"> <li><table align="center" border="0" cellpadding="1" cellspacing="1" style="width: auto;"><tbody><tr> <td style="text-align: center; vertical-align: middle;"><a href="/"><img src="http://irongamer.ru/images/home-menu-main.png" border="0" alt="На главную" title="На главную" height="20" width="22" /></td> <td style="text-align: center; vertical-align: middle;"><a href="/" class="drop">ГЛАВНАЯ</a></li></td> </tr> </tbody> </table> <li><table align="center" border="0" cellpadding="1" cellspacing="1" style="width: auto;"><tbody><tr> <td style="text-align: center; vertical-align: middle;"><a href="/news/"><img src="http://irongamer.ru/images/news-menu-main.png" border="0" alt="Новости" title="Новости" height="22" width="22" /></a></td> <td style="text-align: center; vertical-align: middle;"><a href="/news/" class="drop">НОВОСТИ</a></td> </tr> </tbody> </table> <div class="dropdown_2columns"> <div class="col_2"> <ul class="simple"> <li><a href="/news/industry/1-0-1">ИНДУСТРИЯ</a></li> <li><a href="/news/preview/1-0-2">АНОНСЫ И РЕЛИЗЫ</a></li> <li><a href="/news/hardware/1-0-3">ЖЕЛЕЗО</a></li> <li><a href="/news/mobile/1-0-4">МОБИЛЬНЫЕ</a></li> <li><a href="/news/films/1-0-5">КИНОИНДУСТРИЯ</a></li> </ul> </div> <div class="col_6"> <br><span style="font-size:14px;color:#000000;">Случайные новости:</span><br> $MYINF_17$ </div> </div> </li> <li><table align="center" border="0" cellpadding="1" cellspacing="1" style="width: auto;"><tbody><tr> <td style="text-align: center; vertical-align: middle;"><a href="/publ/"><img src="http://irongamer.ru/images/publ-menu-main.png" border="0" alt="Статьи" title="Статьи" height="22" width="22" /></a></td> <td style="text-align: center; vertical-align: middle;"><a href="/publ/" class="drop">СТАТЬИ</a></td> </tr> </tbody> </table> <div class="dropdown_3columns"> <div class="col_3"> <ul class="simple"> <li><a href="/publ/reviews/5">ОБЗОРЫ</a></li> <li><a href="/publ/interesting/cybersport/7">КИБЕРСПОРТ</a></li> <li><a href="/publ/interesting/guides/8">РУКОВОДСТВА</a></li> <li><a href="/publ/interesting/companies/9">КОМПАНИИ</a></li> <li><a href="/publ/interesting/people/10">ЛИЧНОСТИ</a></li> <li><a href="/publ/interesting/other/11">ДРУГОЕ</a></li> </ul> </div> <div class="col_6"> <br><span style="font-size:14px;color:#000000;">Случайные статьи:</span><br> $MYINF_18$ </div> </div> </li> <li><table align="center" border="0" cellpadding="1" cellspacing="1" style="width: auto;"><tbody><tr> <td style="text-align: center; vertical-align: middle;"><a href="/stuff/"><img src="http://irongamer.ru/images/games-menu-main.png" border="0" alt="База игр" title="База игр" height="20" width="24" /></a></td> <td style="text-align: center; vertical-align: middle;"><a href="/stuff/" class="drop">БАЗА ИГР</a></td> </tr> </tbody> </table> <div class="dropdown_4columns"> <div class="col_1"> <ul class="greybox"> <li><span style="text-align: center"><a href="/stuff/action/1">Action</a></span></li> </ul> </div> <div class="col_1"> <ul class="greybox"> <li><span style="text-align: center"><a href="/stuff/rpg/3">Ролевые (RPG)</a></span></li> </ul> </div> <div class="col_1"> <ul class="greybox"> <li><span style="text-align: center"><a href="/stuff/gonki/4">Гонки</a></span></li> </ul> </div> <div class="col_1"> <ul class="greybox"> <li><span style="text-align: center"><a href="/stuff/sport/5">Спортивные</a></span></li> </ul> </div> <div class="col_1"> <ul class="greybox"> <li><span style="text-align: center"><a href="/stuff/strategy/6">Стратегии</a></span></li> </ul> </div> <div class="col_1"> <ul class="greybox"> <li><span style="text-align: center"><a href="/stuff/logic/7">Логические</a></span></li> </ul> </div> <div class="col_6"> <span style="font-size:2px;"><br><br></span> <span style="font-size:14px;color:#000000;">ТОП игр по рейтингу пользователей:</span> <span style="font-size:2px;"><br><br></span> $MYINF_19$ </div> </div> </li> <li><table align="center" border="0" cellpadding="1" cellspacing="1" style="width: auto;"><tbody><tr> <td style="text-align: center; vertical-align: middle;"><a href="/video/"><img src="http://irongamer.ru/images/video-menu-main.png" border="0" alt="Видео" title="Видео" height="20" width="24" /></a></td> <td style="text-align: center; vertical-align: middle;"><a href="/video/" class="drop">ВИДЕО</a></td> </tr> </tbody> </table> <div class="dropdown_5columns"> <div class="col_5"> <ul class="simple"> <li><a href="/video/vic/trailers">ТРЕЙЛЕРЫ</a></li> <li><a href="/video/vic/reviews">ОБЗОРЫ</a></li> <li><a href="/video/vic/films">КИНО</a></li> <li><a href="/video/vic/interest">ИНТЕРЕСНОЕ</a></li> </ul> </div> <div class="col_6"> <span style="font-size:2px;"><br><br></span> <span style="font-size:14px;color:#000000;">Популярное видео:</span> <span style="font-size:2px;"><br><br></span> $MYINF_20$ </div> </div> </li> <li><table align="center" border="0" cellpadding="1" cellspacing="1" style="width: auto;"><tbody><tr> <td style="text-align: center; vertical-align: middle;"><a href="/load/"><img src="http://irongamer.ru/images/load-menu-main.png" border="0" alt="Файлы" title="Файлы" height="20" width="24" /></a></td> <td style="text-align: center; vertical-align: middle;"><a href="/load/" class="drop">ФАЙЛЫ</a></td> </tr> </tbody> </table> <div class="dropdown_7columns"> <div class="col_7"> <ul class="simple"> <li><a href="/load/mods/2">МОДЫ</a></li> <li><a href="/load/patch/3">ПАТЧИ</a></li> <li><a href="/load/maps/4">КАРТЫ</a></li> <li><a href="/load/rus/5">РУСИФИКАТОРЫ</a></li> <li><a href="/load/skins/7">СКИНЫ</a></li> <li><a href="/load/programs/6">ПРОГРАММЫ</a></li> </ul> </div> <div class="col_6"> <span style="font-size:2px;"><br><br></span> <span style="font-size:14px;color:#000000;">Случайные файлы:</span> <span style="font-size:2px;"><br><br></span> $MYINF_21$ <span style="font-size:8px; "><br><br></span> </div> </div> </li> <li><table align="center" border="0" cellpadding="1" cellspacing="1" style="width: auto;"><tbody><tr> <td style="text-align: center; vertical-align: middle;"><a href="/photo/"><img src="http://irongamer.ru/images/gallery-menu-main.png" border="0" alt="Галерея" title="Галерея" height="21" width="24" /></a></td> <td style="text-align: center; vertical-align: middle;"><a href="/photo/" class="drop">ГАЛЕРЕЯ</a></td> </tr> </tbody> </table> <div class="dropdown_8columns"> <div class="col_8"> <ul class="simple"> <li><a href="/search/?q=&m=photo&t=1">ПОИСК ПО ИГРАМ</a></li> <li><a href="/photo">ВСЕ ИГРЫ</a></li> </ul> </div> <div class="col_6"> <span style="font-size:2px;"><br><br></span> <span style="font-size:14px;color:#000000;">Случайные изображения:</span> <span style="font-size:2px;"><br><br></span> $MYINF_22$ <span style="font-size:2px;"><br><br></span> </div> </div> </li> <li><table align="center" border="0" cellpadding="1" cellspacing="1" style="width: auto;"><tbody><tr> <td style="text-align: center; vertical-align: middle;"><a href="/forum/"><img src="http://irongamer.ru/images/forum-menu-main.png" border="0" alt="Форум" title="Форум" height="21" width="22" /></td> <td style="text-align: center; vertical-align: middle;"><a href="/forum/" class="drop">ФОРУМ</a></li></td> </tr> </tbody> </table> <li><table align="center" border="0" cellpadding="1" cellspacing="1" style="width: auto;"><tbody><tr> <td style="text-align: center; vertical-align: middle;"><a href="/index/0-2"><img src="http://irongamer.ru/images/faq-main-menu.png" border="0" alt="F.A.Q." title="F.A.Q." height="21" width="22" /></td> <td style="text-align: center; vertical-align: middle;"><a href="/index/0-2" class="drop">F.A.Q.</a></li></td> </tr> </tbody> </table> </ul> </div> Сообщение от ser1ko
|
| |||
| |||