Title: horizontal dropdown submenu
Last modified: August 30, 2016

---

# horizontal dropdown submenu

 *  [devjericho](https://wordpress.org/support/users/devjericho/)
 * (@devjericho)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/horizontal-dropdown-submenu/)
 * Hello
 * I want the submenu to appair horizontal when clicking on the parent..
 * i use this template: [http://livedemo00.template-help.com/wordpress_55042/](http://livedemo00.template-help.com/wordpress_55042/)
 * when I click on the “Services” tab, I want the “submenu” is displayed horizontally
   and not vertically and it remains always show if I am in the “services” page.
 * thanks

Viewing 1 replies (of 1 total)

 *  Thread Starter [devjericho](https://wordpress.org/support/users/devjericho/)
 * (@devjericho)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/horizontal-dropdown-submenu/#post-6718816)
 * this is my css menu
 *     ```
       .header .nav__primary { margin:0 0 0 18px; }
       @media (min-width: 1200px) {
       	.header .nav__primary { margin:0; }
       }
       @media (max-width: 767px) {
       	.header .nav__primary { margin:0; }
       }
       .header .nav__primary .select-menu { font-size:12px; }
       .header .nav__primary .sf-menu { float:none; }
       .header .nav__primary .sf-menu ul {
       	background:#019c93 url(images/sub_menu_1.gif) repeat-x 0% 0%;
       	width:120px;
       	padding:12px 14px 12px 14px;
       	-webkit-border-radius:10px;
       	-moz-border-radius:10px;
       	border-radius:10px;
       }
       .header .nav__primary .sf-menu ul:before {
       	position:absolute;
       	top:-5px;
       	right:50%;
       	width:0;
       	height:0;
       	margin:0 -5px 0 0;
       	border-style:solid;
       	border-width:0 4.5px 5px 4.5px;
       	border-color:transparent transparent #13aea6 transparent;
       	content:'';
       }
       .header .nav__primary .sf-menu > li {
       	background:none;
       	padding:0 0 0 2px;
       }
       .header .nav__primary .sf-menu > li:first-child { padding:0; }
       .header .nav__primary .sf-menu > li:first-child:before { display:none; }
       .header .nav__primary .sf-menu > li:before {
       	background:url(images/menu_divider.png) no-repeat 0% 0%;
       	display:block;
       	position:absolute;
       	top:0;
       	left:0;
       	width:2px;
       	height:62px;
       	overflow:hidden;
       	pointer-events:none;
       	content:'';
       }
       .header .nav__primary .sf-menu > li > a {
       	padding:15px 25px 17px 25px;
       	border:none;
       	text-transform:lowercase;
       }
       @media (min-width: 768px) and (max-width: 979px) {
       	.header .nav__primary .sf-menu > li > a {
       		padding-right:20px;
       		padding-left:20px;
       		font-size:16px;
       	}
       }
       .header .nav__primary .sf-menu > li li {
       	background:none;
       	border-top:1px solid rgba(255,255,255,0.3);
       }
       .header .nav__primary .sf-menu > li li:first-child { border:none; }
       .header .nav__primary .sf-menu > li li a {
       	padding:8.5px 0 8.5px 0;
       	border:none;
       	line-height:24px;
       	font-family:'Cabin', sans-serif;
       	font-size:18px;
       	font-weight:500;
       	text-align:center;
       	text-transform:lowercase;
       	text-decoration:none;
       	color:#fff;
       }
       .header .nav__primary .sf-menu > li li .sf-sub-indicator {
       	top:50%;
       	right:-7px;
       	margin:-5px 0 0 0;
       }
       .header .nav__primary .sf-menu li:hover ul, .header .nav__primary .sf-menu li.sfHover ul {
       	top:63px;
       	left:50%;
       	margin:0 0 0 -74px;
       }
       .header .nav__primary ul.sf-menu li li:hover ul, .header .nav__primary ul.sf-menu li li.sfHover ul {
       	background:#297194 url(images/sub_menu_2.gif) repeat-x 50% 0%;
       	top:-12px;
       	left:134px;
       	margin:0;
       }
       .header .nav__primary ul.sf-menu li li:hover ul:before, .header .nav__primary ul.sf-menu li li.sfHover ul:before { display:none; }
       .header .nav__primary .sf-menu > li > a:hover, .header .nav__primary .sf-menu > li.sfHover> a, .header .nav__primary .sf-menu > li.current-menu-item > a, .header .nav__primary .sf-menu > li.current_page_item > a {
       	background:none;
       	color:#69d8d6;
       }
       .header .nav__primary .sf-menu li li > a:hover, .header .nav__primary .sf-menu li li.sfHover > a, .header .nav__primary .sf-menu li li.current-menu-item > a, .header .nav__primary .sf-menu li li.current_page_item > a {
       	background:none;
       	color:#89eee8;
       }
       .header .nav__primary .sf-menu li li li > a:hover, .header .nav__primary .sf-menu li li li.sfHover > a, .header .nav__primary .sf-menu li li li.current-menu-item > a, .header .nav__primary .sf-menu li li li.current_page_item > a {
       	background:none;
       	color:#abe0ff;
       }
       .header .nav__primary .sf-sub-indicator {
       	background-image:url(images/arrows-ffffff.png);
       	top:40px;
       	right:50%;
       	margin:0 -5px 0 0;
       ```
   

Viewing 1 replies (of 1 total)

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

## Tags

 * [horizontal](https://wordpress.org/support/topic-tag/horizontal/)
 * [submenu](https://wordpress.org/support/topic-tag/submenu/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1 reply
 * 1 participant
 * Last reply from: [devjericho](https://wordpress.org/support/users/devjericho/)
 * Last activity: [10 years, 6 months ago](https://wordpress.org/support/topic/horizontal-dropdown-submenu/#post-6718816)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics