How to Add Vertical Navigation Menu in Weebly Site?

Adding vertical navigation menu in Weebly site is an easy way to provide quick and useful links to users. It can be a widget consistently placed on all pages as a sidebar or used on specific pages wherever you want or used on a blog sidebar. In this article we will explain the step by step process of adding vertical menu widget to your Weebly site with multi-level sub-menus. Remember, the text and hover color may vary based on your theme.

Features of the Widget

• Navigation menu widget contains simple CSS and HTML code.
• This is not a responsive widget, hence use multi-level only if required. If you are targeting for mobile users or blog sidebar then use only single level menu which can fit into the visible area.
• The color, width and height of the menu can be customized in the CSS.
• Additional menu or sub-menu items can be added as you need by modifying CSS/HTML.
• You can place the widget on as many places as you wish.

CSS for Vertical Navigation Menu

Copy and paste the below CSS code under “Pages > Select a Page > SEO Settings > Header Code” section. If you want to add the widget on many pages then add the code under “Theme > Edit HTML / CSS > Assets > main.less“.

ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 200px; /*For KHTML*/
list-style: none;
}

ul#navmenu:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

ul#navmenu li {
float: left; /*For IE 7 lack of compliance*/
display: block !important; /*For GOOD browsers*/
display: inline; /*For IE*/
position: relative;
}

/* Root Menu */
ul#navmenu a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
display: block;
background: #EEE;
color: #666;
font: 18px/40px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #CCC;
color: #FFF;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
background: #EEE;
color: #666;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}

ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 200px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}

This is for three level of sub-menus and you can add as many as sub-menus by replication 3rd menu section in the code.

HTML for Navigation Menu

Add the below HTML code inside “Embed Code” element on a page where you want to add the menu:

<ul id="navmenu">
<li><a href="#">Web Design</a></li>
<li><a href="#">Hosting Plans &nbsp ›</a>
<ul>
<li><a href="#">WordPress &nbsp ›</a>
<ul>
<li><a href="#">First Site</a></li>
<li><a href="#">Second Site</a></li>
<li><a href="#">Third Site</a></li>
<li><a href="#">Fourth Site</a></li>
</ul>
</li>
<li><a href="#">Weebly</a></li>
<li><a href="#">Wix</a></li>
</ul>
</li>
<li><a href="#">Site Builder &nbsp ›</a>
<ul>
<li><a href="#">WordPress &nbsp ›</a>
<ul>
<li><a href="#">Plan 1</a></li>
<li><a href="#">Plan 2</a></li>
<li><a href="#">Plan 3</a></li>
<li><a href="#">Plan 4</a></li>
<li><a href="#">Plan 5</a></li>
</ul>
</li>
<li><a href="#">Weebly &nbsp ›</a>
<ul>
<li><a href="#">Plan 1</a></li>
<li><a href="#">Plan 2</a></li>
<li><a href="#">Plan 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Email Plans</a></li>
<li><a href="#">Site Security</a></li>
</ul>

Replace the menu descriptions and remove # with your own links. Also add or delete menu and sub-menu items as you need.

Now publish your site to see an elegant vertical menu like below.

Note: There will be a horizontal scroll bar if there is another element placed beside menu occupying the width.