Меню css+html

[Dolce]

Здравствуйте, необходимо было меню с выпадающими подпунктами, нашел в инете готовое решение, переверстал под свой дизайн, все работает как нужно, одна беда - вылазит подпункты при определенной ширине меню, если ширину увеличить, то все становиться на свои места, однако увеличивать уже некуда, хотелось бы наоборот уменьшить, но тогда вылазит еще больше подпунктов:

Лопатил css, но никак не могу понять как убрать это вот код:

.navTitle{
padding: 10px;
background: #4b9342;
}
.navTitle p{font-size: 16px; font-weight: bold; color: #fff;}
#nav {
margin: 15px 0 10px 10px;
    border:2px solid #4b9342;
    box-shadow:2px 2px 8px #000000;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
#nav, #nav ul {
    list-style:none;
    padding:0;
    width:250px;
}
#nav ul {
    position:relative;
    z-index:-1;
}
#nav li {
    position:relative;
    z-index:100;
}
#nav ul li {
    margin-top:-23px;
    -moz-transition:  0.4s linear 0.4s;
    -ms-transition: 0.4s linear 0.4s;
    -o-transition: 0.4s linear 0.4s;
    -webkit-transition: 0.4s linear 0.4s;
    transition: 0.4s linear 0.4s;
}
#nav li a {
    background-color:#fff;
    color:#000;
    display:block;
    font-size:14px;
    font-weight:bold;
    line-height:30px;
    outline:0;
    padding-left:10px;
    text-decoration:none;
    border-bottom: 1px solid #4b9342;
}

#nav li a img {
    border-width:0px;
    height:24px;
    line-height:28px;
    margin-right:8px;
    vertical-align:middle;
    width:24px;
}
#nav li a:hover {
    color: #4b9342;
}
#nav ul li a {
padding-left: 20px;
    background-color:#eee;
    border-bottom:1px solid #ccc;
    color:#000;
    font-size:12px;
    line-height:22px;
}
#nav ul li a:hover {
    background-color:#ddd;
    color:#444;
}

#nav a.sub:focus {
    color: #4b9342;
    outline:0;
}
#nav a:focus ~ ul li {
    margin-top:0;
    -moz-transition:  0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linears;
    -webkit-transition: 0.4s linears;
    transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
    display:block;
}
#nav a.sub:active {

    outline:0;
}
#nav a:active ~ ul li {
    margin-top:0;
}
#nav ul:hover {
    display:block;
}

И HTML:

<nav>
<ul id="nav">
<div class="navTitle"><p>Школьные принадлежности</p></div>
    <li><a href="#" class="sub" tabindex="1">Бумажно-беловая продукция</a>
		    <ul>
		    <li><a href="#">Альбомы для рисования</a></li>
		    <li><a href="#">Блокноты, записные книжки</a></li>
		    <li><a href="#">Бумага цветная, картон</a></li>
		    <li><a href="#">Папки для тетрадей и труда</a></li>
		    </ul>
    </li>
    <li><a href="#" class="sub" tabindex="1">Настольные принадлежности</a>
	    <ul>
		    <li><a href="#">Глобусы</a></li>
		    <li><a href="#">Калькуляторы карманные</a></li>
	    </ul>
    </li>
    <li><a href="#" class="sub" tabindex="1">Офисные принадлежности и инструменты</a>
	    <ul>
		    <li><a href="#">Клей</a></li>
		    <li><a href="#">Ножницы детские</a></li>
		    <li><a href="#">Пеналы офисные, боксы</a></li>
	    </ul>
    </li>
    <li><a href="#" class="sub" tabindex="1">Принадлежности для делопроизводства</a>
	    <ul>
		    <li><a href="#">Папки, портфели пластиковые</a></li>
	    </ul>
    </li>
    <li><a href="#" class="sub" tabindex="1">Принадлежности для письма,черчения и рисования</a>
	    <ul>
		    <li><a href="#">Карандаши восковые</a></li>
		    <li><a href="#">Карандаши графитные</a></li>
		    <li><a href="#">Карандаши механические</a></li>
		    <li><a href="#">Карандаши пастельные</a></li>
		    <li><a href="#">Карандаши цветные</a></li>
		    <li><a href="#">Кисти</a></li>
		    <li><a href="#">Краски акварельные</a></li>
		    <li><a href="#">Краски для оформительских работ</a></li>
		    <li><a href="#">Краски-гуашь</a></li>
	    </ul>
    </li>
    <li><a href="#" class="sub" tabindex="1">Рюкзаки, портфели, сумки, пеналы</a>
    <ul>
		    <li><a href="#">Пеналы секционные</a></li>
		    <li><a href="#">Пеналы-кошельки</a></li>
		    <li><a href="#">Рюкзаки для младших и средних классов</a></li>
		    <li><a href="#">Рюкзаки подростковые</a></li>
		    <li><a href="#">Сумки молодежные</a></li>
    </ul>
</li>
    <li><a href="#" class="sub" tabindex="1">Товары для творчества</a>
	    <ul>
		    <li><a href="#">Доски  для письма и рисования</a></li>
		    <li><a href="#">Наборы для рукоделия</a></li>
		    <li><a href="#">Наборы для скарпбукинга</a></li>
		    <li><a href="#">Пластилин</a></li>
		    <li><a href="#">Пластилин-наборы</a></li>
	    </ul>
    </li>
    <li><a href="#" class="sub" tabindex="1">XSLT</a>
	    <ul>
		    <li><a href="#">Обложки для книг и тетрадей</a></li>
		    <li><a href="#">Папки, портфели школьные</a></li>
		    <li><a href="#">Пеналы, стаканы настольные</a></li>
		    <li><a href="#">Подставки для книг </a></li>
		    <li><a href="#">Развиваюшие пособия</a></li>
	    </ul>
    </li>
</ul>
</nav>

Подскажите пожалуйста как это можно поправить?

[klierik]

выложи все на http://jsfiddle.net/

[Dolce]

Вот http://jsfiddle.net/6QpsC/1/

При

#nav, #nav ul {

list-style:none;

padding:0;

width:200px;

}

вылазят подпункты, если поставить 250px то уже не вылазят, но хотелось бы задавать любую удобную ширину, по ситуации

[klierik]

вылазит из-за того что предедущий элемент в 2е строки.

если забить на плавность анимации схлопывания то можно так: http://jsfiddle.net/6QpsC/1/

в целом ты пытаешся сделать на чистом CSS то что на сегодняшней день проще сделать на JS. Это обычный аккардеон. работать кроссбраузерно это не будет.

мой совет сделать на JS.

Ну или сменить концепцию. Например зацепится за height: 0; с overflow: hidden;

а при клике height: auto;

не уверен что сработает.

[Dolce]

вылазит из-за того что предедущий элемент в 2е строки.

если забить на плавность анимации схлопывания то можно так: http://jsfiddle.net/6QpsC/1/

в целом ты пытаешся сделать на чистом CSS то что на сегодняшней день проще сделать на JS. Это обычный аккардеон. работать кроссбраузерно это не будет.

мой совет сделать на JS.

Ну или сменить концепцию. Например зацепится за height: 0; с overflow: hidden;

а при клике height: auto;

не уверен что сработает.

Спасибо, а не подскажете примеры с js ?

[klierik]

http://jqueryui.com/accordion/

[Dolce]

Спасибо