Уважаемые знатоки нужно , что бы вложенные пункты били без границы слева с первым элементном списка я разобрался ,а вот остальные....
HTML менюшки:
<ul id="main-menu">
<li><a href="/">Главная</a></li>
<li>
<a href="/about">О компании</a>
<ul>
<li><a href="/our-manufacturing">Наше производство</a></li>
<li><a href="/cooperation">Сотрудничество</a></li>
<li><a href="/guarantee-сertificates">Гарантия, Сертификаты</a></li>
<li><a href="/news">Новости</a></li>
<li><a href="/our-clients">Наши клиенты</a></li>
</ul>
</li>
<li><a href="/about-technology">О технологии</a></li>
<li><a href="/objects">Обьекты</a></li>
<li><a href="/goods_caregory/all/">Проекты</a></li>
<li>
<a href="/services">Услуги</a>
<ul>
<li><a href="/calculate-project">Рассчитать проект</a></li>
<li><a href="/individual-project">Индивидуальный проект</a></li>
<li><a href="/landscaping">Ландшафтный дизайн</a></li>
</ul>
</li>
<li>
<a href="">Цены</a>
<ul>
<li><a href="/domokomplekt">Домокомплект</a></li>
<li><a href="/box-house">Коробка дома</a></li>
<li><a href="/turnkey">Под ключ</a></li>
</ul>
</li>
<li><a href="/contacts">Контакты</a></li>
</ul>
CSS:
#main-menu {
position: relative;
padding: 0;
margin-top: 15px;
float: right;
font-size: 14pt;
}
#main-menu ul {
overflow: hidden;
zoom: 1;
}
#main-menu li {
list-style: none;
float: left;
border-left: 1px solid #BCBCBC;
padding: 0 20px;
margin: 0 1px 0 -1px;
position: relative;
z-index: 2;
}
#main-menu li ul {
list-style: none;
padding: 0;
margin: 0;
display: none;
position: absolute;
left: 0;
}
#main-menu li ul li {
float: none;
margin: 0;
text-align: left;
font-size: 11pt;
background: #fff;
width: 130px;
padding-top: 3px;
padding-bottom: 3px;
}
#main-menu li a {
display: block;
color: #333333;
text-decoration: none;
}
#main-menu li a:hover {
color: #b2b935;
text-decoration: none;
}
#main-menu li:hover ul, #menu li.jshover ul {
display: block;
border-radius: 10px;
box-shadow: 0 5px 5px #b7b7b7;
z-index: 2;
}
#main-menu li:first-child {
border: inherit;
}
#main-menu .Active {
color: #b2b935;
}