Dropdown menu borders

please consider to create a child theme if your customization goes beyond editing the CSS.
for just CSS, please consider to use a ‘custom CSS’ plugin rather than editing style.css of the theme directly.

try this CSS:

.main-navigation li, .main-navigation ul ul li { border: none; }
.main-navigation ul ul { border-bottom: none; }
.main-navigation ul ul::after, .main-navigation ul ul::before { display: none; }

Hi Michael

I was using a child theme indeed and did my customization in the child’s css. I dont have a plugin for this though.

Your coding worked ! Many thanks for your help. Only one other thing. The dropdown box is not aligned directly under the main menu but to the left of it. How can i get de second level aligned direclty under the main menu.

Thanks aagin,
Hazy

How can i get de second level aligned direclty under the main menu.

try with:

.main-navigation li:hover > ul, .main-navigation li.focus > ul { left: 0; right: auto; }
.main-navigation ul ul a { padding-left: 0.79em; }

not tested for third level dropdowns…

Thanks Michael but it didnt work. Sorry maybe I didnt explain it clearly. Currently the dropdown menu is aligned to the right edge of the main menu. The left side of the dropdown is going over the left edge of the main menu because the dropdown menu got longer text. I had rather that the dropdown menu being aligned to the left edge of the main. With your coding the situation didnt change, the dropdown is still aligned to the right edge.

I tested that with FireFox’ web developer addon and in a real child theme;
however, CSS can depend on local specifics.

have you tried to clear the browser cache, as browsers do sometimes hold on to old formatting… ?

could you post a link to your site to allow somebody to check the formatting?

The temmporary link of my site is https://www.wp.hazelling.nl. I checked on chrome and safari. And cache was cleared too

possibly from copy/paste, the code in the CSS is broken;
this is what I see with Firefox’ web develper add-on:

.main-navigation li:hover > ul, .main-navigation li.focus > ul { left: 0; right: auto; } /* align drop down but doesnt work */
.main-navigation ul ul a { padding-left: 0.89em; }

should be:

.main-navigation li:hover > ul, .main-navigation li.focus > ul { left: 0; right: auto; } /* align drop down but doesnt work */
.main-navigation ul ul a { padding-left: 0.89em; }

Thanks a lot Micheal its working !!!

Just for my understanding and to know in future what to look for when somehting its not working. I don’t see any difference between the 2 lines. And also first I copy your coding from the notification email and this didnt work. Then I try it again by copying the coding directly from this site. And it worked. Don’t understand what the difference is.

I don’t see any difference between the 2 lines.

I didn’t double-check after posting that what I intended to show was actually showing.

this is caused by the forum editor – seems to change, for example, < back to >

I don’t see any difference between the 2 lines.

I didn’t double-check after posting that what I intended to show was actually showing.

this is caused by the forum editor – seems to change, for example, & gt; ?(ther should actually be no space after & but I had to add it so it stayed as I want to show it) back to >

OK thanks !