Title: horizontal submenu
Last modified: August 22, 2016

---

# horizontal submenu

 *  [jholcombkw](https://wordpress.org/support/users/jholcombkw/)
 * (@jholcombkw)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/horizontal-submenu-8/)
 * 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-
 * [http://www.martinauer.at](http://www.martinauer.at)
 * The website is theozarksconnection.com/DEV
 * [http://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)

 *  [stephencottontail](https://wordpress.org/support/users/stephencottontail/)
 * (@stephencottontail)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/horizontal-submenu-8/#post-5434679)
 * In this section:
 *     ```
       .genesis-nav-menu .menu-item:hover > .sub-menu {
       	left: auto;
       	opacity: 1;
       	width: 100%;
       }
       ```
   
 * Try `left: 0` instead of `left: auto`, and add `text-align: center`:
 *     ```
       .genesis-nav-menu .menu-item:hover > .sub-menu {
       left: 0;
       opacity: 1;
       width: 100%;
       text-align: center;
       }
       ```
   
 *  Thread Starter [jholcombkw](https://wordpress.org/support/users/jholcombkw/)
 * (@jholcombkw)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/horizontal-submenu-8/#post-5434737)
 * Thanks stephencottontail. It work for my submenu to center it but not any layer
   after the submenu.
 *  [stephencottontail](https://wordpress.org/support/users/stephencottontail/)
 * (@stephencottontail)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/horizontal-submenu-8/#post-5434738)
 * Can you clarify what’d you like to achieve with your sub-sub-menus? This is what
   I see if I hover over Recreation > Sports Complexes (you can’t see my cursor 
   in the screen shot, but I assure you it is there): [http://imgur.com/dF1sZ2x](http://imgur.com/dF1sZ2x)

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘horizontal submenu’ is closed to new replies.

 * 3 replies
 * 2 participants
 * Last reply from: [stephencottontail](https://wordpress.org/support/users/stephencottontail/)
 * Last activity: [11 years, 6 months ago](https://wordpress.org/support/topic/horizontal-submenu-8/#post-5434738)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics