title: CSS horizontal menu with 2 images; hover state & position
body: <p>I'm designing a horizontal menu where I use a simple one-colored image of the full menu bar, and a second image for the hover state, which is a bit darker. Actually I made just one image containing both, but that's not the point. </p>
  
  <p>My problems are :</p>
  
  <ol>
  <li>Hover image displays over the correct full width of each list item, 
  but it's only a link (showing hand) when hovering the text.</li>
  <li>My attempt of double-class attributes to adjust position of hover image on first/last list item does not work. It seems this code is never reached..? Hence as image shows, I do not get adjusted the x-position of hover image. </li>
  </ol>
  
  <p>Please note I started with CSS a few days ago, so there are likely some basic concepts I've not yet understood.. </p>
  
  <p><img src="https://i.stack.imgur.com/y7fIC.png" alt="enter image description here"></p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
          &lt;title&gt;index&lt;/title&gt;
          &lt;meta name="author" content="SS" /&gt;
          &lt;!-- Date: 2011-11-26 --&gt;
          &lt;link href="site2.css" rel="stylesheet"type="text/css" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="header-wrap"&gt;
              header
          &lt;/div&gt;
          &lt;div class="main-wrap"&gt;
              &lt;div class="main-content"&gt;
                  &lt;div class="inner-header"&gt;
                      inner header
                  &lt;/div&gt;
                  &lt;div class="navbox"&gt;
                      &lt;div class="navmenu"&gt;
                          &lt;ul class="ul_nav"&gt;
                              &lt;li class="nav-item nav-item-first"&gt;
                                  &lt;a href="index.html"&gt;Home&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="nav-item"&gt;
                                  &lt;a href=""&gt;Page1&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="nav-item"&gt;
                                  &lt;a href=""&gt;Page2&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="nav-item nav-item-last"&gt;
                                  &lt;a href=""&gt;Page3&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="lower-content"&gt;
              lower-content
          &lt;/div&gt;
          &lt;div class="footer"&gt;
              footer
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    /* Basics */
  body {
      background: #888 url() center 30px;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      color: #000;
      text-align: center;
      margin: 0 auto;
  }
  /* Main divs */
  .header-wrap {
      background: #ddd;
      height: 35px;
      color: #00f;
  }
  .main-wrap {
      background: #000 url(07h600a.png) no-repeat center 0;
      margin: 0 auto;
  }
  .main-content {
      overflow: hidden;
      position: relative;
      z-index: 10;
      background: transparent; /* to be transparent*/
      height: 600px;
      margin: 0 auto;
      width: 980px;
  }
  .lower-content {
      background: #000;
      color: #888;
      height: 100px;
  }
  .footer {
      background: #777;
      height: 100px;
      margin: 0 auto;
  }
  /* Content */
  /* Menu */
  .navbox {
      background: #660;
      position: relative;
      padding: 0px 0 0 0;
      margin: 0 auto 0px;
      font-weight: bold;
      font-size: 12px;
      line-height: 40px;
      height: 50px;
      width: 980px;
      margin: 0 auto;
  }
  .navmenu {
      margin: 0 auto 0px;
      padding: 0 0 0 0;
      width: 980px;
  }
  .ul_nav {
      margin: 0;
      padding: 0;
      list-style: none outside none;
      text-transform: uppercase;
  }
  .navmenu .ul_nav {
      width: 980px;
      position: relative;
      display: table;
  }
  .ul_nav li {
      display: table-cell;
  }
  .ul_nav a, .ul_nav a:visited {
  
      padding: 0 0;
      text-decoration: none;
      color: #fff;
  }
  .navmenu .nav-item {
      background: transparent url(MenuGray.png) no-repeat scroll;
      background-position: 50% -10px;
  
  }
  .navmenu .nav-item-first {
      background-position: 0px -10px;
  }
  .navmenu .nav-item-last {
      background-position: 100% -10px;
  }
  /* Menu hover */
  .ul_nav  .nav-item-first li:hover {
          background: transparent url(MenuGray.png) no-repeat scroll;
      background-position: 0px -50px;
  }
  .ul_nav  .nav-item-last li:hover {
      background-position: 100% -50px;
  }
  .ul_nav li:hover {
      background-position: 50% -60px;
  }
  
  /* Menu font */
  .ul_nav_color a, .ul_nav_color a:visited {
      color: #FFF;
  }
  </code></pre>