How to make sub menu open to the left?
-
Was wondering if someone could help me figure out how to get my last submenu under the treatment menu to open to the left instead of to the right? I’ve tried a couple of thinks like
left: auto !important;
inside the.main-navigation ul ul ul {left: 100%;top: 0;border-top:none;}
but that didn’t work. Also tried it in the other lines of css with no luck either. Here is the complete css in styles.css:.main-navigation {clear: both;display: block;font-weight: 700;font-family: ‘Lato’, sans-serif;position: relative;border-bottom: 3px solid #04A3ED;background: #0065a1;}
.main-navigation .ak-container{padding:0 !important;}
.main-navigation ul {list-style: none;margin: 0;padding: 0;}
.main-navigation li {display: inline-block;position: relative;line-height:28px;font-size:18px;text-transform: uppercase;color:#ababab;white-space: nowrap;}
.main-navigation.menu-right{text-align: right;}
.main-navigation.menu-center{text-align: center;}
.main-navigation.menu-right li{margin-left: 25px;margin-right:0;}
.main-navigation.menu-center li{margin-left: 12px;margin-right:12px;}
.main-navigation a {display: block;text-decoration: none;color: #FFF;padding: 0 18px;}
.main-navigation ul ul {box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);display: none;left: 0;position: absolute;z-index: 99999;background: #FFF;top: 100%;border-bottom: 3px solid #04A3ED;border-top: 3px solid #04A3ED;transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;}
.main-navigation ul li.more-menu-item > ul{right:0;left:auto;}
.main-navigation ul ul ul {left: 100%;top: 0;border-top:none;}
.main-navigation ul ul a {min-width: 150px;padding: 0;}
.main-navigation ul ul li {font-size: 16px;line-height: 18px;border-bottom: 1px solid #DDD;margin: 0 !important;padding:10px 15px;display: block;text-align: left;text-transform: none;}
.main-navigation ul ul li:last-child{border-bottom: none;}
.main-navigation li:hover > a {background: #04A3ED;}
.main-navigation ul ul li:hover > a ,
.main-navigation ul ul li.current-menu-item > a {color:#01AEFD;}.main-navigation ul ul a{color: #666;background: none !important;}
.main-navigation ul ul a:hover {}
.main-navigation ul li:hover > ul {display: block;}
.main-navigation .current-menu-parent > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_parent > a {background: #04A3ED;}
- The topic ‘How to make sub menu open to the left?’ is closed to new replies.