Drop down sub menu to appear below parent menu

• 

  ronjanyberg · Member · Jan 14, 2017 at 12:43 am

  • Copy link
  • Add topic to favorites

  Hi, I could use some help with a couple of things.

  1. How to get the drop down sub menus to appear below the parent menu instead of to the right.

  2. How to increase the width of a drop down menu so that the title isn’t split in two rows.

  3. How to remove the extra spacing, made by hiding drop down arrows, to the right of main menu titles.

  4. If there is a way to make all pictures in a slideshow automatically fill up the area leaving as little bezel as possible.

  Thanks for the help! :)

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 17, 2017 at 12:46 am

  • Copy link

  Hi there,

  1. How to get the drop down sub menus to appear below the parent menu instead of to the right.

  I’m seeing your submenus directly under the parent menu item. Are you still seeing them off to the right? I checked in Firefox, Safari and in Chrome.

  2. How to increase the width of a drop down menu so that the title isn’t split in two rows.

  Add the following which should take care of the issue. You can adjust the 250px width if you find it does not in your browser. Keep in mind though that some may have changed some of their browser settings and may still see some of the menu items on two lines.

  .menu ul ul, ul.menu ul {
  	width: 250px;
  }

  3. How to remove the extra spacing, made by hiding drop down arrows, to the right of main menu titles.

  This equalizes the padding on the left and right of the menu items.

  .sf-arrows .sf-with-ul {
  	padding-right: 1em;
  }

  4. If there is a way to make all pictures in a slideshow automatically fill up the area leaving as little bezel as possible.

  The slideshow software looks at the sizes on the images you have chosen and based on the landscape oriented images, creates a bounding box. If you have portrait oriented images in the slideshow as well, they are sized to fit in that bounding box. This is done so that the slideshow div does not change sizes and jump around, which can bother visitors.

  My suggestion, if it is possible, would be to size all the images you wish to have in the slideshow the same and stick with either landscape orientation for the images.

  You can change the color of the background and border on the slideshow to white, which may make things more acceptable to you by finding the following rule in your custom CSS and change the color codes from #000 to #fff.
  .slideshow-window

• 

  ronjanyberg · Member · Jan 17, 2017 at 6:21 am

  • Copy link

  Hi, thanks for the help :)
  Regarding the first question I wasn’t exactly sure how to explain it but I’m referring to the second sub menus, when you hover the menu bar the first sub menus appear below but then when you hover thoose items their sub menus appear to the right. I’m wondering if you can make the second sub menus appear below their first sub menu parent, extending the initial drop down?

• 

  aakashpatelsite · Member · Jan 17, 2017 at 9:46 am

  • Copy link

  Hi,
  For the first question, you should use accordion.
  So that when you click on the menu items it will open the sub menu below it.

  Thanks,
  Aakash Patel

• 

  thesacredpath · Member · Jan 17, 2017 at 9:55 pm

  • Copy link

  Hi @ronjanyberg, we can do this, but it comes with an undesirable side effect, which is that any menu items below where the sub-sub menu appears will not be accessible to the visitor as they will be covered up with the sub-sub menu.

  The accordion menu Aakash mentions can’t be done here at WordPress.com since it requires code that is not allowed, and changes to the theme files that we can’t make, for security reasons.

  Here is the code, which you can try out. The second CSS rule was included to turn that sub-sub menu red so that you can see it more easily.

  ul.menu li li:hover ul, ul.menu li li.sfHover ul {
  	left: 0;
  	top: 30px;
  	display: block;
  }
  .menu ul ul {
  	background: red !important;
  }

  Aakash, for reference: The differences between WordPress.com and WordPress.org.