Foundation-sites: Styling dropdown menu in F6 with pure CSS (no SASS)

[BrittiaGuiriec]

[Impossible to post on forum : deleted as if spam... :( ]

I'm new on F6 and trying to figure out how to customize dropdown menu with pure CSS (no SASS : almost every post I found was dealing with Sass...).

How to reproduce this "bug":

1. Step one

I've put a top-bar + dropdown menu on a website

1. Step two

Can't find how to modify : dropdown width & dropdown border

What should happen:

• beeing able to define dropdown item width (eg : min-width)
• beeing able to delete dropdown container border
• beeing able to get round corner for the dropdown container

With CSS (no SASS)

What happened instead:

• Unable to find accurate selector in order to modify CSS (nothing with inspectors...) without using SASS functions/variables... (Nothing in doc)

• When modifying border-radius, there is still a background color behind (with angular/regular corners).

• No solution available for F6 (latest tuts available are for F5...)

Test case:

Website dev on local...

[IamManchanda]

@BrittiaGuiriec We need to look at your code to see the issue ....

Consider adding your code to codepen, Find below the templates for the same
Foundation without flexbox => http://codepen.io/IamManchanda/pen/vgemXR
Foundation with flexbox => http://codepen.io/IamManchanda/pen/xgXdRq

[BrittiaGuiriec]

Update :

• Round corners : solved
• Dropdown items width : solved

But, impossible to get rid of box border of dropdown, over and around 1st level item (generated by js plugin ?). Have found this selector while playing a while with inspector, but does'nt work (tried border : none and box-sizing : content-box, none worked, even with !important)

li.has-submenu.is-dropdown-submenu-parent.is-down-arrow.is-active{}

[orangedaisy]

Looks like outline might be the property you need to change.

[BrittiaGuiriec]

Yes it is, indeed ! :) I found it yesterday evening...

a{outline : none;}

Even tried a{outline: hidden;} but there is still a border around active first level links.

Update : border : solved

I'll post my HTML+CSS code in my repositories if it can help other people with accurate selectors... Thanks @orangedaisy and @IamManchanda for your help and interest !!! :D

[IamManchanda]

You may close it now if your issue is resolved

[brettsmason]

This looks like it has been solved so closing this. Re-open if you have any problems.