Title: Create Vertical drop down menu
Last modified: August 22, 2016

---

# Create Vertical drop down menu

 *  Resolved [Justine13](https://wordpress.org/support/users/justine13/)
 * (@justine13)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/create-vertical-drop-down-menu/)
 * hello,
 * I am a beginner and I have to create a website for a friend.
    I would like to
   create a vertical drop down menu because actually menu have not practical. What
   file do I change the code? What code should I added?
 * Thank you for your help and sorry for my english …
 * my website :[http://lt-residences.fr/](http://lt-residences.fr/)

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

 *  Theme Author [sonalsinha21](https://wordpress.org/support/users/sonalsinha21/)
 * (@sonalsinha21)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/create-vertical-drop-down-menu/#post-5578432)
 * Hi,
 * find custom-functions.php file in inc folder of your theme directory >> ……/wp-
   content/themes/skt_full_width/inc
    open custom-functions.php and add this code
   after line no. 29 jQuery(‘.show_hide_header’).css(‘display’,’none’);
 *  Thread Starter [Justine13](https://wordpress.org/support/users/justine13/)
 * (@justine13)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/create-vertical-drop-down-menu/#post-5578436)
 * I added:
    jQuery (‘show_hide_header.’) Css (‘display’, ‘none’)
 * on custom-functions.php
 * But nothing has changed
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [11 years, 4 months ago](https://wordpress.org/support/topic/create-vertical-drop-down-menu/#post-5578437)
 * That’s not correct, SKTThemes said add this after line 29:
 *     ```
       jQuery('.show_hide_header').css('display','none');
       ```
   
 *  Thread Starter [Justine13](https://wordpress.org/support/users/justine13/)
 * (@justine13)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/create-vertical-drop-down-menu/#post-5578438)
 * What should make this code? Nothing’s happening
 *  Theme Author [sonalsinha21](https://wordpress.org/support/users/sonalsinha21/)
 * (@sonalsinha21)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/create-vertical-drop-down-menu/#post-5578439)
 * Give me 5 minutes checking why its not working for you and letting you know
 *  Theme Author [sonalsinha21](https://wordpress.org/support/users/sonalsinha21/)
 * (@sonalsinha21)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/create-vertical-drop-down-menu/#post-5578440)
 * Line number 29 on custom-functions.php within inc folder. So the path to custom-
   functions.php is wp-content/themes/skt-full-width/inc/custom-functions.php
 * Check line number 29 where it says: jQuery(document).ready(function() {
 * Add this
    jQuery(‘#site-nav’).css(‘display’,’none’);
 * This should work i have tested it 2-3 times now.
 *  Thread Starter [Justine13](https://wordpress.org/support/users/justine13/)
 * (@justine13)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/create-vertical-drop-down-menu/#post-5578441)
 * I hurt myself understand I want the sub menus do not open horizontally but vertically
 *  Thread Starter [Justine13](https://wordpress.org/support/users/justine13/)
 * (@justine13)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/create-vertical-drop-down-menu/#post-5578442)
 * Like this [http://www.alsacreations.com/xmedia/doc/full/menu3.png](http://www.alsacreations.com/xmedia/doc/full/menu3.png)
 *  Theme Author [sonalsinha21](https://wordpress.org/support/users/sonalsinha21/)
 * (@sonalsinha21)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/create-vertical-drop-down-menu/#post-5578444)
 * This is related to html css and not related to theme functions basically. Here
   is one such class within main.css #site-nav ul li:hover ul (remove left from 
   within it) and it should appear below the menu.
 * Now adjust padding and spacing. In case you know html css you can check within
   main.css and open the related class for site nav and remove left from within 
   them and adjust them to show underneath the parent nav.
 * Again if you aren’t sure take a backup of main.css.
 * Now your question where is main.css wp-content/themes/skt-full-width/css/main.
   css
 *  Thread Starter [Justine13](https://wordpress.org/support/users/justine13/)
 * (@justine13)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/create-vertical-drop-down-menu/#post-5578445)
 *     ```
       /* ----------- Drop Down Menu ------- */
       .noBottomBorder{border-bottom:none !important; }
       .haschild{background:url(../images/menu_sub_icon.png) no-repeat center right; }
       #site-nav ul li ul{ display:none; }
       #site-nav ul li:hover ul{display:block; border-left:1px #000 solid; position:absolute; left:228px; width:180px; top:5px; background:url(../images/menu_sub.png) repeat left top; z-index:10}
       #site-nav ul li:hover ul li{ border-top:1px #2c2d2e solid; border-bottom:1px #040506 solid; }
       #site-nav ul li:hover ul li a{background-position:7px center; padding-left:27px; }
       #site-nav ul li:hover ul li ul{display:none; }
       #site-nav ul li:hover ul li:hover ul{display:block; left:160px; top:5px; }
       #site-nav ul li:hover ul li:hover ul li ul{display:none; }
       #site-nav ul li:hover ul li:hover ul li:hover ul{display:block; }
       #site-nav ul li:hover ul li:hover ul li:hover ul li ul{display:none; }
       #site-nav ul li:hover ul li:hover ul li:hover ul li:hover ul{display:block; }
       #site-nav ul li:hover ul li:hover ul li:hover ul li:hover ul li ul{display:none; }
       #site-nav ul li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul{display:block; }
       .header .header-bottom{ width:100%; margin:0; padding:0; background:url(../images/header-bottom-shape.png) no-repeat bottom; height:53px; }
       #header-bottom-shape{ background:url(../images/header-bottom-shape2.png) no-repeat top; width:75px; height:50px; cursor:pointer; margin-left:86px; }
       #header-bottom-shape.showDown{background-image:url(../images/header-bottom-shape1.png); }
       ```
   
 * What should I added or removed?
 *  [Juliane_219](https://wordpress.org/support/users/juliane_219/)
 * (@juliane_219)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/create-vertical-drop-down-menu/#post-5578672)
 * Hi,
 * I have the same problem. I’m using the theme specular and this is my website 
   so far: [http://wordpress.p174990.webspaceconfig.de/](http://wordpress.p174990.webspaceconfig.de/)
 * The dropdown menu under ‘Expertise’ and ‘About us’ are horizontal. But I would
   like it to look like here: [http://codeless.co/specular/business3/](http://codeless.co/specular/business3/)
 * I thought there would be an option within the theme without having to change 
   the custom-functions.php file.
 * And is there anyway I can try changing the custom-functions.php safely without
   messing the former settings up?
 * Thank you for your help!

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

The topic ‘Create Vertical drop down menu’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/skt-full-width/2.1/screenshot.
   png)
 * SKT Full Width
 * [Support Threads](https://wordpress.org/support/theme/skt-full-width/)
 * [Active Topics](https://wordpress.org/support/theme/skt-full-width/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/skt-full-width/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/skt-full-width/reviews/)

## Tags

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

 * 11 replies
 * 4 participants
 * Last reply from: [Juliane_219](https://wordpress.org/support/users/juliane_219/)
 * Last activity: [10 years, 11 months ago](https://wordpress.org/support/topic/create-vertical-drop-down-menu/#post-5578672)
 * Status: resolved