Всем привет, очень прошу помощи.
Верстаю себе сайт с шаблона №1257.
Можете глянуть led-complekt.ru.
Вверху там есть меню - то что мне нужно, но беда в том, что оно не отрезинено. То есть не по всей ширине блока.А нужно чтобы по всей. И при добавлении нового пункта меню, оно также успешно резинилось. Я "тру-кодер", разбирался долго, читал маны и рекомендации о том, что нужно сделать через таблицу, но так и не смог настроить CSS как нужно. Очень прошу - пожалуйста, исправьте код, чтобы меню стало резиновым(
Код
/* Menus */
nav {
padding: 0;
text-align: center;
background: #138bd0;
/*border-bottom: 1px solid #3281d3;*/
box-shadow: 0 1px 0 #1a1c1d;
width: 100%;
display: table;
}
nav ul.uMenuRoot {
list-style: none outside none;
margin: 0 auto;
padding: 0;
}
nav ul ul {
background: none repeat scroll 0 0 #f5f5f5;
left: -1px;
opacity: 0;
position: absolute;
top: 100%;
transition: all 0.2s ease-out 0.15s;
visibility: hidden;
white-space: nowrap;
z-index: 1;
text-align: left;
}
nav > ul > ul {border-left: 1px solid #00448a;}
nav ul ul ul {
left: 100%;
padding-left: 1px;
top: 0;
}
nav ul.uMenuRoot > li {
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
position: relative;
border-left: 1px solid #ffffff;
}
nav ul.uMenuRoot > li:first-child {border: none;}
nav ul.uMenuRoot > li:last-child {border-right: 1px solid #ffffff;}
nav ul.uMenuRoot > li.has-submenu:hover {border-left: 1px solid #00448a;}
nav ul.uMenuRoot > li > ul {border-left: 1px solid #00448a;}
nav li {
float: left;
list-style: none outside none !important;
position: relative;
}
nav li.has-submenu > a:after {
content: "+";
display: block;
position: absolute;
right: 5px;
top: 0;
}
nav li a:hover + ul {
opacity: 1;
visibility: visible;
}
nav li:hover > ul {
opacity: 1;
visibility: visible;
}
nav li li {float: none;}
nav li li a {padding: 0 20px; display: block; line-height: 40px; text-decoration: none; color: #555;}
nav li li:hover {background: #f5f5f5;}
nav li li:hover > a, nav li li:hover a:hover {background: #e3e3e3; color: #000; text-decoration: none;}
/* ----- */
/* Site Menus */
ul.uMenuRoot > li > a {
font-size: 100%;
text-decoration: none;
display: block;
color: #fff;
padding: 0 20px;
margin: 0 0 0 0;
line-height: 35px;
}
nav li:hover > a, ul.uMenuRoot > li > a:hover, ul.uMenuRoot > li > .uMenuItemA {
background: #0269b1;
/*background-image: -webkit-linear-gradient(bottom, #138bd0, #094c96); /* For Chrome and Safari */
/*background-image: -moz-linear-gradient(bottom, #138bd0, #094c96); /* For old Fx (3.6 to 15) */
/*background-image: -ms-linear-gradient(bottom, #138bd0, #094c96); /* For pre-releases of IE 10*/
/*background-image: -o-linear-gradient(bottom, #138bd0, #094c96); /* For old Opera (11.1 to 12.0) */
background-image: #138bd0, #094c96; /* Standard syntax; must be last */
}
.show-menu {
position: absolute;
top: 30px;
right: 30px;
width: 50px;
height: 20px;
cursor: pointer;
background: #00448a;
display: none;
color: #fff;
text-align: center;
font-size: 80%;
padding: 5px 10px;
font-weight: bold;
}
.show-menu:hover {background: #e5e5e5;color: #000;}
/* --------- */
