你的菜单是访问者在访问你的网站时最先看到的东西之一，所以你希望它有一些风格，对吗？你当然知道！这就是为什么在今天的文章，我将分享三种方式，添加一些良好的悬停效果到您的菜单与自定义CSS。

悬停效果应该是微妙的，我们想要视觉兴趣，但这不是网站最重要的部分，你的内容是。这些将添加适量的“弹出”到您的Divi导航。

我们企业公司网站建设不仅会添加一个很好的悬停效果，而且还会有一些样式应用于活动页面的链接。例如，如果用户在主页上，那么菜单中的主页链接就会有一些小的设计处理。这是一个常见的视觉标记，包括在网站上，以帮助提醒用户他们在网站上的位置。这不是绝对必要的，但这是一个很好的帮助用户体验。

主题定制程序设置

首先，对于所有的样式，我们将使用头格式的默认设置。如果您刚刚安装了Divi，您不需要配置这个设置，它应该自动设置为这个设置。

花式单线下面

在这个菜单样式中，我们将添加一条从左到右的直线，它就在被悬停的菜单项下面。它还将在活动页面链接的正下方设置一条静态行。

灵感

这是一个非常好的效果，可以很好地工作在几乎任何类型的网站，加上编辑这种风格的代码，以改变颜色和线宽是相当容易的任何级别的用户。这是一个非常流行的悬停效果，我在网站上看到了很多年。我认为它的微妙之处使它如此多用途，它可以用于房地产网站，以及音乐家的网站和一切介于两者之间的。

实施

企业公司网站建设将以下代码添加到子样式表或divi主题选项>通用>自定义CSS框:

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #15bf86; /*** COLOR OF THE LINE ***/
 height: 3px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}

样式两层厚的“正方形”，下面是线条。

在这种菜单样式中，我们将放置一个大的“块状”行，从鼠标悬停在菜单项下的菜单部分向下移动。它还在活动菜单链接上放置了一个块状框。

灵感

我在我开发的一个名为Execute的Divi子主题上使用了这种风格(我将链接到下面的演示，这样您就可以看到实际站点上的悬停)。从视觉上看，这并不像第一种风格那样微妙，我认为选择合适的站点来使用它才是关键。这是重要的匹配任何类型的小设计细节，如悬停效果，以网站的整体感觉。

实施

企业公司网站建设将下面的代码添加到子主题的样式表中，或者添加到Divi的自定义CSS框中的ThemeOptionsGeneral选项卡下。就编辑颜色而言，更改非常容易，但是如果您计划更改边框的宽度，您将发现还需要使用CSS中的其他数字。

#top-menu li > a:hover {
 box-shadow: 0 10px 0 0 #F15A29 !important; /*** COLOR AND THICKNESS OF THE LINE ON HOVER ***/
 padding-bottom: 34px;
 opacity: 1 !important;
}
#top-menu li li a {
 padding-bottom: 6px !important;
}
#top-menu li.current-menu-item > a,
.et-fixed-header #top-menu li.current-menu-item > a {
 border: 10px solid #F15A29; /*** COLOR AND THICKNESS OF THE BOX ***/
 padding: 10px;
 margin-bottom: -10px;
}

样式三背景彩色按钮

此菜单样式将菜单项转换为具有协调悬停颜色的按钮。它还为活动菜单链接提供了另一种单独的颜色。

灵感

当然，这是受纽扣启发的。PREV: 针对不同的快照情况 我们该如何制定应对策略