How to insert background colour into text?

Question

Hi,
I'm relatively new to Dreamweaver so I'm not sure how exactly to phrase this question. Within a div file on my HTML I have created I have a few links taking the user to another page. .
For the sake of clarity I have inserted an image to express what I am trying to say.
The background colour for my div is a chocolate brown. I was wondering if there was any way of creating a background for the text for each link within the div? So the text would have a background with a different colour?
I'm trying to create something that looks like this:
Does anyone know if this is possible to do? Do I have to create separate Div files within the main div file to do this?
Apologies for the lack of detail, I just don't know the technical words to show what I'm looking to do! Any tips or links to tutorials would be hugely appreciated.
Thanks for reading.

Answer 1

First, we need to examine the HTML code used to construct your menu.  The modern approach is to use an unordered list like this:
<nav>
     <ul>
          <li><a href="#">Menu Item1</a></li>
          <li><a href="#">Menu Item2 </a></li>
          <li><a href="#">Menu Item3</a></li>
          <li><a href="#">Menu Item4</a></li>
          <li><a href="#">Menu Item5</a></li>
     </ul>
</nav>
Then style your navigation with CSS like this:
<style>
/**zero out margins & padding on everything**/
margin:0;
padding:0;
/**fix the CSS Box Model on % layouts**/
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
nav {
    width: 100%;  /**adjust width as needed**/
    background-color: #960;
    padding: 30px;
nav ul {
    margin: 0;
    padding: 0
nav li {
    width: 20%;
    list-style: none;
    font-size: 14px;
    float: left;
    text-align: center;
/**menu links**/
nav li a {
    display: block;
    text-decoration: none;
    margin-right: 6px;   /* space between links */
    width: auto;  /* adjust as needed or use auto */
    padding: 6px;
    font-weight: bold;
    line-height: 2em;
    color: #FFF;
    background: orange;
/**menu style on mouse over**/
nav li:hover {
    color: #FFF;
    background: #1e5799;
/**clear floats after nav element**/
nav:after {
    clear: both;
    display: block;
    content: ' ' ;
/**END MENU STYLES**/
</style>
Nancy O.