Lines showing between menu but don’t want to be in submenu

Hi there,

change this CSS Selector:

.main-navigation .main-nav ul li a::after

to:

.main-navigation .main-nav > ul > li a::after

Then it will target only the top level items

Thanks it worked but with lia together that is with this :
.main-navigation .main-nav > ul > lia::after
Thanks for rectifying and providing the resolution.

Sorry to bother you again but seems like the above issue is still not resolved as the code provided by you is not making any change however when I worked with?lia?together that is with this :
.main-navigation .main-nav > ul > lia::after it also removed my lines from Menu items which I want and just want it to be removed from Sub menu

Hi there,

Your selector is incorrect. Make sure to include a space between li and a, so it should look like this: .main-navigation .main-nav > ul > li a::after

Yes, I did try this but it is not making any change. Let me tell you again that I am getting a small vertical line at the end of all menu items and submenu items. Though I want that line in menu items but not in submenu. I tried your code exactly but it is not making any change so I am sharing the code to rectify if anything else is creating a conflict.

.main-navigation .main-nav ul li a {
color: #222222 !important;
}
.main-navigation .main-nav ul li a:hover {
color: #03c4eb !important;
}
.main-navigation {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.main-navigation .main-nav > ul > li a::after {
content: “”;
width: 1px;
position: absolute;
top: 18px;
right: 0;
height: 23px;
background: #dddddd;
}
.main-navigation .main-nav ul ul li a{
text-transform: none;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
text-align: left;
padding-top: 15px;
padding-bottom: 15px;
}

.main-navigation .main-nav ul ul li:not(:last-child) a{
border-bottom: 1px solid;
border-color: #83918b;
}

We might need to see the actual menu layout to identify the issue, as it’s difficult to assess with the CSS alone.

.