Как открывать выпадающее меню на клик?

Question

[HelenaS]

Здравствуйте!

Проблема такая. Сделала выпадающее меню, при наведении список открываеться, но мне нужно что бы пользователь сначала кликом на пункт меню открывал соответствующею страницу, и потом выпадал список.
Вот сам сайт gazmeter.com.ua, при наведении на пункт счетчики воды, сразу открываеться список, а мне надо, что бы при клике открывалась соответствующая страница

<ul class="navCategory">
		<div id="nameCatalog">Каталог товаров</div>
			<li><a href="#" class="main-item">First</a></li>
			<li><a href="#" class="main-item" tabindex="1">Second</a></li>
				<ul  class="sub-menu">
					<li><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">5</a></li>
					<li><a href="#">6</a></li>
				</ul>
			<li><a href="#" class="main-item">Third</a></li>	
        </div>
    </ul>

.sub-menu 
{ 
   display: none; 
} 
.main-item:focus ~ .sub-menu, 
.main-item:active ~ .sub-menu, 
.sub-menu:hover 
{ 
   display: block; 
}

Comments

[Dark Hole]

Нельзя ли пример на JSFiddle или Codepen? А то непонятно, нужен ли вам сферический конь в вакуме или вам нужены 7 перепендикулярных линий?)

[Ingernirated]

Решение задачи интересует строго в css?

Answer 1

[Ankhena]

Так при клике и открывается страница со счетчиками.

p.s. исправьте, вода у Вас почему-то много где гАрячая

Comments

[HelenaS]

При клике да. Но сначала открываеться выпадающее меню. А мне нужно что бы сначала пользователь попал на страницу, а потом уже открывалось выпадающее меню.
p.s. спасибо, исправлю

[Ankhena]

HelenaS: ну значит не показывайте выпадающего меню нигде, кроме нужной страницы.
Но вообще не понятно, если посетитель уже зашел на страницу со счетчиками зачем это он потащит мышку еще раз водить по меню?

[Ankhena]

HelenaS: Да и лишний клик получается на пути к цели.

Если боитесь, что посетитель "потеряет" страницу со всеми счетчиками, добавьте в выпадающее меню первым пунктом "все счетчики".

[Ankhena]

HelenaS: до меня дошло
Может, Вам надо не выпадающее меню, а "аккордеон"? У которого будет открыт соответствующий блок на нужной странице?

[Ankhena]

HelenaS: типа как тут: infodveri.ru ?

Answer 2

[Сергей Сунцев]

используйте вместо hover событие onclick, и внутри задавайте элементу display: block;

Comments

[HelenaS]

А вы не могли бы пример привести? не могу понять как это сделать

Answer 3

[indigo_style]

Пример
если я правильно понял