You are here: Home / Computer / Web Site / CSS Tricks / CSS Menu

css menu

This trick involves the menus with different picture backgrounds that are registered in the CSS.

Problem

When you load your web page for the first time, there are still some pictures that are missing. Indeed some pictures of the menu are not all loaded yet, and more specifically, the pictures that you registered in your CSS like a:hover are missing.

Solution

This is one of those times when you need to go into HTML. To ensure that the pictures are loaded properly, you will enter them under HTML in the invisible mode just after the <body> tag.

Example

To pre-load your pictures, follow this example:

<body>
<!-- pre-load invisible hover pictures -->
<img src="Images1" alt="" width="100" height="10" style="display:none"/>
<img src="Images2" alt="" width="100" height="10" style="display:none"/>
<img src="Images3" alt="" width="100" height="10" style="display:none"/>
... <!-- End of pre-load of hover images -->
... </body>

Replace Image(n) by its complete path for instance: (.../.../Image/Menu_R.png)