Меню сайта у меня модуль, который я настроила как могла.
Но визуально лучше он будет смотреться если пункты меню будут располагаться по центру.
Сайт
http://santehnik67.clubФайлы самого модуля меню: accordion.css
ul.accordion-menu li li {text-indent: 5px;}
ul.accordion-menu li li li {text-indent: 10px;}
ul.accordion-menu li li li li {text-indent: 15px;}
ul.accordion-menu {
border:1px solid #1a1a1a;
margin:0px;
padding:0px;
overflow:hidden;
line-height:16px;
list-style:none !important;
font-size:12px;
}
ul.accordion-menu-left {
text-align:left;
}
ul.accordion-menu-right {
text-align:right;
}
ul.accordion-menu li {
border-top:1px solid #1a1a1a;
}
ul.accordion-menu > li.first,
ul.accordion-menu > li:first-child {
border-top:0px;
}
ul.accordion-menu a,
ul.accordion-menu a:hover,
ul.accordion-menu a:visited,
ul.accordion-menu a:active,
ul.accordion-menu a:focus {
font-family:Arial;
background:none;
}
ul.accordion-menu.button-left li > .item-wrapper > .menu-button,
ul.accordion-menu.button-right li > .item-wrapper > .menu-button {
padding:12px 0px;
line-height:10px;
}
ul.accordion-menu.button-left li > .item-wrapper > .menu-button {
float:left;
}
ul.accordion-menu.button-right li > .item-wrapper > .menu-button {
float:right;
}
ul.accordion-menu.button-left li > .item-wrapper > .menu-button > img {
padding-left:10px;
}
ul.accordion-menu.button-right li > .item-wrapper > .menu-button > img {
padding-right:10px;
cursor:pointer;
}
ul.accordion-menu li > .item-wrapper > .menu-link {
min-height:35px;
overflow-y:hidden;
}
ul.accordion-menu li > .item-wrapper > .menu-link > a {
display:inline-block;
text-decoration:none;
background:none;
padding:10px 10px 9px 10px;
vertical-align:middle;
}
ul.accordion-menu li > .item-wrapper > .menu-link > a > img {
vertical-align:middle;
border:0 none;
height:auto;
max-width:100%;
padding:0 5px 0 0;
}
ul.accordion-menu-left li > .item-wrapper > .menu-link > a {
float:left;
}
ul.accordion-menu-right li > .item-wrapper > .menu-link > a {
float:right;
}
ul.accordion-menu > li > .item-wrapper > .menu-link > a {
font-weight:bold;
}
ul.accordion-menu li > .ul-wrapper {
display:none;
}
ul.accordion-menu li ul {
margin:0px;
padding:0px;
}
ul.accordion-menu-left li li > .item-wrapper > .menu-link > a {
padding-left:20px;
}
ul.accordion-menu-right li li > .item-wrapper > .menu-link > a {
padding-right:20px;
}
ul.accordion-menu-left li li li > .item-wrapper > .menu-link > a {
padding-left:30px;
}
ul.accordion-menu-right li li li > .item-wrapper > .menu-link > a {
padding-right:30px;
}
ul.accordion-menu-left li li li li > .item-wrapper > .menu-link > a {
padding-left:40px;
}
ul.accordion-menu-right li li li li > .item-wrapper > .menu-link > a {
padding-right:40px;
}
ul.accordion-menu-left li li li li li > .item-wrapper > .menu-link > a {
padding-left:50px;
}
ul.accordion-menu-right li li li li li > .item-wrapper > .menu-link > a {
padding-right:50px;
}
и flyout.css
ul.flyout-menu {
border:1px solid #1a1a1a;
margin:0px;
padding:0px;
line-height:16px;
list-style:none;
}
ul.flyout-menu.text-right {
text-align:right;
}
ul.flyout-menu.text-left {
text-align:left;
}
ul.flyout-menu.horizontal {
width:100%;
float:left;
}
ul.flyout-menu li {
position:relative;
border-bottom:1px solid #1A1A1A;
vertical-align:middle;
}
ul.flyout-menu li.last,
ul.flyout-menu li:last-of-type {
border:none;
}
ul.flyout-menu.horizontal.msie6 > li,
ul.flyout-menu.horizontal.msie7 > li,
ul.flyout-menu.horizontal.msie8 > li {
margin-top:0px;
margin-bottom:0px;
}
ul.flyout-menu.horizontal.msie8 > li {
margin-left:-5px;
}
ul.flyout-menu.horizontal.msie6 > li,
ul.flyout-menu.horizontal.msie7 > li {
margin-left:-1px;
display:inline;
}
ul.flyout-menu.horizontal > li.first,
ul.flyout-menu.horizontal > li:first-child {
margin-left:0px;
}
ul.flyout-menu .item-wrapper {
min-height:35px;
overflow-y:hidden;
}
ul.flyout-menu.vertical .item-wrapper {
width:100%;
}
ul.flyout-menu .menu-button {
line-height:8px;
padding:12px 0;
min-height:11px;
cursor:pointer;
}
ul.flyout-menu.vertical.msie6 .menu-button,
ul.flyout-menu.vertical.msie7 .menu-button,
ul.flyout-menu.vertical.msie8 .menu-button {
padding:10px 0;
}
ul.flyout-menu.button-right .menu-button {
float:right;
}
ul.flyout-menu.button-left .menu-button {
float:left;
}
ul.flyout-menu.button-right .menu-button img {
padding-right:10px;
}
ul.flyout-menu.button-left .menu-button img {
padding-left:10px;
}
ul.flyout-menu > li > .item-wrapper > .menu-link > a {
font-weight:bold;
}
ul.flyout-menu.text-left .menu-link {
margin-right: 21px;
}
ul.flyout-menu.text-right .menu-link {
margin-left: 21px;
}
ul.flyout-menu.vertical.msie6 > li > .item-wrapper > .menu-link,
ul.flyout-menu.vertical.msie7 > li > .item-wrapper > .menu-link,
ul.flyout-menu.vertical.msie8 > li > .item-wrapper > .menu-link {
float:none;
}
ul.flyout-menu .menu-link a {
min-height:15px;
font-size:12px;
text-decoration:none;
display:block;
padding:9px;
box-sizing:border-box;
font-family:arial;
}
ul.flyout-menu .menu-link img {
vertical-align:middle;
border:0 none;
height:auto;
max-width:100%;
padding-right:5px;
}
ul.flyout-menu .ul-wrapper {
display:none;
z-index:1000;
}
ul.flyout-menu.horizontal.flyout-right.msie6 .ul-wrapper,
ul.flyout-menu.horizontal.flyout-right.msie7 .ul-wrapper,
ul.flyout-menu.horizontal.flyout-right.msie8 .ul-wrapper {
left:0;
}
ul.flyout-menu.horizontal.flyout-left.msie6 .ul-wrapper,
ul.flyout-menu.horizontal.flyout-left.msie7 .ul-wrapper,
ul.flyout-menu.horizontal.flyout-left.msie8 .ul-wrapper {
right:0;
}
ul.flyout-menu.horizontal.msie6 > li > .ul-wrapper,
ul.flyout-menu.horizontal.msie7 > li > .ul-wrapper,
ul.flyout-menu.horizontal.msie8 > li > .ul-wrapper {
left:0;
}
@media screen and (max-width:767px) {
ul.flyout-menu.vertical li,
ul.flyout-menu.horizontal li {
display:block;
margin-left:0;
border-right:none;
border-bottom:1px solid #1A1A1A;
}
ul.flyout-menu.vertical li.last,
ul.flyout-menu.horizontal li.last,
ul.flyout-menu.vertical li:last-of-type,
ul.flyout-menu.horizontal li:last-of-type {
margin-bottom:1px;
border-bottom:none;
}
ul.flyout-menu.horizontal .item-wrapper {
width:100%;
}
ul.flyout-menu .ul-wrapper {
position:relative;
top:0;
}
ul.flyout-menu.horizontal > li > .ul-wrapper {
left:auto;
}
ul.flyout-menu.vertical ul,
ul.flyout-menu.horizontal ul {
border-left:0;
border-bottom:0;
border-right:0;
border-top:1px solid #1a1a1a;
}
ul.flyout-menu.flyout-right .ul-wrapper,
ul.flyout-menu.flyout-left .ul-wrapper {
left:auto;
right:auto;
}
ul.flyout-menu.text-left li li > .item-wrapper > .menu-link > a {
padding-left:20px;
}
ul.flyout-menu.text-left li li li > .item-wrapper > .menu-link > a {
padding-left:30px;
}
ul.flyout-menu.text-left li li li li > .item-wrapper > .menu-link > a {
padding-left:40px;
}
ul.flyout-menu.text-left li li li li li > .item-wrapper > .menu-link > a {
padding-left:50px;
}
}
@media screen and (min-width:768px) {
ul.flyout-menu.horizontal > li {
display:inline-block;
border-right:1px solid #1A1A1A;
border-bottom:none;
float: left;
}
ul.flyout-menu .ul-wrapper {
position:absolute;
top:-1px;
}
ul.flyout-menu.horizontal > li > .ul-wrapper {
left:-1px;
top:auto;
}
ul.flyout-menu.vertical ul,
ul.flyout-menu.horizontal ul {
border:1px solid #1a1a1a;
margin: 0px;
padding: 0px;
}
ul.flyout-menu.flyout-right .ul-wrapper {
left:100%;
}
ul.flyout-menu.flyout-left .ul-wrapper {
right:100%;
}
ul.flyout-menu.text-left li li > .item-wrapper > .menu-link > a,
ul.flyout-menu.text-left li li li > .item-wrapper > .menu-link > a,
ul.flyout-menu.text-left li li li li > .item-wrapper > .menu-link > a,
ul.flyout-menu.text-left li li li li li > .item-wrapper > .menu-link > a {
padding-left:9px;
}
}
Если нужно менять где то в других файлов ткните пожалуйста пальцем в правильном направлении.
Заранее спасибо)