Allwebco Website Template CSS Drop Menus

Setting up horizontal CSS Dropdown Menus

This support page is for horizontal CSS drop menus only. Horizontal CSS drop menu templates include a "menu.css" (in Chrome color theme templates this will be in your template "colors" folder (or "css" folder in older templates) and be named "(color)-menu.css"). If you do not have this file you have either a Vertical CSS Menu or a Javascript drop menu. See the help.html with your template for links to edit your menu.js.

horizontal drop menu sample

Changing menu names or links:
You can edit all the menu and submenu titles (names) and links. Open the menu.js in Notepad or any plain text editor. Check the visual link below. You will find the link code shown part way down the menu.js.

Adding a new sub menu link:
If you would like to add a new item to the popout area of the drop menu, first, open the menu.js in Notepad or any plain text editor. Check the visual link below. You will find the link code shown part way down the menu.js.

Adding top level buttons:
If you would like to add a new top level menu item, or "button" on the menu, open the menu.js in Notepad or any plain text editor. Check the visual link below.

Top Level Menu widths:
Each top level menu button has it's own width that you can set in the menu.js. See the visual below.

Submenu widths:
Sub menus must all have the same width. You can however edit this width. Edit the "menu.css" file (on Chrome models this file will be in your template "colors" or "css" folder and be named "(color)-menu.css"). to change this. Example: Edit the "menu.css" or "blue-menu.css" in 4 or 5 places. See the visual below.

Menu colors and fonts:
All the colors used on the menu area can be edited in your css files (see visual below). Edit the menu.css to edit your menu colors and fonts. You may need to also edit menu images ("menu.gif" and "menuon.gif") in the "picts" folder.

Colors and fonts in color theme templates:
See your help.html page for how to change the color theme (if you have a color theme template). On Chrome multi-color templates: Edit the "colortheme.css" to change the menu color theme.

Custom editing menu colors and fonts in theme templates:
In color theme templates: To custom edit the menu css fonts and colors, in the "colors" or "css" folder edit the "blue-menu.css" if you have the "colortheme.css" or "css.js" set for blue. Be sure to backup your files before you do any edits. You may also need to edit the "menu.gif" and "menuon.gif" (or .jpg) images in your "picts/colors" folder. Example: Edit the "menu.gif" in the "blue" folder inside the "picts" folder. All CSS color files include notes so you will know what area to edit. Also see the Chrome template help page and click the visual below.

Adding a button with no dropdown menu:
Copy and paste the line in your menu.js as indicated in the visual below: Last link (no sub menu)

To make solid colored menus with no images:
If you do not want to use the menu.gif images for the top level buttons you can remove this code and have menu buttons that are a solid color and easy to edit. Remove the "background-image" code in 2 or 3 places in the css file in your "colors" or "css" folder. See visual below:

Adding a button that opens in a new window:
Your menu should include a sample new window link for the "PDF help files" menu item in your menu.js. New window links have this extra code highlighted below to open in a new browser window:

document.write('<li><a href="PDFgallery.htm" target="_blank">PDF Downloads</a></li>');

Drop menus & mobile devices:
All Allwebco drop menu templates include page links for the top level menus as shown in the "Changing menu names or links" section above on this page. Because some phones do not include a hover feature for drop menus to pop open, it is recommended that you leave the top level links in place so clients on devices can still go to the top level pages. You may want to carefully consider what page each top level menu links to.

It is also recommended that you include a link to the "site map" html page as a top level link, and list all your pages on the "site map" html page for high mobile device and tablet compatibility.

Two options for making the top level not link:
Optionally, if you do not want the top level menu button to link to any page, you can use a "#" for the page name as in this example:

This type of link may refresh the webpage:

<li>    <a href="#">Home</a>

For more mobile compatibility it may be better to use "javascript:void(0)" instead. Use the following code to make a top level menu button not link, and not refresh the webpage.

Example non-refreshing link in the menu.js:

<li>    <a href="javascript:void(0)">Home</a>

Multi-Level drop menus:
With the CSS drop menus you can add another level to the drop menus. We do not provide support for this type of editing and it is suggested only experienced users try this type of menu.

UPDATES: Some older Allwebco templates may not include the "3LEVEL" files as indicated below. Please contact us if you would like the 3rd level menu files sent to you.

Be sure to make a backup of your menu.js before you start editing.

Below are 2 different ways to use the multi-level (3rd level) menu:

OPTION #1: In your template "extras" folder you will find a file named "menu-3LEVEL-SAMPLE.txt" or "menu-3LEVEL-SAMPLE.js". Copy this file into your main template folder. Rename your "menu.js" to "menu-old.js" and rename the "menu-3LEVEL-SAMPLE.txt" to "menu.js"

OPTION #2: Copy menu link groups out of the "menu-3LEVEL-SAMPLE.txt" in the "extras" folder and paste them into your current menu.js.

Drop menus layer issues:
If your drop menus appear under a webpage element like a video or slideshow or other page element, locate the following class and increase the z-index number, or if you do not have a z-index, add the z-index code as highlighted in red in the samples below.

Horizontal Style ***-menu.css:

#menunav li ul 		{
			z-index: 50;
			position: absolute;
			left: -999em;
			height: auto;
			width: 160px;
			border: solid #000000;
			border-width: 1px 1px 1px 1px;
			/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
			margin: 0;
Vertical Style menu.css:
ul#top-nav li      {
	       position: relative;
	       z-index: 50;
	       list-style: none;

Related Topics:
Links Not Working After an Edit
Adding and Removing Pages
Editing .js Files
Javascript Drop Menu Help

Allwebco Template Support

Allwebco Website Template Support

See Also...
Vertical CSS Menu
Menu Editing
Drop Menus

Allwebco Template Add-ons
Click For Chrome Template Add-ons

Drop Menu Web Templates
Complete websites with built in scripts.
Website Template Support
Business Web Templates
Drop menu templates with built in scripts.
Web Template Support
Nature Templates
Drop menus with nature earth themes.
Website Template Support
Shopping Cart Templates
Professional templates with built-in Paypal.

Be sure to make a backup of the menu.js before you start editing, and also backup every few edits.

Website Template Support
Website Template Support