How to add symbols to links in nav menu?

Question

This is my homework question:

Add the symbols to the links. To do that, use the background-image, background- repeat, and background-position properties as shown in figure 5-11. The symbol is in the images file, and it is named right.jpg. In this case, you don’t want to repeat the image, and you want to position it in the middle vertically and about 95% from the left.

My nav menu is supposed to look exactly like this:

But it ended up looking more like this:

Here is my code:

<h2>Guest speakers</h2>
    <nav id="nav_list">
        <ul>
            <li> <h3> <a href="c06x_toobin.html">October<br>Jeffrey Toobin</a></h3></li>
                <li> <h3> <a href="#">November<br>Andrew Ross Sorkin</a></h3></li>
                <li> <h3> <a href="#">January<br>Amy Chua</a></h3></li>
                <li> <h3> <a href="c07x_toobin.html">February<br>Scott Sampson</a></h3></li>
        </ul>
                <h3> <a href="../index.html">Return to Home page</a></h3>
    </nav>

#nav_list ul { 
list-style: none;
margin-left: 1.25em;
margin-bottom: 1.5em;
background-image: url("images/right.jpg");
background-repeat:  no-repeat;
background-position: 95%;
}
#nav_list ul li { 
width: 200px;
margin-bottom: .5em;
border: 2px solid black; 
border-radius: 10px;
box-shadow: 2px 2px 2px 2px  #800000;
color:blue;
}
#nav_list ul li a {
display: block;
font-weight: bold;
color: blue;
text-decoration: none;
padding: .5em 0 .5em 1.5em; 
color: black;
}

How do I make it look exactly like the picture? I'd appreciate any help.

Answer 1

Use a small "Arrow" image (for example 32x32 px) for the LI element. To be sure to see the arrow give the A element a transparent background. Also give the A some padding on the right side to prevent text will be over the arrow.

#nav_list ul { 
  list-style: none;
  margin-left: 1.25em;
  margin-bottom: 1.5em;
}
#nav_list ul li { 
  width: 200px;
  margin-bottom: .5em;
  border: 2px solid black; 
  border-radius: 10px;
  box-shadow: 2px 2px 2px 2px  #800000;
  color:blue;
  background-image: url("images/right.jpg");
  background-repeat:  no-repeat;
  background-position: 170px 40px; /* from left & from top */
}
#nav_list ul li a {
  display: block;
  font-weight: bold;
  text-decoration: none;
  padding: .5em 3em .5em 1.5em; /* extra padding on right side */
  color: black;
  background: transparent; /* be sure to see the arrow image always */
}
#nav_list ul li a:hover {
  color: blue; /* mouse over text color */
}

Answer 2

The background image should be on the li element, rather than the parent ul.

Also, you can position the background image via X and Y axis in the same property.

#nav_list ul { 
  list-style: none;
  margin-left: 1.25em;
  margin-bottom: 1.5em;
}
#nav_list ul li { 
  width: 200px;
  margin-bottom: .5em;
  border: 2px solid black; 
  border-radius: 10px;
  box-shadow: 2px 2px 2px 2px  #800000;
  color:blue;
  background-image: url("images/right.jpg");
  background-repeat:  no-repeat;
  background-position: 95% 50%;
}
#nav_list ul li a {
  display: block;
  font-weight: bold;
  color: blue;
  text-decoration: none;
  padding: .5em 0 .5em 1.5em; 
  color: black;
}