qqignatqq пользователь не сможет определить, где заканчивается ссылка и опять же не поймет, что кликнув в разные места подсвеченного пункта (а подсвечивается при любом раскладе весь пункт) будут совершенно разные последствия. Если вы не хотите добавлять отдельно кнопку, что бы не менять визуальный дизайн, то рассмотрите вариант, когда появляется кнопка (иконка) при наведении на пункт.
Пользователям обязательно надо визуально показать, что эта разница есть. Иначе юзабилити меню будет стремиться к нулю.
Что же касается раскрытого меню, то тут нужно или использовать js или php, чтобы проверять адрес страницы и понимать какой именно раздел открыт. Чаще для этого используется php и соответствующему пункту меню добавляется класс, отображающий его подменю раскрытым.
qqignatqq: Получается, что открытое подменю спрятать обратно нельзя. Даже если закрывать старое при открытии другого подменю, нельзя гарантировать, что пользователь дальше будет взаимодействовать с меню, а не станет читать содержание страницы или взаимодействовать с другими элементами на странице. И честно говоря, я сомневаюсь, что пользователи поймут, что по второму клику будет переход на другую страницу. Это довольно не стандартно.
Если не нравится вариант с hover, то может сделать рядом с пунктом меню кнопку (например стрелку вниз), по которой будет открываться подменю? А сам пункт меню будет обычной ссылкой.
qqignatqq Как именно должна выглядеть, не подскажу, поскольку стандарта тут нет.
Лично я, сделала бы так: https://jsfiddle.net/WebKasumi/zbhe3668/1/
- В html все списками. Это не обязательно, но мне так виднее вложенность (ну и просто привычнее).
- Для появления подменю использовала .slideToggle(). Получается меньше css писать.
- В css предпочла бы не указывать line-height заголовкам, поскольку при заголовке в 2 строки, это выглядело бы странно.
Так же на заметку: при данном раскладе пункт, у которого есть подменю не получится использовать как ссылку, поскольку по клику он должен открывать подменю. Если же необходимо сделать его ссылкой, то стоит подменю открывать не по клику, а при наведении на этот пункт. В этом случае js надо будет немного переделать.
Сергей Софьичев: Конечно же, любой план действий будет зависеть в итоге от самого проекта. Единственно верного варианта не существует. Я основывала свой выбор исходя из тех условий что указаны: есть 7 разных картинок, надо все поставить в фон.
Денис Богданов на заметку - в Developer Tools можно выделить тег в коде и на вкладке styles нажать на +, что бы создать правило для этого тега, класса или id. Вложенность он не подцепит, но для простого .someclass подойдет. А подержав подольше кнопку при клике можно выбрать куда "записать" стиль из списка подключенных .css
