[bdfi3]

Mam taki kod

- POZ1

* POZ2

> + POZ3

> + POZ3

>

* POZ2

> + POZ3
>

> - POZ4

> - POZ4

>
>

>

do tego css

#mainmenu, #mainmenu ul {font-size: 15px; list-style: none; margin: 0; padding: 0; width:230px; float:left;}

#mainmenu ul { width: 230px; }

#mainmenu ul li {clear: both; }

#mainmenu > li {float: left; margin-right: 0px; position: relative; }

#mainmenu > li li {position: relative;}

#mainmenu > li ul {position: left; left: 100px;}

#mainmenu > li ul li ul {position: absolute; left: 230px; top: 0px;}

ul ul {display: none;}

ul li:hover> ul {display: block; }

#mainmenu .x { color:#063; text-decoration:underline;}

/*POZIOM 1*/

#mainmenu {margin: 10px 10px; font-family: calibri; tahoma, arial; }

#mainmenu > li > a {padding: 7px; border-radius: 2px; text-align: center; text-decoration: none; color: #84c5f7; }

#mainmenu > li:hover > a {background: #eee; color: #0090ff; }

/*POZIOMY NIŻSZE*/

#mainmenu ul {font-size: 10px; border-radius: 3px; background: #eee; }

#mainmenu ul li > a {color: #999; display: block; padding: 5px; border-radius: 3px; text-decoration: none;}

#mainmenu ul li:hover > a {color: #eee; background: #aaa;}

.arrow {display: inline-block; margin: 0 5px 0; height: 0; vertical-align: top; content: ""; position: absolute;}

#mainmenu > li > a > .arrow {top: 7px; right: 0; margin-right: -8px; border-top: 3px solid #333; border-right: 3px solid >transparent; border-left: 3px solid transparent;}

ul ul .arrow {top: 10px; right: 0; border-top: 3px solid transparent; border-right: 3px solid transparent; border-left: 3px solid >#333; border-bottom: 3px solid transparent;}`

Jak najprościej przerobić ten bajzel, żeby działało na kliknięcie? Bo szczerze mówiąc nie mogę się w typ połapać ...
Teraz wygląda to tak: http://194.135.95.72/xxx/
#webdev #pomocy #pytanie #css

[maciejze]

@bdfi3 bez JS się nie obejdzie

[bdfi3]

@maciejze: domyślam się. Tylko żadnego interesującego lub działającego przykładu znaleźć nie mogę. Chodzi mi o efekt zbliżony do tego na screenie.

[maciejze]

@bdfi3: Stwórz klasę .open { display: block} albo display: inline-block. Dodaj event listenera na event kliknięcia w pozycję w menu. Ten event listener będzie dodawał tą klasę open na submenu które chcesz pokazać i będzie nadpisywał display: none które tam masz i będzie je pokazywał. Poczytaj o metodzie addEventListener w JS