首先要用浏览器的检查元素工具，找清楚菜单栏的.div定义，和一级菜单的命名
以everbox主题为例。下述代码中，main-menu-container为菜单栏容器命名，main-nav为一级菜单的命名
CSS代码
简单样式实例
.main-menu-container .main-nav li {
position: relative;
}
.main-menu-container .main-nav li:hover .dropdown-menu {
display: block;
}
.main-menu-container .dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #f5f5f5;
padding: 10px;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.main-menu-container .dropdown-menu li {
margin-bottom: 8px;
}
.main-menu-container .dropdown-menu li a {
display: block;
color: #333;
text-decoration: none;
padding: 6px 12px;
transition: background-color 0.3s ease;
}
.main-menu-container .dropdown-menu li a:hover {
background-color: #e6e6e6;
}美化二级菜单栏
.main-menu-container .main-nav li {
position: relative;
}
.main-menu-container .main-nav li:hover .dropdown-menu {
display: block;
}
.main-menu-container .dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #f5f5f5;
padding: 10px;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
width: 200px; /* 调整宽度的数值 */
}
.main-menu-container .dropdown-menu li {
margin-bottom: 8px;
}
.main-menu-container .dropdown-menu li a {
display: block;
color: #333;
text-decoration: none;
padding: 6px 12px;
transition: background-color 0.3s ease;
}
.main-menu-container .dropdown-menu li a:hover {
background-color: #e6e6e6;
}HTML代码
ZBlog示例
模块管理-导航栏，不要用插件，自己输入代码为：
<li><a href="https://fish111.top/" title="">首页</a></li> <li><a href="https://fish111.top/category/wangzhanjianshe/"">网站建设</a></li> <li><a href="https://fish111.top/category/ziyuanfenxiang/"">资源分享</a></li> <li><a href="https://fish111.top/category/xuexibiji/"">学习笔记</a></li> <li><a href="https://fish111.top/category/zixunxinxi/"">资讯信息</a></li> <li> <a href="#">菜单项 1</a> <ul class="dropdown-menu"> <li><a href="#">下拉菜单项 1</a></li> <li><a href="#">下拉菜单项 2</a></li> <li><a href="#">下拉菜单项 3</a></li> </ul></li>
No Comment