Добрый день. Достался мне сайт на эксперименты.
И уже неделю не могу понять как выровнять меню по центру...при добавлении параметра position: relative; меню центруется, но слетает подменю...
.menusys_mega {
width: 113%;
height: 47px;
}
#menusys_mega {
margin: 0;
padding: 0;
float: left;
width: 100%;
}
#menusys_mega .menusub_mega {
margin-top: 0;
margin-left: 13px !important;
padding: 0;
z-index: 666;
position: absolute;
background: #f4f4f4;
}
#menusys_mega .submenu-wrap{
float: left;
width: 100%;
}
#menusys_mega .megacol .submenu-wrap{
border: none;
background: none;
}
#menusys_mega .megacol .megacol .menusub_mega {
margin-top: -35px !important;
margin-left: -10px !important;
}
#menusys_mega .megacol .megacol .megacol .menusub_mega {
margin-left: -5px !important;
}
#menusys_mega li {
padding: 0;
float: left;
background: none;
list-style-type: none;
}
#menusys_mega li a {
padding-left: 13px;
display: block;
text-decoration: none;
}
#menusys_mega li .menu-title {
padding-right: 10px;
padding-left: 10px;
display: block;
display: block;
/color: #1c1c1c;
color: white;
width: auto;
line-height: 47px;
//font-size: 14px;
font-weight: bold;
font-family: "arial";
/text-shadow: 1px 1px 0px #FFF;
text-transform: uppercase;
list-style-type: none;
}
#menusys_mega li.first-item a.active,
#menusys_mega li.first-item:hover a.active,
#menusys_mega li.first-item a:hover {
/padding-left: 40px;
display: block;
/background: url(../../images/mainmenu-home.png) no-repeat 0 0;
}
#menusys_mega li.first-item a.active span.menu-title {
/background: url(../../images/mainmenu-hover.png) no-repeat right 0;
display: block;
padding: 0;
padding-right: 10px;
padding-left: 10px;
/color: #0565A7;
/color: white;
line-height: 47px;
}
#menusys_mega li.first-item a {
/padding-left: 40px;
/background: url(../../images/icon-home.png) no-repeat 20px 14px;
}
#menusys_mega li.first-item a:hover {
/padding-left: 40px;
/background: url(../../images/mainmenu-home.png) no-repeat left 0;
}
#menusys_mega li:hover a,
#menusys_mega li:active a,
#menusys_mega li:focus a,
#menusys_mega li.hasChild:hover a,
#menusys_mega li a.active,
#menusys_mega li a.active:hover,
#menusys_mega li a.active:active,
#menusys_mega li a.active:focus {
display: block;
overflow: hidden;
/background: url(../../images/mainmenu-hover.png) no-repeat left 0;
}
#menusys_mega li:active span.menu-title,
#menusys_mega li:focus span.menu-title,
#menusys_mega li a.active .menu-title,
#menusys_mega li a.active:active .menu-title
{
/background: url(../../images/mainmenu-hover.png) no-repeat right 0;
/background-color:#367DED;
display: block;
/color: #0565A7;
color: white;
}
#menusys_mega li:hover span.menu-title,
#menusys_mega li.hasChild:hover span.menu-title,
#menusys_mega li a.active:hover .menu-title,
#menusys_mega li a.active:focus .menu-title{
/background: url(../../images/mainmenu-hover.png) no-repeat right 0;
background-color:#367DED;
display: block;
/color: #0565A7;
color: white;
}
#menusys_mega li:hover ul a .menu-title,
#menusys_mega li:active ul a .menu-title,
#menusys_mega li:focus ul a .menu-title {
color: #0565A7;
text-shadow: none;
display: block;
}
#menusys_mega li ul a.active .menu-title {}
#menusys_mega li ul a:hover ,
#menusys_mega li ul a:active,
#menusys_mega li ul a:focus{
}
#menusys_mega li ul a:hover .menu-title,
#menusys_mega li ul a:active .menu-title,
#menusys_mega li ul a:focus .menu-title {
color: #0565A7;
text-decoration: underline;
}
/*--------------------------------*/
#menusys_mega .menu-desc{
padding: 0 0px 5px 0;
border: none;
display: block;
font-size: 110%;
color: #6d6d6d;
}
#menusys_mega .menu-image {
border: none;
float: left;
line-height: 44px;
padding: 8px 0 0;
margin-right: 3px;
}
#menusys_mega .menu-image img {}
#menusys_mega li.hasChild:hover a .menu-title{
}
span.has-image {
display: block;
background-repeat: no-repeat;
background-position: 2px 7px;
padding-left: 22px;
}
span.no-image {
display: block;
}
#menusys_mega .mega-group span.has-image,
#menusys_mega .mega-group span.no-image,
#menusys_mega .mega-group span.has-image {
padding-left: 20px;
}
#menusys_mega .mega-group a,
#menusys_mega ul a {
padding-left: 20px;
color: #767676;
margin: 0;
background: none;
}
#menusys_mega li ul.mega-ul span.has-image,
#menusys_mega li ul.mega-ul span.no-image,
#menusys_mega li:hover ul.mega-ul span.no-image {
/padding-left: 10px;
display: block;
height: 25px;
/background: url(../../images/submenu-arrow.png) no-repeat 0 9px;
}
#menusys_mega li ul.mega-ul a:hover span.has-image,
#menusys_mega li ul.mega-ul a:hover span.no-image,
#menusys_mega li:hover ul.mega-ul a:hover span.no-image{
padding-left: 10px;
background: url(../../images/submenu-arrow.png) no-repeat 0 -14px;
}
#menusys_mega .mega-group .menu-title{
display: block;
color: #fff;
line-height: 30px;
background: none !important;
text-shadow: none;
}
#menusys_mega .megacol .mega-group .menu-title{
padding: 0;
font-weight: bold;
font-size: 100%;
color: #333 ;
text-shadow: 1px 1px 0px #dfdfdf;
line-height: 22px;
}
#menusys_mega .column1,
#menusys_mega .column2{
width: 100%;
display: block;
}
#menusys_mega .megacol {
float: left;
padding: 5px 10px;
z-index: 9;
/margin-bottom: 3px;
background-color:#367DED;
list-style: none;
}
#menusys_mega .megacol .megacol{padding: 0;}
#menusys_mega .megacol .megacol .megacol{padding: 5px 10px;}
#menusys_mega .megacol ul {margin: 0;float: none;}
#menusys_mega .megacol ul.mega-ul {padding: 0;}
#menusys_mega .megacol ul li {
padding: 0;
float: none;
/border-bottom: 1px dashed #dee1e1;
list-style: none;
}
#menusys_mega .megacol ul li.first-item a,
#menusys_mega .megacol ul li.first-item:hover a,
#menusys_mega .megacol ul li.first-item a.active{
width: auto;
height: auto;
background: none;
}
#menusys_mega .megacol .mega-group a{
padding: 3px 0px;
margin: 0;
}
#menusys_mega .megacol ul li.first-item span.has-image{
display: block;
}
#menusys_mega .menusub_mega .mega-group {
padding: 0;
clear: both;
margin-bottom: 10px;
/background: url(../../images/mega-group-bg.png) no-repeat left 31px;
}
#menusys_mega .mega-group span.has-image,
#menusys_mega .mega-group span.no-image {
margin: 0;
padding: 5px 0;
display: block;
}
#menusys_mega div.megacol div.mega-group a{
padding: 0 10px;
background: none;
}
#menusys_mega div.megacol div.mega-group span.menu-title{
padding-right: 0;
font-weight: bold;
font-size: 100%;
color: #1c1c1c ;
text-transform: none;
line-height: 22px;
background: none;
}
#menusys_mega .menusub_mega .mega-module {
clear: both;
padding-top: 5px;
}
#menusys_mega .menusub_mega h3 {
margin: 0 0 10px 0;
font-size: 110%;
line-height: 25px;
font-weight: normal;
color: #FF2C7A !important;
text-transform: uppercase;
}
#menusys_mega .megacol ul.mega-ul li a,
#menusys_mega li:hover ul.mega-ul li a {
padding-left: 8px;
background: none;
margin: 2px 0;
}
#menusys_mega .megacol ul.mega-ul li span.menu-title {
line-height: 24px;
height: 25px;
padding-right: 10px;
display: block;
font-size: 100%;
font-weight: normal;
text-transform: none;
/color: #1C1C1C !important;
/color: white !important;
background: none ;
}
#menusys_mega .megacol ul.mega-ul li a:hover,
#menusys_mega .megacol ul.mega-ul li a:focus,
#menusys_mega .megacol ul.mega-ul li a:active {
text-decoration: none;
display: block;
/padding-left: 8px;
/background: #0565A7;
}
#menusys_mega li ul a.item:hover span.menu-title,
#menusys_mega li ul a.item:active span.menu-title,
#menusys_mega li ul a.item:focus span.menu-title,
#menusys_mega li ul a.active:hover span.menu-title {
color: #fff !important;
padding: 0;
margin: 0;
text-decoration: none;
}