CSS pseudo selector on drop down menu - css

Question

I am using the CSS :before pseudo-selector to create a block above the first item in a drop down list. I've been having trouble getting this block created with the pseudo-selector to be the same width as the <li> above it.
For example when you hover over "About" the pseudo block that appears beneath it should be the same width as the block that contains the word "About" and so on for the other 3 blocks.
Here's a fiddle to what I have got so far: http://jsfiddle.net/jh67P/
Here's my HTML:
<nav>
<ul class="main">
<li>About
<ul class="secondary">
<li>Learn About Us</li>
<li>Nice things to know</li>
</ul>
</li>
<li>Products
<ul class="secondary">
<li>Product One</li>
<li>Product Two</li>
</ul>
</li>
<li>Features
<ul class="secondary">
<li>Something Nice</li>
<li>Another nice thing</li>
</ul>
</li>
</ul>
</nav>
Here's the CSS:
nav .main {
font-size: 1em;
margin: 0;
padding: 0;
list-style: none;
}
.main > li {
display: block;
position: relative;
float: left;
}
.main > li a {
display: block;
text-decoration: none;
color:#FFF;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
.main > li a:hover {
background: #3b3b3b;
color:#FFF;
}
.secondary {
display:none;
list-style: none;
margin: 0;
padding: 0;
}
.main li:hover .secondary {
display: block;
position: absolute;
}
.main li:hover ul li {
float: none;
font-size: 1em;
}
.main > li:hover a { background: #3b3b3b; }
.main > li:hover li a:hover {
background: #1e7c9a;
}
.main li:hover ul:before {
content:'';
display:block;
width:100%;
height:10px;
border-bottom:10px solid #1e7c9a;
border-right: 10px solid transparent;
}
Edit: Using absolute positioning I was able to achieve the effect. Here's the updated CSS.
nav .main {
font-size: 1em;
margin: 0;
padding: 0;
list-style: none;
}
.main > li {
display: block;
position: relative;
float: left;
}
.main > li a {
display: block;
text-decoration: none;
color:#FFF;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
.main > li a:hover {
background: #3b3b3b;
color:#FFF;
}
.secondary {
display:none;
list-style: none;
margin: 0;
padding: 0;
}
.main li:hover .secondary {
display: block;
position: absolute;
top:40px;
}
.main li:hover ul li {
float: none;
font-size: 1em;
}
.main > li:hover a { background: #3b3b3b; }
.main > li:hover li a:hover {
background: #1e7c9a;
}
.main > li:hover:after {
content:'';
display:block;
width:100%;
height:10px;
border-bottom:10px solid #1e7c9a;
border-right: 10px solid transparent;
position:absolute;
top:20px;
margin-left:1px;
}

Answer 1

How about changing:
.main li:hover ul:before {
To:
.main > li:hover > a:after {
Is that what you are after?
jsFiddle