If you want to change the look of the top-bar in foundation, these are the main elements you need to adjust. They appear in order. I changed the default colors as an example.

top-bar

.top-bar { /* main color of the top-bar */
	background: #333333;
}
.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] { /* color of the divider */
	border-right: solid 1px #4e4e4e;
}
.top-bar-section ul li {
	background: #333333;
}
.top-bar-section li:not(.has-form) a:not(.button), 
.top-bar-section ul li:hover:not(.has-form) > a { /* main color of links in top-bar */
	background: #333333;
}
.top-bar-section li:not(.has-form) a:not(.button):hover,
.top-bar .name:hover { /* hover color of links in top-bar */
	background: red;
}
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) { /* color of links in drop down */
	background: purple;
}
.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button) { /* hover color of links in drop down */
	background: pink;
}
.top-bar-section .has-dropdown > a:after {/* Color and position of Dropdown Arrow */
	border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
	top: 22.5px;
}
.top-bar-section li.active:not(.has-form) a:not(.button) { /* color for active link */
	background: #eb0101;
}
.top-bar-section li.active:not(.has-form) a:not(.button):hover { /* active link hover color */
	background: #0078a0;
}

This is by no means complete. I believe there are still a few things I may have to add. If I missed something please feel free to let me know. if I find anything else, I will update accordingly.