|
Помогите с горизонтальным меню
|
|
Воскресенье, 24.02.2013, 22:40
Пользователь
Возникла такая проблема, горизонтальное меню в opera отображается корректно, а вот в остальных браузерах криво помогите решить проблему
Скрин
http://s006.radikal.ru/i214/1302/60/3ac57ea10dd6.jpg
Код меню
<div id="menu">
<ul>
<li class="nav"><a href="/">Главная</a><span></span>
<div class="subnav">
<ul class="sub">
<li><a href="/">Программы</a><span class="first"></span></li>
<li><a href="/load/filmy_torrent/13">Фильмы</a></li>
<li><a href="/load/igry/10">Игры</a></li>
<li><a href="/load/windows/1">Windows</a><span class="last"></span></li>
</ul>
</div>
</li>
<li class="nav"><a href="/load/windows/1">Windows</a><span></span>
<div class="subnav">
<ul class="sub">
<li><a href="/load/windows/windows_xp/2">Windows XP</a><span class="first"></span></li>
<li><a href="/load/windows/windows_seven/3">Windows seven</a></li>
<li><a href="/load/windows/windows_8/20">Windows 8</a></li>
<li><a href="/load/windows/windows_vista/4">Windows VISTA</a><span class="last"></span></li>
<li><a href="/load/windows/linux/9">Linux</a><span class="last"></span></li>
<li><a href="/load/windows/mac_os/21">Mac OS</a><span class="last"></span></li>
<li><a href="/load/windows/drugoe/12">Другая ОС</a><span class="last"></span></li>
</ul>
</div>
</li>
<li class="nav"><a href="/forum">Форум</a><span></span></li>
<li class="nav"><a href="/index/skachat_torrent/0-18">торрент программа</a><span></span></li>
<li class="nav"><a href="/index/3">Регистрация</a></li>
</ul> |
|
Пользователь
| Мы что экстрасенсы? Давай css код |
|
Суббота, 02.03.2013, 15:03
Пользователь
Css
#menu {
margin-top: 6px;
text-align:center;
}
#menu .nav {
display:inline-block;
margin-left:-23px;
}
#menu .nav a {
display:inline-block;
background:url(img/bg-li.png) ;
color: #fff;
text-decoration:none;
height: 27px;
padding:0px 15px;
padding-top:9px;
margin-left:-5px;
margin-right:-4px;
text-shadow: 0px 1px 1px #78a600;
}
#menu .nav a:first-child {
border-left:1px solid #7cb700;
}
#menu .nav a:last-child {
border-right:1px solid #7cb700;
}
#menu .nav a:hover {
background: url(img/bg-li-hover.png) ;
}
#menu .nav a:hover span {
background: url(img/bg-span-hover.png) no-repeat;
}
#menu .nav span {
background: url(img/bg-span-hover.png) no-repeat;
}
#menu .nav span {
position:relative;
z-index:100;
display:block;
float:right;
background: url(img/bg-span.png) no-repeat;
width: 28px;
left:-12px;
height: 36px;
}
#menu span:hover {
background: url(img/bg-span-hover.png) no-repeat;
}
#menu li ul {
display:none;
}
#profile {float:right;margin-top:-99px;}
#forms {margin-right:10px;}
#other {margin-top:-31px;margin-left:500px;background:none;}
.loginField {background:url(img/login.png);width:92px;height:28px;border:none;padding-left:40px;font-size:12px;color:#5d7f04;}
.loginButton {width:27px;background:url(img/loginbutton.png);height:28px;border:none;}
.passwordField {background:url(img/password.png);width:92px;height:28px;border:none;padding-left:40px;font-size:12px;color:#5d7f04;}
#menu li:hover .sub {display:block;float:left;position:absolute;border:none;padding-top:10px;}
.sub li {width:150px;background: url(img/bg-menu-li.png) !important; height:29px !important;list-style:none !important;text-align:left !important;padding-left:0px !important;border:1px solid #69b402 !important;margin-top:-1px;padding-top:0px !important}
.sub a {border:none !important;background: url(img/list-style.png) 5px 6px no-repeat!important;padding-left: 24px !important;padding-top:6px !important;}
.sub li:hover {background:url(img/bg-menu-li-hover.png) !important;}
.sub li:hover a {color:#73a200 !important;text-shadow:0px 1px 1px #c4e900 !important;text-decoration:none !important;}
.sub {margin-left:-5px; background: url(img/bg-subnav.png);width: 152px;padding:9px;padding-top: 18px !important;padding-bottom: 18px !important;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
.subnav {padding-top:5px;}
.first {background:url(img/first-subnav.png) !important;width:152px !important;position:absolute !important;margin-left:21px !important;height:10px !important;margin-top:-10px;display:inline-block !important;}
.last {background:url(img/last-subnav.png) !important;width:152px !important;position:absolute !important;margin-left:21px !important;height:10px !important;margin-top:29px;display:inline-block !important;}
/* Middle |
|
