@hayleywonghyxy You can add the left/right borders to your hover/active menu items by modifying the css classes as noted below. You'll first want to get to the site's css. In the Weebly Site Editor, click "Theme" in the top navigator and then click the "Edit HTML/CSS" button at the bottom of the left-hand sidebar. You will by default land at the site's css code window. Click the magnifying glass at the top of the code window and enter the following search term: "#navigation li" (without the double-quotes). This should bring you to the following code block where you'll add transparent left and right border to the menu list items (the code highlighted in red below). I'll explain this further down in this reply.
#navigation li {
display: inline-block;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}Next, you'll search for the following term: "#navigation li#active" (again, no double-quotes). This will bring you to the following code block (probably right beneath the one above) where you'll add the colored left/right borders (highlighted in red below):
#navigation li:hover, #navigation li#active {
background-color: #f6f6f6;
color: #484848;
border-left: 1px solid #484848;
border-right: 1px solid #484848;
}The reason why we added the transparent borders on the menu list items' non-hover state (the first code block) is to simply add the 1px border width to each side of each menu item even though the borders are transparent. When you hover over a non-active menu item, the transparent borders simply change from transparent to the dark grey color (the color hex code 484848 in the second code block). If we had not added the transparent borders in the non-hover state, the hover state would introduce 1px of border on each side of the hover menu item thereby causing a "jog" in the hovered menu item position by 1px. By essentially adding a (transparent) 1px left/right jog to all the menu items beforehand, the hover state doesn't introduce an unsightly 1px position shift of the menu items adjacent to the one you're hovering over. You can also choose which border color you'd like to use. In this code example, I simply made the borders the same color as the menu item text (#484848). If, for example, you'd prefer to use the brand's lime green color for the borders instead, you'd change the color hex code in the second code block from #484848 to #8cc045. You can also modify the border width and style attributes as well if you wish. In the example above, I simply used a 1px border width and solid line style. You can change the 1px (on both left and right borders) to whatever width you prefer. The style can be "solid", "dotted", "dashed", "double", "groove", "ridge", "inset", or "outset". And of course, you can choose to place borders on any side of each menu item. In this case, we added left and right borders but you can choose top and bottom or just top or just bottom or do a full border all the way around the menu item ("border: 1px solid #484848" is all you need in that case).
Now, if you were perhaps looking for a bit more "animation" in the effect, you could try this variation. Here, I'm going to do the borders a bit thicker and have them appear from the top and bottom of the menu item:
Non-hover state:
#navigation li {
display: inline-block;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
padding: 16px 0;
transition: 0.3s ease;
}Hover state:
#navigation li:hover, #navigation li#active {
background-color: #f6f6f6;
color: #484848;
border-top: 3px solid #484848;
border-bottom: 3px solid #484848;
padding: 6px 0;
}Incidentally, I'd suggest that you change your sub-navigation font size from 13px to 11px to match the main navigation font size. You should also add 1px of letter spacing to the sub-navigation as well to be consistent with the main navigation. To make this change, in the Weebly Site Editor, click on "Theme" in the top navigation, then click on "Change Fonts" then click on Navigation menu and modify the sub-navigation menu settings.
