Underline text using Jquery

Question

I would like to make it so that when a div with the class "dropdown" is hovered over, a certain piece of text with the id "workButton" would underline. I would like to do this using jQuery, unless it is possible to make it happen in CSS. I currently have it so that when the text is hovered over it underlines and turns white, but I would like the same to happen when "dropdown" is hovered over. (the text with the id "workbutton" also has the class "menuContent")

CSS:

.menuContent:hover {
    text-decoration: underline;
    cursor: pointer;
    color: #ffffff;
}
.menuContent {
    font-family: "cicle-gordita";
    text-align: center;
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
    color: #b4b0b0;
    text-decoration: none;
    font-size: 40px;
}
.dropdown {
    margin-top: 50px;
    height: 50px;
    width: 100%;
    background: #ffffff;
    position: fixed;
    display: none;
}
.dropdown-menuBit {
    height: 40px;
    margin: 0px;
    padding: 0px;
    float: left;
    margin-left: 20px;
}
.dropdown-menuContent {
    font-family: "cicle-gordita";
    text-align: center;
    padding: 0px;
    margin: 0px;
    color: #b4b0b0;
    text-decoration: none;
    font-size: 30px;
    padding-top: 5px;
}
.dropdown-menuContent:hover {
    text-decoration: underline;
    cursor: pointer;
    color: #ffffff;
}

JQuery:

var main = function() {
  $('.dropdown').hide(function() {
    $('.main').animate({
      top: "-50px"
    }, 0);
  });

  $('#workButton').hover(function() {
    $('.dropdown').fadeIn(1)

    $('.main').animate({
      top: "0px"
    }, 100)
  });

  $('.main, #blogButton, #homeButton, .logo').hover(function() {
    $('.dropdown').fadeOut(200)

    $('.main').animate({
      top: "-50px"
    }, 200)
  });

Answer 1

只需将:hover放在父级上，它就可以正常工作：

.dropdown:hover #workButton