Vertical menu with background images in the rollover

In a former article we saw how to use CSS a vertical menu with a mouseover effect , using a different background color to mark the item you are moving the mouse.

We revisit this example and expanding, adding two key features of this menu: improved accessibility through the use of bullets and a better performance in terms of design.

Here's the result we want to obtain:

In the screenshot example of the mouse pointer is stationary on the second link in the menu.

These two images are used for example to give the name and menu_1.gif menu_2.gif:

where size (150X22 pixels) have been tailor-made to the width of the box, the font size and padding assigned to individual items.

I invite readers to create custom images to layout and the dimensions pertinent to its needs.

Let's practice, beginning to draw the menu. We analyze the HTML code:

 <div id="menu">



    



 <ul>



        



 <li> <a href="#"> Page 1 </ a> </ li>



        



 <li> <a href="#"> Page 2 </ a> </ li>



        



 <li> <a href="#"> Page 3 </ a> </ li>



        



 <li> <a href="#"> Page 4 </ a> </ li>



        



 <li> <a href="#"> Page 5 </ a> </ li>



    



 </ Ul>







 </ Div>

All menus will be in a box marked "menu", in which we will build a bulleted list containing the links.

Do not assign any ID and no class to link to any of the menu items (list, list, link), based solely on identifications by the nesting of elements.

Follows the CSS accompanied by appropriate remarks:

 / * Stylized generically the DIV tag * /









 p







 {



    



 font-size: 10px;



    



 font-family: verdana;







 }









 / * Assign the background and the width of the box in the menu * /









 # Menu







 {



    



 background: # CCDDEE;



    



 width: 150px;







 }









 / * Delete the default style from the UL tag contained in the menu * /









 # Menu ul







 {



    



 margin: 0px 0px 0px 0px;



    



 list-style-type: none;







 }









 / * Stylized lists in the menu * /









 # Menu will







 {



    



 margin: 0px 0px 0px 0px;



    



 border-bottom: 1px solid # FFFFFF;







 }









 / * Assign the style to the links in the list of menu * /









 # Menu li a, them a: hover







 {



    



 display: block;



    



 position: relative;



    



 text-decoration: none;



    



 color: # 192939;



    



 font-weight: bold;



    



 padding: 5px 5px 5px 5px;







 }









 / * Set the background of the links, by default, and the mouseover * /









 # Menu there to







 {



    



 background-image: url (menu_1.gif);







 }







 # Menu will a: hover







 {



    



 background-image: url (menu_2.gif);







 }

The operations of the nesting of elements, as mentioned above, ensure that the only bullet that will appear with this stylization is the menu, as a result of nesting inside the box with the ID "menu."

All other bullets of the site will have their way of default or explicitly assigned via CSS.