How to remove blue highlight color in dropdown foundation 5?

Question

I'm currently creating dropdown menu that will toggle to the right of sidebar. I want to remove the blue color around the dropdown menu. I'm using Foundation 5 to create the dropdown menu.

Here is the screenshot of dropdown that I've made

Below are CSS and HTML code that I used

.f-dropdown1 {
	display: none;
	left: -9999px;
	list-style: none;
	margin-left: 0;
	position: absolute;
	background: #FFFFFF;
	border: solid 1px #cccccc;
	font-size: 0.875rem;
	height: auto;
	max-height: none;
	width: 100%;
	z-index: 89;
	margin-top: 2px;
	max-width: 200px;
}

.f-dropdown1.open {
	display: block;
}

.f-dropdown1>*:first-child {
	margin-top: 0;
}
.f-dropdown1>*:last-child {
	margin-bottom: 0;
}
.f-dropdown1:before {
	border: inset 6px;
	content: "";
	display: block;
	height: 0;
	width: 0;
	border-color: transparent transparent #FFFFFF transparent;
	border-bottom-style: solid;
	position: absolute;
	top: -12px;
	left: 10px;
	z-index: 89;
}
.f-dropdown1:after {
	border: inset 7px;
	content: "";
	display: block;
	height: 0;
	width: 0;
	border-color: transparent transparent #cccccc transparent;
	border-bottom-style: solid;
	position: absolute;
	top: -14px;
	left: 9px;
	z-index: 88;
}
.f-dropdown1.right:before {
	left: auto;
	right: 10px;
}
.f-dropdown1.right:after {
	left: auto;
	right: 9px;
}
.f-dropdown1.drop-right {
	display: none;
	left: -9999px;
	list-style: none;
	margin-left: 0;
	/*    position: absolute;
*/
	background: #FFFFFF;
	border: solid 1px #cccccc;
	font-size: 0.875rem;
	height: auto;
	max-height: none;
	width: 100%;
	z-index: 89;
	margin-top: 0;
	margin-left: 65px;
	max-width: 200px;
}
.f-dropdown1.drop-right.open {
	display: block;
}
.f-dropdown1.drop-right>*:first-child {
	margin-top: 0;
}
.f-dropdown1.drop-right>*:last-child {
	margin-bottom: 0;
}
.f-dropdown1.drop-right:before {
	border: inset 6px;
	content: "";
	display: block;
	height: 0;
	width: 0;
	border-color: transparent #FFFFFF transparent transparent;
	border-right-style: solid;
	position: absolute;
	top: 10px;
	left: -12px;
	z-index: 89;
}
.f-dropdown1.drop-right:after {
	border: inset 7px;
	content: "";
	display: block;
	height: 0;
	width: 0;
	border-color: transparent #cccccc transparent transparent;
	border-right-style: solid;
	position: absolute;
	top: 9px;
	left: -14px;
	z-index: 88;
}
.f-dropdown1 ul:active {
	border: 1px solid red !important;
}
.f-dropdown1 li {
	cursor: pointer;
	font-size: 0.875rem;
	line-height: 1.125rem;
	margin: 0;
}
.f-dropdown1 li:hover, .f-dropdown li:focus {
	background: #EEEEEE;
	border: none;
}
.f-dropdown1 li a {
	display: block;
	padding: 0.5rem;
	color: #555555;
}
.f-dropdown1.content {
	display: none;
	left: -9999px;
	list-style: none;
	margin-left: 0;
	position: absolute;
	background: #FFFFFF;
	border: solid 1px #cccccc;
	font-size: 0.875rem;
	height: auto;
	max-height: none;
	padding: 1.25rem;
	width: 100%;
	z-index: 89;
	max-width: 200px;
}
.f-dropdown1.content.open {
	display: block;
}
.f-dropdown1.content>*:first-child {
	margin-top: 0;
}
.f-dropdown1.content>*:last-child {
	margin-bottom: 0;
}
.f-dropdown1.radius {
	border-radius: 3px;
}
.f-dropdown1.tiny {
	max-width: 200px;
}
.f-dropdown1.small {
	max-width: 300px;
}
.f-dropdown1.medium {
	max-width: 500px;
}
.f-dropdown1.large {
	max-width: 800px;
}
.f-dropdown1.mega {
	width: 100% !important;
	max-width: 100% !important;
}
.f-dropdown1.mega.open {
	left: 0 !important;
}
.dropdown.button, button.dropdown {
	position: relative;
	padding-right: 3.5625rem;
}
.dropdown.button::after, button.dropdown::after {
	border-color: #FFFFFF transparent transparent transparent;
	border-style: solid;
	content: "";
	display: block;
	height: 0;
	position: absolute;
	top: 50%;
	width: 0;
}
.dropdown.button::after, button.dropdown::after {
	border-width: 0.375rem;
	right: 1.40625rem;
	margin-top: -0.15625rem;
}
.dropdown.button::after, button.dropdown::after {
	border-color: #FFFFFF transparent transparent transparent;
}
.dropdown.button.tiny, button.dropdown.tiny {
	padding-right: 2.625rem;
}
.dropdown.button.tiny:after, button.dropdown.tiny:after {
	border-width: 0.375rem;
	right: 1.125rem;
	margin-top: -0.125rem;
}
.dropdown.button.tiny::after, button.dropdown.tiny::after {
	border-color: #FFFFFF transparent transparent transparent;
}
.dropdown.button.small, button.dropdown.small {
	padding-right: 3.0625rem;
}
.dropdown.button.small::after, button.dropdown.small::after {
	border-width: 0.4375rem;
	right: 1.3125rem;
	margin-top: -0.15625rem;
}
.dropdown.button.small::after, button.dropdown.small::after {
	border-color: #FFFFFF transparent transparent transparent;
}
.dropdown.button.large, button.dropdown.large {
	padding-right: 3.625rem;
}
.dropdown.button.large::after, button.dropdown.large::after {
	border-width: 0.3125rem;
	right: 1.71875rem;
	margin-top: -0.15625rem;
}
.dropdown.button.large::after, button.dropdown.large::after {
	border-color: #FFFFFF transparent transparent transparent;
}
.dropdown.button.secondary:after, button.dropdown.secondary:after {
	border-color: #333333 transparent transparent transparent;
}

<a data-options="align:right" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" href="#" class="left"><i class="fa fa-bell-o" aria-hidden="true"></i></a>
<ul id="drop1" class="f-dropdown1" data-dropdown-content aria-hidden="true" tabindex="-1">
  				<li><a href="#">This is a link</a></li>
  				<li><a href="#">This is another</a></li>
  				<li><a href="#">Yet another</a></li>
			</ul>
			

Answer 1

.f-dropdown1 {
  outline: none;
}

Answer 2

Either customise the scss defaults Foundation provides or override them with your own css file.

More in their documentation here.

If you aren't running SASS then you'll need your overrides stylesheet to come AFTER the Foundation one so you don't need to do silly things like use !important.

In the example in the documentation their trigger is a button with the "button" class so you need to override that class to get the look you want:

<a class="button" data-dropdown="tinyDrop" aria-controls="tinyDrop" aria-expanded="false">Link Dropdown »</a>

Personally I'd add something like this to override rather than changing the default .button style:

.button.my-dropdown-style {...}