Add random value from array to a css property

Your selector is wrong, in addition to a few other things:

1. You are looking for #menu which I can't see in the HTML.
2. You need to use querySelectorAll, to get multiple elements.
3. Your selector also looks for :hover, but hover is a state of something and not something you can select upon as a query to the DOM.

Try this code:

var colors = ['red','green', 'blue']; 
var random_color = colors[Math.floor(Math.random() * colors.length)];
var items = document.querySelectorAll('h1 a');

items.forEach(item => {
    item.style.cssText = 'text-shadow: ' + random_color + ' 10px 10px 0px';
});

I changed a few things to make it clearer, but hopefully you can adapt it to your needs.

You can play with it here: https://jsfiddle.net/fy0893mm/

Additionally, if you wanted each item to be its own random colour, simply move the random variable into the loop of items.

var colors = ['red','green', 'blue']; 
var items = document.querySelectorAll('h1 a');

items.forEach(item => {
    var random_color = colors[Math.floor(Math.random() * colors.length)];
    item.style.cssText = 'text-shadow: ' + random_color + ' 10px 10px 0px';
});

Also, because you were trying to select :hover, it made me wonder if you wanted this to occur on hover of the element, if so, try this code which will attach the appropriate event listeners to each item.

var colors = ['red','green', 'blue', 'yellow', 'pink', 'orange']; 
var random_color = colors[Math.floor(Math.random() * colors.length)];
var items = document.querySelectorAll('h1 a');

items.forEach(item => {
  item.addEventListener('mouseover', function() {
    item.style.cssText = 'text-shadow: ' + random_color + ' 10px 10px 0px';
  });
  item.addEventListener('mouseout', function() {
    item.style.cssText = 'text-shadow: none';
  });
});