Question

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.

Answer 1

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... */
}