Помогите с позиционированием
-
Доброго времени суток, уважаемые пользователи форума.
Возникла трудность с позиционированием суб-меню:
в шаблоне wp base пытаюсь настроить выпадающую область меню так, чтобы она появлялась с левого края, и пункты в этой области тоже должны быть прилеплены к левому краю.
Вся загвоздка в том, что суб-меню позиционируется от пунктов меню и не может прилипнуть к краю без свойства position:fixed, но это не то, что нужно.
Помогите, пожалуйста.
Код стилей:.main-navigation { clear: both; display: block; float: left; width: 100%; border-top: 1px solid rgba(100, 105, 105, 0.1); border-bottom: 1px solid rgba(100, 105, 105, 0.1); margin-bottom: -1px; } .main-navigation ul { display: none; list-style: none; margin: 0; padding-left: 0; text-align: center; } .main-navigation ul:after { width: 100%; display: block; content: ""; margin-bottom: -5px; height: 5px; background: -webkit-radial-gradient(50% -3%, ellipse cover, rgba(0, 0, 0, 0.2), rgba(97, 97, 97, 0) 40%); background: radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.2), rgba(97, 97, 97, 0) 80%); } .main-navigation ul li { *float: left; display: inline-block; position: relative; } .main-navigation ul li a { display: block; padding: 14px; } .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: 0; right: auto; } .main-navigation ul ul { background:#000; width:auto; padding-top:2%; padding-bottom:5%; position: absolute; left: -999em; z-index: 99999; text-align: left; margin-top: 0; margin-left:0; } .main-navigation ul ul:after { content: none; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { left: 100%; width: 100%; margin-top: 0; } .main-navigation ul ul li a { width: 200px; padding: 15px; } .main-navigation ul ul ul { left: -999em; top: 0; } .main-navigation ul ul .menu-item-has-children > a:after { font-family: 'simple-line-icons'; content: "\e606"; position: relative; float: right; opacity: 0.5; filter: alpha(opacity=50); } .menu-toggle { display: none; } .main-navigation ul { display: block; } .main-navigation .sub-menu li{display:table-row;width:400px;} .main-navigation .sub-menu {position:absolute;} }
Пример сайта, с которого нужно содрать дизайн(меню по крайней мере):
joules.com
Просмотр 4 ответов — с 1 по 4 (всего 4)
Просмотр 4 ответов — с 1 по 4 (всего 4)
- Тема «Помогите с позиционированием» закрыта для новых ответов.