首先要用浏览器的检查元素工具，找清楚菜单栏的.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://www.fish111.top/" title="">首页</a></li>
- <li><a href="https://www.fish111.top/category/wangzhanjianshe/"">网站建设</a></li>
- <li><a href="https://www.fish111.top/category/ziyuanfenxiang/"">资源分享</a></li>
- <li><a href="https://www.fish111.top/category/xuexibiji/"">学习笔记</a></li>
- <li><a href="https://www.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