что то вы мудрите непонятное, эти меню делаются без js, он тут не к чему

либо можно воспользоваться генератором

http://purecssmenu.com

или готовые решения

http://cssmenumaker.com/free-css-menus

ну или по гуглите если этого не достаточно, примеров полно

Нет, без JS меню не будет работать. При нажатии пункта он открывается, а при повтором закрывается. Дело в том, что я не могу понять, что нужно исправить, чтобы корректно отображался сайт. Когда я ставлю меню на сайт, то оно портит блоки. Я понял, что дело в этом:

* {
margin: 0px;
padding: 0px;
}
.wrapper {
width: 230px;
margin: 50px auto;
}

Если я это убираю, то меню начинает не корректно отображаться, а мне нужно, чтобы и сайт нормально отображался и меню.

читай про css селекторы, это основа основ.
<div class="a">a</div>
<div class="a b">a + b</div>
<style>
.a{
margin: 20px;
}
.a.b{
margin: 0px;
}
</style>

А можно как-нибудь без .wrapper и "звездочки" переделать меню, чтобы css код относился только к меню?

Да, можно, и я даже написал как

Что-то я все равно не понял как сделать.

.a{
margin: 20px;
}
.a.b{
margin: 0px;
}

Заменил - не помогло. Можете через этот сервис https://jsfiddle.net сделать меню и скинуть ссылку, буду благодарен вам.

нет

ну вот с js

http://dbmast.ru/vertikalnoe-menyu-v-stile...on-css-i-jquery

http://freeweber.ru/for_web_developers/mus...uery-i-css.html

http://freeweber.ru/for_web_developers/mus...css-jquery.html

http://roshanbh.com.np/2008/06/accordion-m...ing-jquery.html

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.