Здравствуйте, мы заканчиваем мобильную верстку, однако столкнулись с проблемой.
Дан следующий код:
<div class="topWrapper">
<div class="mainNav">
<form method="get" action="/search/">
<input autocomplete="off" name="searchString" class="quickSearch" onmousedown="event.cancelBubble=true;" ontouchstart="event.cancelBubble=true;" id="049D095A-C3A6-4E6F-ABD6-696DCD48703A">
<div class="searchResultWindow hidden">
<span class="result">Найдено компаний и пользователей:
<span class="total"></span></span>
<ul class="users"></ul><a class="all" href="/search/">Все результаты поиска</a></div></form>
<ul><li><a href="/">Профиль</a></li>
<li><a href="/showcase/">Витрина</a></li>
<li><a href="/vacancies/">Вакансии</a></li>
<li><a href="/newsevents/">Новости</a></li></ul><hr>
<ul><li><a href="/messages/">Сообщения</a></li></ul><hr> <ul><li><a href="/friendship/">Контакты</a></li></ul><hr>
<ul><li><a href="/reviews/">Отзывы</a></li></ul><hr>
<ul><li><a href="/profile/">Настройки</a></li></ul>
<ul class="accountNav"><li><a class="logoutLink" href="/logout/" onclick="return false;">ВЫХОД</a></li></ul> </div>
<div class="topNav"><div class="logo"><a href="/"></a></div> </div>
</div>
.mainNav у нас скрыт, и играет в роли вертикального меню. Цель: при нажатии на .logo - .mainNav должен присвоиться свойство height:auto (сейчас имеет она 100px), и тогда она должна отобразится. Сделать это нужно через CSS.
Пытались через родственные селекторы, через соседние - не получается.
.topNav .logo:hover ~ .topWrapper .mainNav{ height:auto !important; //Примерно такое нужно. }
.topWrapper .topNav .logo { position: absolute; top: 10px; left: 20px; width: 65px; height: 65px; background: no-repeat center url(images/logoS.png); }
.mainNav { float: left; width: 97%; margin: 0 20px; padding: 5px 0; overflow: hidden; background: #e3f2ec; border-radius: 6px; }
Спасибо!
