WPLaura on "Change style of whole UL when hover over LI BUT make change specific to each LI"

Hello

I am writing a website in Wordpress where I have created a child theme for the twentythirteen theme.

I am now trying to style the header navigation menu.

I would like to make it so that the text of each item in the menu changes to a different colour when you hover over it i.e. the text is all grey in it's normal state, but when you hover over menu item 1, the text of that link turns orange, when you hover over menu item 2, the text of that link turns green etc

I have achieved this fine, using css statements that target each individual item in the menu:

li.menu-item-29:hover > a, .menu-item-29 a:focus {
	color: #00AEA1;
}

However, I also have a style attached to the ul as a whole:

ul.nav-menu, div.nav-menu > ul {
	border-bottom: 3px solid #D86637;
}

This shows as a line underneath the whole menu. And I would like to make it so that when you hover over menu item 1, not only does the text of that item change to orange, but so does this underline affecting the whole ul, and when you hover over menu item 2 not only does the text of that item change to green, but so does the underline affecting the whole ul etc

So, in summary, I am asking if it is possible, when hovering over each individual li in an ul, to change the border-bottom property of the whole ul, BUT make the change specific to which li has been hovered over.

Many thanks.