Hover Background Color and Image, XHTML CSS Menu Link

A combination of html and css code menu list. When the mouse over the text or links in the menu, the background will instantly change the color or image. This menu list is separate from the text and links, but at the same time it will change the background effects when the mouse hovers.

This Menu Link is a combination of XHTML and CSS2.0. You can change or modify it to suit your site layout as you like.

Resources:

CSS Code

<style type="text/css">

#menu_link { margin-top : 15px; padding-top : 15px; }
#menu_link table { width : auto; margin-left : 0; font-size : inherit; }
#menu_link thead { display : none; }
#menu_link tbody tr {width : 49%; padding : 0; }
#menu_link tbody tr:hover { background-color : #FF9900; color : #FFFFFF; }
#menu_link td { padding : 2px; vertical-align : top; }
.odd { background-color : #FFFFFF; }
.fruits { width : 30px; }
.buy { width : 30px; }
.buy a { display : block; width : 49px; height : 19px; margin : 0 30px; background : url(buy.jpeg) no-repeat; text-indent : -9999px; }

</style>

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">

#menu_link { margin-top : 15px; padding-top : 15px; }
#menu_link table { width : auto; margin-left : 0; font-size : inherit; }
#menu_link thead { display : none; }
#menu_link tbody tr {width : 49%; padding : 0; }
#menu_link tbody tr:hover { background-color : #FF9900; color : #FFFFFF; }
#menu_link td { padding : 2px; vertical-align : top; }
.odd { background-color : #FFFFFF; }
.fruits { width : 30px; }
.buy { width : 30px; }
.buy a { display : block; width : 49px; height : 19px; margin : 0 30px; background : url(buy.jpeg) no-repeat; text-indent : -9999px; }

</style>
</head>

<body>

<div align="center" id="menu_link">
              <h2>Berry Menu list</h2>

              <table cellpadding="0" cellspacing="0" summary="Berry...?">
                <thead>
                  <tr>
                    <th class="fruits">Num</th>

                    <th>Fruits</th>

                    <th class="buy"><abbr>Buy</abbr></th>
                  </tr>
                </thead>

                <tbody>
                  <tr>
                    <td class="fruits">1</td>

                    <td>Bearberry</td>

                    <td class="buy"><a href="#" title="Buy Fruits">Buy Fruit</a></td>
                  </tr>

                  <tr>
                    <td class="fruits">2</td>

                    <td>Whortleberry</td>

                    <td class="buy"><a href="#" title="Buy Fruit">Buy Fruit</a></td>
                  </tr>

                  <tr class="odd">
                    <td class="fruits">3</td>

                    <td>Blueberry</td>

                    <td class="buy"><a href="#" title="Buy Fruit">Buy Fruit</a></td>
                  </tr>

                  <tr class="odd">
                    <td class="fruits">4</td>

                    <td>Crowberry</td>

                    <td class="buy"><a href="#" title="Buy Fruit">Buy Fruit</a></td>
                  </tr>

                  <tr>
                    <td class="fruits">5</td>

                    <td>Cranberry</td>

                    <td class="buy"><a href="#" title="Buy Fruit">Buy Fruit</a></td>
                  </tr>

                  <tr>
                    <td class="fruits">6</td>

                    <td>Falberry</td>

                    <td class="buy"><a href="#" title="Buy Fruit">Buy Fruit</a></td>
                  </tr>

                  <tr class="odd">
                    <td class="fruits">7</td>

                    <td>Huckleberry</td>

                    <td class="buy"><a href="#" title="Buy Fruit">Buy Fruit</a></td>
                  </tr>

                  <tr class="odd">
                    <td class="fruits">8</td>

                    <td>Lingonberry</td>

                    <td class="buy"><a href="#" title="Buy Fruit">Buy Fruit</a></td>
                  </tr>

                  <tr>
                    <td class="fruits">9</td>

                    <td>Strawberry</td>

                    <td class="buy"><a href="#" title="Buy Fruit">Buy Fruit</a></td>
                  </tr>

                  <tr>
                    <td class="fruits">10</td>

                    <td>Wolfberry</td>

                    <td class="buy"><a href="#" title="Buy Fruit">Buy Fruit</a></td>
                  </tr>
                </tbody>
              </table>
            </div>
</body>

</html>

Webmaster » XHTML CSS » You are here

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

CSS Website Layout