horizontal submenu
-
I need help on centering my submenu horizontal that is 100% width of the site. I am wanting it to look like my menu bar.
Here is a simple of what I am looking for-
The website is theozarksconnection.com/DEV
http://theozarksconnection.com/DEV
Site Navigation ---------------------------------------------------------------------------------------------------- */ .genesis-nav-menu { clear: both; color: #fff; font-family: Lato, sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 1px; line-height: 1.5; width: 100%; } .genesis-nav-menu .menu-item { display: inline-block; text-align: left; } .genesis-nav-menu a { border: none; color: #000; display: block; padding: 10px 10px; position: relative; } .genesis-nav-menu a:hover, .genesis-nav-menu .current-menu-item > a { color: #4292E5; font-weight: 900; } .genesis-nav-menu .sub-menu .current-menu-item > a, .genesis-nav-menu .sub-menu .current-menu-item > a:hover { color: #4292E5; } .genesis-nav-menu > .menu-item > a { text-transform: uppercase; } .genesis-nav-menu .sub-menu { left: -9999px; opacity: 0; position: absolute; -webkit-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; width: 100%; z-index: 99; } .genesis-nav-menu .sub-menu a { background-color: #000; color: #fff; font-size: 14px; position: static; width: 100%; display: inline-block; text-align: left; left:0; right:0; } .genesis-nav-menu .sub-menu a:hover { background-color: #161616; } .genesis-nav-menu .sub-menu .sub-menu { display: inline-block; width: 100%; } .genesis-nav-menu .menu-item:hover { position: static; } .genesis-nav-menu .menu-item:hover > .sub-menu { left: auto; opacity: 1; width: 100%; } .genesis-nav-menu > .first > a { padding-left: 0; } .genesis-nav-menu > .last > a { padding-right: 0; } .genesis-nav-menu > .right { display: inline-block; float: right; list-style-type: none; padding: 280px 0; text-transform: uppercase; } .genesis-nav-menu > .right > a { display: inline; padding: 0; } .genesis-nav-menu > .rss > a { margin-left: 48px; } .genesis-nav-menu > .search { padding: 14px 0 0; } /* Site Header Navigation --------------------------------------------- */ .site-header .sub-menu { border-top: 0px solid #39342c; } .site-header .sub-menu .sub-menu { margin-top: 0px; } /* Primary Navigation --------------------------------------------- */ .nav-primary { background-color: #39342c; } .nav-primary .sub-menu a:hover { background-color: #39342c; color: #fff; }
Viewing 3 replies - 1 through 3 (of 3 total)
Viewing 3 replies - 1 through 3 (of 3 total)
The topic ‘horizontal submenu’ is closed to new replies.