Complex css menu

I have a menu:

<div class="headerMenu">
    <ul>
        <li><a href="#">Home <span>Home Page<span></a></li>
        <li><a href="#">About <span>About My Website<span></a></li>
        <li><a href="#">Contact <span>Get in touch<span></a></a></li>
    </ul>
</div>

My current CSS is as follow:

.headerMenu{
    width: 100%;
}

.headerMenu ul{
    margin: 0; 
    padding: 0;
    float: left;
}

.headerMenu ul li{
    display: inline;
}

.headerMenu ul li a{
    float: left;
    color: white;
    padding-top:25px;
    padding-left:50px;
    font-size:24pt;
}

.headerMenu ul li a:visited{
    color: white;
}

.headerMenu ul li a:hover, .menu ul li .current{
    color: #fff;
    background: url(../../Content/Images/menu-selector.png) repeat-x; /* 25x10 arrow/*
}

And now for the question:

1. How can i get the content in the span tag to be below the Main text.
2. When i hover over the anchor, How开发者_高级运维 do i add the hover image as shown in screen shot

The Mockup i created in Photoshop looks like this:

I know this would be easily achievable by making use of images, but my solution requires that menu to be created dynamically.

1) How can i get the content in the span tag to be below the Main text.

You need to use display: block on the span to have it appear on a new line:

.headerMenu ul li a span {
  display: block;
}

2) When i hover over the anchor, How do i add the hover image as shown in screen shot

Try to center the arrow to the top. This might work:

.headerMenu ul li a:hover, .menu ul li .current {
  color: #fff;
  background: url(../../Content/Images/menu-selector.png) no-repeat center top;
  display:block;
  /* also make sure that you use display block with correct height
   so that you can positionate the arrow on the correct place... */
}

Add the following code for problem 1:

.headerMenu ul li a span {
    display: block;
}

This sets the <span> to display as a block level element, therefore occupying the full parent container width by default.

For problem 2, there are multiple ways to do this. However, my suggestion would be to add the array to the <li> and use the :hover pseudo class. Note: that this will only work in IE for 7+.

.menu ul li:hover{
    background: url(../../Content/Images/menu-selector.png) repeat-x;
}

See it in action - http://jsfiddle.net/kxqx8/1/ (I changed the colors to help display)