I currently have a sub menu that consists of 4 headers. The code snippet provided below is used to style the first element in each column of the submenu.
My next task is to create a hover effect for these elements, where the background color changes to grey when hovered over. However, I am uncertain about where to place the :hover pseudo-class in the given code.
For example, I aim to change the background color from background-color:#3498db to grey upon hovering.
Thank you.
#ms-topmenu .row > div:nth-child(2) a:nth-child(1){
background-color:#3498db;
padding:5px;
color:white;
}
#ms-topmenu .row > div:nth-child(3) a:nth-child(1){
background-color:#2ecc71;
padding:5px;
color:white;
}
#ms-topmenu .row > div:nth-child(4) a:nth-child(1){
background-color:#9b59b6;
padding:5px;
color:white;
}
#ms-topmenu .row > div:nth-child(5) a:nth-child(1){
background-color:#e67e22;
padding:5px;
color:white;
}