Aligning non-linked text to linked text in UL LI menu

I have a UL LI text menu in which one menu item I want as non-linkable text.

The plain text item wrapped in the li tag is not vertically aligning with the linked text items. It also doesn't seem to have the appropriate horizontal spacing that other linkable items have between themselves.

You can see it here:
http://www.norrislakevilla.com/new-site/index.html

Where "Explore Villas »" is the non-linkable text.

HTML Code:
<div class="menu">
<ul>
<li><a href="index.html" class="active"><span>Home</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
<li><span>Explore Villas »</span></li>
<li><a href="night-sky.html"><span>Night Sky</span></a></li>
<li><a href="big-dipper.html"><span>Big Dipper</span></a></li>
<li><a href="slice-of-heaven.html"><span>Slice of Heaven</span></a></li>
</ul>
</div>

CSS Code:
.menu { float:right; padding:25px 15px 0 0; margin:0; width:580px; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none; color:#00A900;}
.menu ul { text-align: right; padding:0; margin:0; list-style:none; border:0; float:right;}
.menu ul li { float:left; margin:0; padding:0 5px; border:0;}
.menu ul li a { float:left; margin:0; padding:13px 0; color:#a1a1a1; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a span { padding:13px; background:none;}
.menu ul li a:hover { color:#fff; background: url(images/r_menu.gif) no-repeat right;}
.menu ul li a:hover span { color:#fff; background:url(images/l_menu.gif) no-repeat left;}
.menu ul li a.active { color:#fff; background:url(images/r_menu.gif) no-repeat right;}
.menu ul li a.active span { color:#fff; background:url(images/l_menu.gif) no-repeat left;}

Obviously the ".menu ul li a" & "span" has other styling imposed upon it, but I've tried several styling commands to make the plain text align & space correctly with no luck.

Any suggestions?

You have a padding on this:

.menu ul li a {
color: #A1A1A1;
float: left;
font: 12px Arial,Helvetica,sans-serif;
margin: 0;
padding: 13px 0;
text-decoration: none;

but not on the span around your Explore Villas text. Remove the padding or add it to the Explore Villas span.

Firebug is an awesome tool that would point out things like this. You should download it and really learn to use it.

Here is a good question why would you be putting something on the menu as a none linkable item? Whats the end result goal here?

If you wanted to do something like removing the background on that specific link or something like that.... that's easy to do.

I added the following plain text span styling:

.menu ul li span { padding:13px; background:none;}

This corrected the horizontal spacing between the other text menu items, but it is still positioned about 13px too high.

I tried breaking up the padding individually and increasing the top padding to push it down more, but it didn't work.

it helps me to separate the grouping of the menu and provides additional guidance & direction to the user.

.menu ul li span { padding:13px; background:none;}

Thats going to target every li that has a span, which is all of them. You'll have to give that particula span an id or class. You should do some reading about CSS specificity (http://www.htmldog.com/guides/cssadvanced/specificity/).

Added the following span class to my CSS:
.menu ul li span.nolink { padding:13px; background:none;}

and adjusted my HTML:
<li><span class="nolink">Explore Villas »</span></li>

Not sure what I'm still missing here to get it right. Although would I need to create a separate span class since all of the li's should have the same padding assigned to it?

Added the following span class to my CSS:
.menu ul li span.nolink { padding:13px; background:none;}

and adjusted my HTML:
<li><span class="nolink">Explore Villas »</span></li>

Not sure what I'm still missing here to get it right.

hmm not sure whats wrong. If you remove the padding from

.menu ul li a {
color: #A1A1A1;
float: left;
font: 12px Arial,Helvetica,sans-serif;
margin: 0;
/*padding: 13px 0;*/
text-decoration: none;

then add padding: 13px 0; to:

.menu ul li a {
color: #A1A1A1;
float: left;
font: 12px Arial,Helvetica,sans-serif;
margin: 0;
padding: 13px 0;
text-decoration: none;

Added the following span class to my CSS:
.menu ul li span.nolink { padding:13px; background:none;}

and adjusted my HTML:
<li><span class="nolink">Explore Villas »</span></li>

Not sure what I'm still missing here to get it right. Although would I need to create a separate span class since all of the li's should have the same padding assigned to it?
try this:

.menu ul li span.nolink {
display:block;
padding:13px;
}


best regards