Samantha Samantha - 2 months ago 6
CSS Question

Up Arrow Before Submenu Background

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>
<a href="http://www.livingthelighterlife.com/">Home</a>
</li>

<li>
<a href="/about/">About</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>

<li>
<a href="#">Contact</a>
</li>

<li>
<a href="#">Work With Me</a>
</li>

</ul>
</nav>




Answer

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;