如何在Weebly网站中添加垂直导航菜单

在Weebly建站网站中添加垂直导航菜单是一种向用户提供快速有用的链接的简单方法。 它可以是始终作为侧边栏放置在所有页面上的小部件，也可以在您想要的任何特定页面上使用或在博客侧边栏上使用。 在本文中，我们将通过多级子菜单向您的 Weebly建站添加垂直菜单小部件的分步过程。 请记住，文本和悬停颜色可能会因您的主题而异。

推荐：如何修复Windows 10/11 ISDone.dll (ISArcExtract)错误

• 导航菜单小部件包含简单的 CSS 和 HTML 代码。
• 这不是响应式小部件，因此仅在需要时才使用多级。 如果您的目标是移动用户或博客侧边栏，则仅使用可放入可见区域的单级菜单。
• 菜单的颜色、宽度和高度可以在 CSS 中自定义。
• 可以根据需要通过修改 CSS/HTML 添加其他菜单或子菜单项。
• 您可以将小部件放置在任意数量的位置。

将以下 CSS 代码复制并粘贴到“页面 > 选择页面 > SEO 设置 > 标题代码“ 部分。 Weebly建站如果您想在许多页面上添加小部件，请在“主题 > 编辑 HTML / CSS > 资产 > 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;
}

这是针对三层子菜单的，您可以通过复制代码中的第三个菜单部分来添加尽可能多的子菜单。

在“嵌入代码” 页面上要添加菜单的元素：

<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>

用您自己的链接替换菜单描述并删除#。 还可以根据需要添加或删除菜单和子菜单项。

现在发布您的网站以查看如下优雅的垂直菜单。

注意 Weebly建站如果菜单旁边有另一个元素占据宽度，则会有一个水平滚动条。