Up Arrow Before Submenu Background - css

Question

I'm working on this project: http://www.livingthelighterlife.com/
In the top area navigation (Home, About, Contact, Work With Me), I have a submenu drop down. The only active link is "About" - when you hover over it, the submenu appears, as does the up-arrow before it, however, I can't make the background of the up-arrow go away. It should be transparent, but it is showing up as the same pink color as the submenu.
Thanks in advance.
#top-navigation {
float: left;
padding-top: 4px;
}
#top-navigation ul {
list-style: none;
position: relative;
}
#top-navigation ul a {
display: block;
color: #ffffff;
text-decoration: none;
}
#top-navigation ul a:hover {
color: #f68364;
}
#top-navigation ul li {
position: relative;
float: left;
margin: 0px 10px;
}
#top-navigation ul li:hover {
color: #f68364;
}
#top-navigation ul ul:before {
content: '';
display: block;
margin: auto;
width: 0;
height: 0;
background: transparent !important;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #6d5d68;
}
#top-navigation ul ul {
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 150px;
background: #f68364;
}
#top-navigation ul ul li {
float: none;
margin: 0px;
}
#top-navigation ul ul a {
display: block;
padding: 10px;
}
#top-navigation ul ul a:hover {
background: #6d5d68;
color: #ffffff;
}
#top-navigation ul ul ul {
top: 0;
left: 100%;
}
#top-navigation ul li:hover > ul {
display: block;
}
<nav id="top-navigation">
<ul>
<li>
Home
</li>
<li>
About
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>
Contact
</li>
<li>
Work With Me
</li>
</ul>
</nav>

Answer 1

In reference to my comment, there may be unintended side effects if you try to maintain a background color on the <ul>. I recommend removing the background: #f68364 from #top-navigation ul ul and instead adding it to #top-navigation ul ul li. I also recommend changing border-bottom: 10px solid #6d5d68; on #top-navigation ul ul:before to border-bottom: 10px solid #f68364;

Answer 2

Move background: #f68364; from #top-navigation ul ul to #top-navigation ul ul a
#top-navigation ul ul a {
display: block;
padding: 10px;
background: #f68364;
}
#top-navigation {
float: left;
padding-top: 4px;
}
#top-navigation ul {
list-style: none;
position: relative;
}
#top-navigation ul a {
display: block;
color: #ffffff;
text-decoration: none;
}
#top-navigation ul a:hover {
color: #f68364;
}
#top-navigation ul li {
position: relative;
float: left;
margin: 0px 10px;
}
#top-navigation ul li:hover {
color: #f68364;
}
#top-navigation ul ul:before {
content: '';
display: block;
margin: auto;
width: 0;
height: 0;
background: transparent !important;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #6d5d68;
}
#top-navigation ul ul {
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 150px;
}
#top-navigation ul ul li {
float: none;
margin: 0px;
}
#top-navigation ul ul a {
display: block;
padding: 10px;
background: #f68364;
}
#top-navigation ul ul a:hover {
background: #6d5d68;
color: #ffffff;
}
#top-navigation ul ul ul {
top: 0;
left: 100%;
}
#top-navigation ul li:hover > ul {
display: block;
}
<nav id="top-navigation">
<ul>
<li>
Home
</li>
<li>
About
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>
Contact
</li>
<li>
Work With Me
</li>
</ul>
</nav>