show image when hovering over sub menu item

Hi,

I want to show a image when you hover over a submenu item in wordpress and make that image clickable .

For example :
menu 1
sub menu 1
sub menu 2

So when i hover over the word sub menu 1 or submenu 2 , i want an 70*70 image to display that can link to another page .

How can i accomplish that ?

 

Not tested.

<li><a href="#"><img src="some.jpg"></a></li>
----------------
li a img {
    display: none;}

li a:hover img {
    display: inline;}

Code (markup):

You haven't given enough info to provide more than a bare skeleton.

gary

 

where do i add this code in wordpress
<li><a href="#"><img src="some.jpg"></a></li>

 

I don't know. You haven't shown us the markup you're using for your menu nor where the menu's style properties are located nor what they are. We can only guess.

Look into the source for your menus and if you've got a proper list structure, use the css I gave you as a guide to refactoring the applicable style sheet(s).

 

Hello,

You can install the Menu Image plugin:
https://wordpress.org/plugins/menu-image/

After activation you will see option in Appearance - Menus to add images for each item in your menu.
This plugin automatically creates three image sizes (24 x 24, 36 x 36, and 48 x 48 pixels).

To add your own image size (70x70 pixels) you can add this code in your theme’s functions.php file:

add_filter( 'menu_image_default_sizes', function($sizes){
// remove the default 36x36 size
  unset($sizes['menu-36x36']);
// add a new size
  $sizes['menu-70x70'] = array(70,70);
// return $sizes (required)
  return $sizes;
});

PHP:

Hope that will help you.

 

The easy way for wordpress, you can use plugin. just search in wordpress plugin youwant