Search the Community

Необходимо меню позиционировать справа в блоке, а выпадающие пункты должны выпадать влево: песочница (просмотр full screen) ...и при наведении на раздел 3 выпадает список с подразделами, однако пункты раздел 1 и раздел 2 тоже уезжают влево на уровень подразделов. Как не бился не могу исправить... ...помогите, что-то логику ни как не могу понять с этой многоуровневостью.

Доброго времени суток всем! Есть горизонтальное меню с выпадающими списками подменю. Выпадает всё здорово, но подсвечивается несколько не так, как хотелось бы. Чего хочу, и что не получилось: когда наводится мышь на пункт меню - всё здорово, пункт подсвечивается оранжевым, меню выпадает, но после того, как мышь уходит с основного пункта меню и начинает "гулять" по подменю, подсветка с основного пункта меню пропадает, а должна оставаться. когда на ней hover - она загорается, hover пропал - пропала подсветка. как заставить светиться этот пункт, пока я шарю мышкой в пределах его подменю? пример в картинках вот так оно есть сейчас: вот так надо (монтаж): вот кусок кода элемента меню, из которого выпадает подменю: <ul class="menu"> /*top menu*/ <li class="item-101 current active deeper parent"> <a href="/" >О компании</a> /*drop-down menu*/ <ul> <li class="item-114"> <a href="/home/history" >История компании</a> </li> <li class="item-115"> <a href="/home/partners" >Наши партнёры</a> </li> <li class="item-116"> <a href="/home/suppliers" >Наши поставщики</a> </li> </ul> </li></ul>вот стиль для меню: ul.menu { margin: 0; padding: 0; width: 100%; height: 100%; text-align: justify;}ul.menu li { float: left; list-style: none; position: relative; display: inline-block;}ul.menu li.active { background-color: #f93; text-shadow: 1px -1px 0px #000;}ul.menu li a { color: #fff; display: block; padding: 8px 12px 10px; text-decoration: none;}ul.menu li a:hover { background-color: #f93; text-shadow: 1px -1px 0px #000;}/* drop-down menu */ul.menu li ul { display: none;}ul.menu li:hover ul { display: block; position: absolute; top: 38px; background-color: #f93; z-index: 1000;}ul.menu li:hover ul li { float: none; width: 330px; border-bottom: 1px solid #ff9; text-shadow: 1px -1px 0px #000;}ul.menu li ul li a:hover { background-color: #ff3;}подскажите, что сделать или что изменить, чтобы получилось задуманное, а то уже идеи кончились.. если по поводу моего кода есть куча замечаний, то не стесняйтесь делать замечания, учту!