问CSS/JQuery:当鼠标悬停在另一个列表项上时，菜单列表标题下拉

EN

    //dropdown hover code
    $(document).ready(function()
    {
    
    	//hover menu bar list
    	$('li').hover(function()
    	{
    		//find children of list items
    		//add stop function to stop hover queue
    		$(this).find('ul>li').stop().fadeToggle(300);
    	});
    	//end dropdown hover
    
    	//menu background color hover
    	$('a').css('background-color', 'white').hover(function()
    	{
    		$(this).css('background-color', 'pink');
    	},
    	function()
    	{
    		$(this).css('background-color', 'white');
    	});
    	//end background color hover
    
    });
    //end ready function

    @media (max-width: 480px) {
    	#dropdown_menu li {
    		display: block !important;
    		border: 1px solid black !important;
    		border-right: none !important;
    		border-left: none !important;
    
    	}
    
    	#title_img_container {
    		margin-bottom: 10%;
    	}
    
    	#title_container {
    		margin-top: 0 !important;
    		margin-bottom: 10%;
    		position: relative !important;
    	}
    
    	#dropdown_menu li {
    		border-bottom: none !important;
    
    	}
    }
    
    /*Change size of title div at 650px*/
    @media (max-width: 650px) {
    	#title_container {
    		font-size: 3em !important;
    	}
    }
    
    /*Change size of title img at 807px*/
    @media (min-width: 807px) {
    	#title_img_container {
    		margin-top: 3%;
    	}
    
    	#title_img {
    		max-width: 650px;
    		height: auto;
    	}
    }
    
    /*Change size of title img at 1300px*/
    @media (min-width: 1300px) {
    	#title_img {
    		max-width: 600px;
    		max-height: 700px;
    	}
    }
    
    body {
    	/*background-color: #dee1e5;*/
    	background-image: url("./../img/title_chevron.jpg");
    	letter-spacing: 1px;
    }
    
    #title_img_container {
    	max-width: 100%;
    	height: auto;
    }
    
    #title_img {
    	border: solid 1px black; 
    	width: 100%;
    	height: auto;
    	box-shadow: 2px 2px 2px 5px #888888;
    }
    
    #title_container {
    	border: solid 2px black;
    	width: 100%;
    	font-family: 'Lobster', cursive;
    	font-size: 5em;
    	color: gold;
    	text-align: center;
    	background-color: white;	
    }
    
    #menu_container {
    	font-size: 30px;
    }
    
    #img_and_content {
    	margin: 5%;
    }
    
    #dropdown_menu,
    #dropdown_menu ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    #dropdown_menu li{
    	display: inline-block;
    }
    
    #dropdown_menu a {
    	padding: 10px 20px;
    	display: block;
    	color: inherit;
    	text-decoration: none;
    }
    
    #dropdown_menu ul li {
    	display: none;
    	background-color: #afdbcd !important;
    	vertical-align: top;
    }
    
    li a {
    	color: gold;
    }
    
    #main_page_container {
    	padding: 2% 5% 2% 5%;
    	border: black 1px solid;
    	font-family: 'Helvetica', Arial;
    	background-color: white;
    }
    
    #content_title {
    	font-family: 'Lobster', cursive;
    }
    
    #footer_container {
    	color: black;
    	text-align: center;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--FONTS-->
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">

<!--TITLE DIV-->
<div id="title_container">YOUR NAME
  <!--MENU DIV-->
  <div id="menu_container">
    <!--DROPDOWN MENU-->
    <ul id="dropdown_menu">
      <li><a href="#">Home</a></li> 
      <li><a href="final_about.html">About</a></li> 
      <!--HOVER MENU OPTIONS-->
      <li class="blogs"><a href="#">Blogs</a>
        <ul>
          <li><a href="final_motherhood.html">Motherhood</a></li>
          <li><a href="final_fitness.html">Fitness</a></li>
          <li><a href="final_marriage.html">Marriage and Family</a></li>
        </ul>
      </li>
      <!--END HOVER MENU OPTIONS-->
      <li><a href="final_contact.html">Contact</a></li>   
    </ul>
    <!--END DROPDOWN MENU-->
  </div>
  <!--END MENU DIV-->
</div>
<!--END TITLE DIV-->

<!--IMG AND CONTENT CONTAINER-->
<div id="img_and_content" class="container-fluid">
  <!--ROW DIV-->
  <div class="row">
    <!--TITLE IMG DIV-->
    <div id="title_img_container" class="col-md-6">
      <img id="title_img" src="./img/title_img.jpg">
    </div>
    <!--END TITLE IMG DIV-->

    <!--MAIN PAGE DIV-->
    <div id="main_page_container" class="col-md-6">
      <h1 id="content_title">Insert Title Here . . .</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget viverra ipsum. 
    </div>
    <!--END MAIN PAGE DIV-->
  </div>
  <!--END ROW DIV-->
</div>
<!--END IMG AND CONTENT CONTAINER-->


<!--FOOTER DIV-->
<div id="footer_container">
  &copy; 2018 Erika Marie McBride | Site by Kelly Catbagan
</div>
<!--FOOTER DIV-->