Call Javascript from Css

No, you cannot call javascript from your css. However, you could add an event listener for each element to set background color to a random value.

Js fiddle example: http://jsbin.com/lodomaregi/edit?html,css,js,output

Given that you have an element to work with you can simply add an event listener by using the .addEventListener function like so:

// Event handler for mouseover to assign random background color.
myElement.addEventListener('mouseover', function(e) {

  // Sets the current target's (element) background color to green.
  e.target.style.backgroundColor = 'green';
})

Suggested solution to your problem.

// Fetch all elements with the 'menu1' class name.
var elements = document.getElementsByClassName('menu1');

// Loop through the elements and add event listeners for each element
for(var i = 0; i < elements.length; i++) {

  // Event handler for mouseover to assign random background color.
  elements[i].addEventListener('mouseover', function(e) {

    // Assign backgroundColor with random color
    e.target.style.backgroundColor = getRandomColor();
  })

  // Event handler for mouseout to reset the background color.
  elements[i].addEventListener('mouseout', function(e) {

    // Reset background color by assigning it an empty string.
    e.target.style.backgroundColor = '';
  })
}

// Function for getting a random color
function getRandomColor() {
  // List of colors which can be returned by the function.
  var colors = [
    'lightgreen',
    'pink',
    'yellow',
    'blue',
    'purple',
    '#ff0000',
    '#c9c9c9'
  ];

  // Fetch random int value.
  var index = getRandomInt(0, colors.length - 1);

  // Return the color from the colors array using the generated index value.
  return colors[index];
}

// Function for generating a random int value. Taken from: 
// http://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Hey dude you need to add a script to your html to do that

function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++ ) {
    color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

$(".listClassName").hover(function(){
        $(this).css("background-color", getRandomColor());
}

Or to choose from a specific list of colors you can use something like this.

function getRandomColor() {
colors = ['red','green']
return colors[Math.floor(Math.random()*colors.length)];
}

Looking back at this i forgot to change the colour back when you stop hovering over this to do that you would need to do something like

$(".listClassName").mouseout(function(){
    $(this).removeAttr("style");
)};

Calling JS functions from CSS is not possible at the moment.
But you can do this with elmnt.addEventListener.

For example:

for(el of $('menu-random-piece')){
    // ()=>{} is just a ES6 arrow function.
    el.addEventListener('mouseover', () => { el.style.backgroundColor = "#" + ("000000" + Math.floor(Math.random()*16777216).toString(16).toUpperCase()).slice('-6') });
    el.addEventListener('mouseout', () => {  el.style.backgroundColor = "" }); 
}