我怎样才能让这个 .slideToggle 方法工作？答案

【问题标题】：How can I get this .slideToggle method to work?我怎样才能让这个 .slideToggle 方法工作？
【发布时间】：2017-06-30 01:35:50
【问题描述】：

当我使用 .slideToggle/.slideDown/.slideUp 时，没有任何操作发生，我不知道如何操作，因此当滚动 #web 时导航菜单会下降。我指的导航菜单是#webdsn-drop。

HTML：

<DOCTYPE! HTML>
<html>

<head>

    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src='script.js' type='text/javascript'></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>

  <div id="navbar">
      <div id="nav-container">
        <h1>PORTFOLIO</h1>
        <a href="#">Logo Design</a>
        <a href="#">Business Cards</a>
        <a href="posters+flyers.html">Posters & Flyers</a>
        <a id="web" href="#">Website Design</a>

      </div>
  </div>
        <div id='webdsn-drop'>
            <div id="webdsn-content">
                <h2 id="webname">WEBSITE DESIGN<h2>
            </div>
        </div>  


  <div id="banner-container">
    <h1>LOREM IPSUM<br>SAMPLE<h1> 
    <h2>Lorem Ipsum Sample Lorem Ipsum Sample</h2>
  </div>

 <div id="thmbnl-container">  

  <div class="ctgrs-container">
    <a href="#">
      <img src="https://image.freepik.com/free-vector/workspace-banners_23-2147509206.jpg">
      <h1>Web Design</h1>
    </a> 
  </div>


   <div class="ctgrs-container">
    <a href="posters+flyers.html">
      <img src="https://image.freepik.com/free-psd/blue-company-poster_23-2147493194.jpg">
      <h1>Posters & Flyers</h1>
    </a>  
  </div> 


   <div class="ctgrs-container">
     <a href="#">
      <img src="https://image.freepik.com/free-vector/blue-wave-business-card-design_1017-4370.jpg">
      <h1>Business Cards</h1>
     </a> 
  </div>

  <div class="ctgrs-container">
    <a href="#">
      <img src="https://image.freepik.com/free-vector/abstract-logo-template_23-2147490980.jpg">
      <h1>Logo Design</h1>
     </a> 
  </div>

  </div> 

  <h2 id="recent-title">Recent Projects</h2>
  <div id="recent">
    <div id="recent-container">
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>  
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>  
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
    </div>
  </div>

</body>

CSS：

body {
    margin: 0 auto;
    width: 950px;
    /* border: solid;
    border-color: black; */
    background-color: #f2f2f2;

}

/*--------------Navigation Bar------------*/

#navbar {
    width: 100%;
    background-color: white;
    overflow: auto;
    position: fixed;
    left: 0px;
    top: 0px;
    border-bottom: solid;
    border-width: 1px;
    border-color: #d8d8d8;
    overflow: hidden;
    z-index: 10;
}

#nav-container {
    max-width: 950px;
    min-width: 750px;
    margin: 0 auto;


}

#nav-container h1 {
    float: left;
    margin: 0 auto;
    padding-top: 10px;
    font-family: "calibri light";
    font-size: 25px;
    letter-spacing: 0.3em;
    margin-left: 5px;
    transition: color 0.3s ease;

}

#nav-container a {
    float: right;
    display: block;
    padding: 15px 15px;
    text-decoration: none;
    color: black;
    font-family: "calibri light", sans-serif;
    font-size: 18px;
    transition: background-color 0.5s ease;

}

#nav-container a:hover {
    background-color: #f4f4f4;
    transition: background-color 0.5s ease;
}

#nav-container a:active {
    background-color: #bfbfbf;
}

#nav-container h1:hover {
    color: #aaaaaa;
    transition: color 0.3s ease;
}

#webdsn-drop{
    padding: 75px 0 0 0;
    background-color: rgba(252, 252, 252, 0.95);
    border-bottom: solid 1px #d8d8d8;
    height: 200px;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 0px;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    z-index: 9;
    display: none;
}

#webdsn-content{
    width: 950px;
    margin: 0 auto;
}

#webname{
    color: black;
    border: solid;
    border-width: 1px;
    border-radius: 7.5px;
    padding: 5px 15px;
    display: inline;
    font-family: 'calibri light';
    letter-spacing: 2.5px;  
}

/*--------------Banner------------*/

#banner-container {
    margin-top: 75px ;
    margin-bottom: 25px;
    text-align: center;
    background-color: white;
    padding: 75px 0px;
    border: solid;
    border-color: #d8d8d8;
    border-width: 1.5px;

}

#banner-container h1 {
    font-family: "calibri light";
    font-size: 35px;
    letter-spacing: 0.2em;

}

#banner-container h2 {
    width: 950px;
    font-family: "calibri light";
    font-size: 18px;
    letter-spacing: 0.2em;
}

/*-----------Category Thumbnails---------*/

#thmbnl-container {
    width: 950px;   
    display: flex;
    justify-content: space-between;
}

.ctgrs-container {
    background-color: white;
    display: inline-block;
    padding: 13px 13px 0px 13px;
    border: solid;
    border-width: 1.5px;
    border-color: #d8d8d8;
    box-shadow: none;
    transition: box-shadow 0.25s ease;  
    margin-bottom: 25px;
}

.ctgrs-container img {
    height: 190px;
    width: 190px;
}


.ctgrs-container h1 {
    text-align: center;
    font-family: "calibri light";
    font-size: 24px;
    line-height: 25px;
}

.ctgrs-container a {
    text-decoration: none;
    color: black;
}


.ctgrs-container:hover {
    box-shadow: 0px 0px 30px 0px #727272;
    transition: box-shadow 0.25s ease;
}

/*----------Recent Projects----------*/

#recent-container {
    width: 950px;
    height: 275px;
    background-color: ;
    border: solid;
    border-width: 1.5px;
    border-color: #d8d8d8;
    margin-bottom: 25px;
    position: absolute;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;

}

.thmbnl-recent {
    padding: 20px 13px 0px 13px;
    width: 190px;
    display: inline-block;
    border: solid;
    border-width: 1.5px;
    border-color: #d8d8d8;
    background-color: white;
    transition: background-color 0.3s ease;
    cursor: pointer;

}

.thmbnl-recent h1 {
    text-align: center;
    font-family: "calibri light";
    font-size: 24px;
    margin: 0 auto;
    padding: 10px 0px;
    letter-spacing: 2px;
}

#recent-title {
    font-family: "calibri light";
    text-align: center;
    width: 950px;
    background-color: white;
    margin: 0 auto;
    padding: 10px 0px;
    position: relative;
    z-index: 2;
    border-top: solid;
    border-right: solid;
    border-left: solid;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    border-width: 1.5px;
    border-color: #d8d8d8;
}

.thmbnl-recent:hover {
    background-color: #e8e8e8;
    transition: background-color 0.3s ease;
}

.thmbnl-recent:active {
    background-color: #d1d1d1;
}


/*--------SLIDE IMAGE---------*/

#gallery-container {
    margin: 75px 0px 45px 0px;
    text-align: center;
    border: solid;
    border-color: #d8d8d8;
    border-width: 1.5px;
}

#slide-section {
    text-align: center;
    background-color: white;
    padding: 20px 20px 0px 20px;

}

#gallery-container h1{
    padding: 15px 0 15px 0;
    margin: 0;
    font-family: "calibri light";
    font-size: 30px;
    border-bottom: solid;
    background-color: white;
    border-color: #d8d8d8;
    border-width: 1.5px;
    box-shadow: 0 7px 15px -2px rgba(0, 0, 0, 0.3);
    z-index: 3;
    position: relative;
}

#imgrow {
    margin-top: 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;

}

jQuery:

$(document).ready(function(){
    $('#web').hover(function(){
        $('#webdsn-drop').slideToggle();
    });

});

【问题讨论】：

标签： jquery html css navigation

【解决方案1】：

这可能是我认为您正在寻找适当移动下拉菜单的内容。

离开JB Lovo's 答案。

$(document).ready(function(){
    $('#web').hover(function(){
        $('#webdsn-drop').slideDown(500);
    },
    function(){
      $('#webdsn-drop').hover(function(){}, function(){$(this).slideUp(500);});
    });
});

body {
    margin: 0 auto;
    width: 950px;
    /* border: solid;
    border-color: black; */
    background-color: #f2f2f2;

}

/*--------------Navigation Bar------------*/

#navbar {
    width: 100%;
    background-color: white;
    overflow: auto;
    position: fixed;
    left: 0px;
    top: 0px;
    border-bottom: solid;
    border-width: 1px;
    border-color: #d8d8d8;
    overflow: hidden;
    z-index: 10;
}

#nav-container {
    max-width: 950px;
    min-width: 750px;
    margin: 0 auto;


}

#nav-container h1 {
    float: left;
    margin: 0 auto;
    padding-top: 10px;
    font-family: "calibri light";
    font-size: 25px;
    letter-spacing: 0.3em;
    margin-left: 5px;
    transition: color 0.3s ease;

}

#nav-container a {
    float: right;
    display: block;
    padding: 15px 15px;
    text-decoration: none;
    color: black;
    font-family: "calibri light", sans-serif;
    font-size: 18px;
    transition: background-color 0.5s ease;

}

#nav-container a:hover {
    background-color: #f4f4f4;
    transition: background-color 0.5s ease;
}

#nav-container a:active {
    background-color: #bfbfbf;
}

#nav-container h1:hover {
    color: #aaaaaa;
    transition: color 0.3s ease;
}

#webdsn-drop{
    padding: 75px 0 0 0;
    background-color: rgba(252, 252, 252, 0.95);
    border-bottom: solid 1px #d8d8d8;
    height: 200px;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 0px;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    z-index: 9;
    display: none;
}

#webdsn-content{
    width: 950px;
    margin: 0 auto;
}

#webname{
    color: black;
    border: solid;
    border-width: 1px;
    border-radius: 7.5px;
    padding: 5px 15px;
    display: inline;
    font-family: 'calibri light';
    letter-spacing: 2.5px;  
}

/*--------------Banner------------*/

#banner-container {
    margin-top: 75px ;
    margin-bottom: 25px;
    text-align: center;
    background-color: white;
    padding: 75px 0px;
    border: solid;
    border-color: #d8d8d8;
    border-width: 1.5px;

}

#banner-container h1 {
    font-family: "calibri light";
    font-size: 35px;
    letter-spacing: 0.2em;

}

#banner-container h2 {
    width: 950px;
    font-family: "calibri light";
    font-size: 18px;
    letter-spacing: 0.2em;
}

/*-----------Category Thumbnails---------*/

#thmbnl-container {
    width: 950px;   
    display: flex;
    justify-content: space-between;
}

.ctgrs-container {
    background-color: white;
    display: inline-block;
    padding: 13px 13px 0px 13px;
    border: solid;
    border-width: 1.5px;
    border-color: #d8d8d8;
    box-shadow: none;
    transition: box-shadow 0.25s ease;  
    margin-bottom: 25px;
}

.ctgrs-container img {
    height: 190px;
    width: 190px;
}


.ctgrs-container h1 {
    text-align: center;
    font-family: "calibri light";
    font-size: 24px;
    line-height: 25px;
}

.ctgrs-container a {
    text-decoration: none;
    color: black;
}


.ctgrs-container:hover {
    box-shadow: 0px 0px 30px 0px #727272;
    transition: box-shadow 0.25s ease;
}

/*----------Recent Projects----------*/

#recent-container {
    width: 950px;
    height: 275px;
    background-color: ;
    border: solid;
    border-width: 1.5px;
    border-color: #d8d8d8;
    margin-bottom: 25px;
    position: absolute;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;

}

.thmbnl-recent {
    padding: 20px 13px 0px 13px;
    width: 190px;
    display: inline-block;
    border: solid;
    border-width: 1.5px;
    border-color: #d8d8d8;
    background-color: white;
    transition: background-color 0.3s ease;
    cursor: pointer;

}

.thmbnl-recent h1 {
    text-align: center;
    font-family: "calibri light";
    font-size: 24px;
    margin: 0 auto;
    padding: 10px 0px;
    letter-spacing: 2px;
}

#recent-title {
    font-family: "calibri light";
    text-align: center;
    width: 950px;
    background-color: white;
    margin: 0 auto;
    padding: 10px 0px;
    position: relative;
    z-index: 2;
    border-top: solid;
    border-right: solid;
    border-left: solid;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    border-width: 1.5px;
    border-color: #d8d8d8;
}

.thmbnl-recent:hover {
    background-color: #e8e8e8;
    transition: background-color 0.3s ease;
}

.thmbnl-recent:active {
    background-color: #d1d1d1;
}


/*--------SLIDE IMAGE---------*/

#gallery-container {
    margin: 75px 0px 45px 0px;
    text-align: center;
    border: solid;
    border-color: #d8d8d8;
    border-width: 1.5px;
}

#slide-section {
    text-align: center;
    background-color: white;
    padding: 20px 20px 0px 20px;

}

#gallery-container h1{
    padding: 15px 0 15px 0;
    margin: 0;
    font-family: "calibri light";
    font-size: 30px;
    border-bottom: solid;
    background-color: white;
    border-color: #d8d8d8;
    border-width: 1.5px;
    box-shadow: 0 7px 15px -2px rgba(0, 0, 0, 0.3);
    z-index: 3;
    position: relative;
}

#imgrow {
    margin-top: 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;

}

<DOCTYPE! HTML>
<html>

<head>

    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src='script.js' type='text/javascript'></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>

  <div id="navbar">
      <div id="nav-container">
        <h1>PORTFOLIO</h1>
        <a href="#">Logo Design</a>
        <a href="#">Business Cards</a>
        <a href="posters+flyers.html">Posters & Flyers</a>
        <a id="web" href="#">Website Design</a>

      </div>
  </div>
        <div id='webdsn-drop'>
            <div id="webdsn-content">
                <h2 id="webname">WEBSITE DESIGN</h2>
            </div>
        </div>  


  <div id="banner-container">
    <h1>LOREM IPSUM<br>SAMPLE<h1> 
    <h2>Lorem Ipsum Sample Lorem Ipsum Sample</h2>
  </div>

 <div id="thmbnl-container">  

  <div class="ctgrs-container">
    <a href="#">
      <img src="https://image.freepik.com/free-vector/workspace-banners_23-2147509206.jpg">
      <h1>Web Design</h1>
    </a> 
  </div>


   <div class="ctgrs-container">
    <a href="posters+flyers.html">
      <img src="https://image.freepik.com/free-psd/blue-company-poster_23-2147493194.jpg">
      <h1>Posters & Flyers</h1>
    </a>  
  </div> 


   <div class="ctgrs-container">
     <a href="#">
      <img src="https://image.freepik.com/free-vector/blue-wave-business-card-design_1017-4370.jpg">
      <h1>Business Cards</h1>
     </a> 
  </div>

  <div class="ctgrs-container">
    <a href="#">
      <img src="https://image.freepik.com/free-vector/abstract-logo-template_23-2147490980.jpg">
      <h1>Logo Design</h1>
     </a> 
  </div>

  </div> 

  <h2 id="recent-title">Recent Projects</h2>
  <div id="recent">
    <div id="recent-container">
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>  
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>  
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
    </div>
  </div>

</body>

【讨论】：

有没有办法让向下滑动消失，即使鼠标移出网页设计也是因为现在它确实会在你移出该区域时消失，但如果你将鼠标移开它仍然显示的网页设计按钮。这将是寻找解决方案几个小时的主要帮助！
@AbuN2286 有，但这很可能需要大量重构您的 HTML。通常导航栏使用列表（<ul> 和<li>）完成。将下拉菜单作为子元素可以为您提供所需的效果以及一些次要的 JS/CSS。

【解决方案2】：

你错过了关闭你的<h2 id="webname">WEBSITE DESIGN</h2>

如果您将鼠标悬停在网站设计上，则会出现下拉菜单。这就是你要找的吗？

$(document).ready(function(){
    $('#web').hover(function(){
        $('#webdsn-drop').slideToggle();
    });

});

body {
    margin: 0 auto;
    width: 950px;
    /* border: solid;
    border-color: black; */
    background-color: #f2f2f2;

}

/*--------------Navigation Bar------------*/

#navbar {
    width: 100%;
    background-color: white;
    overflow: auto;
    position: fixed;
    left: 0px;
    top: 0px;
    border-bottom: solid;
    border-width: 1px;
    border-color: #d8d8d8;
    overflow: hidden;
    z-index: 10;
}

#nav-container {
    max-width: 950px;
    min-width: 750px;
    margin: 0 auto;


}

#nav-container h1 {
    float: left;
    margin: 0 auto;
    padding-top: 10px;
    font-family: "calibri light";
    font-size: 25px;
    letter-spacing: 0.3em;
    margin-left: 5px;
    transition: color 0.3s ease;

}

#nav-container a {
    float: right;
    display: block;
    padding: 15px 15px;
    text-decoration: none;
    color: black;
    font-family: "calibri light", sans-serif;
    font-size: 18px;
    transition: background-color 0.5s ease;

}

#nav-container a:hover {
    background-color: #f4f4f4;
    transition: background-color 0.5s ease;
}

#nav-container a:active {
    background-color: #bfbfbf;
}

#nav-container h1:hover {
    color: #aaaaaa;
    transition: color 0.3s ease;
}

#webdsn-drop{
    padding: 75px 0 0 0;
    background-color: rgba(252, 252, 252, 0.95);
    border-bottom: solid 1px #d8d8d8;
    height: 200px;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 0px;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    z-index: 9;
    display: none;
}

#webdsn-content{
    width: 950px;
    margin: 0 auto;
}

#webname{
    color: black;
    border: solid;
    border-width: 1px;
    border-radius: 7.5px;
    padding: 5px 15px;
    display: inline;
    font-family: 'calibri light';
    letter-spacing: 2.5px;  
}

/*--------------Banner------------*/

#banner-container {
    margin-top: 75px ;
    margin-bottom: 25px;
    text-align: center;
    background-color: white;
    padding: 75px 0px;
    border: solid;
    border-color: #d8d8d8;
    border-width: 1.5px;

}

#banner-container h1 {
    font-family: "calibri light";
    font-size: 35px;
    letter-spacing: 0.2em;

}

#banner-container h2 {
    width: 950px;
    font-family: "calibri light";
    font-size: 18px;
    letter-spacing: 0.2em;
}

/*-----------Category Thumbnails---------*/

#thmbnl-container {
    width: 950px;   
    display: flex;
    justify-content: space-between;
}

.ctgrs-container {
    background-color: white;
    display: inline-block;
    padding: 13px 13px 0px 13px;
    border: solid;
    border-width: 1.5px;
    border-color: #d8d8d8;
    box-shadow: none;
    transition: box-shadow 0.25s ease;  
    margin-bottom: 25px;
}

.ctgrs-container img {
    height: 190px;
    width: 190px;
}


.ctgrs-container h1 {
    text-align: center;
    font-family: "calibri light";
    font-size: 24px;
    line-height: 25px;
}

.ctgrs-container a {
    text-decoration: none;
    color: black;
}


.ctgrs-container:hover {
    box-shadow: 0px 0px 30px 0px #727272;
    transition: box-shadow 0.25s ease;
}

/*----------Recent Projects----------*/

#recent-container {
    width: 950px;
    height: 275px;
    background-color: ;
    border: solid;
    border-width: 1.5px;
    border-color: #d8d8d8;
    margin-bottom: 25px;
    position: absolute;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;

}

.thmbnl-recent {
    padding: 20px 13px 0px 13px;
    width: 190px;
    display: inline-block;
    border: solid;
    border-width: 1.5px;
    border-color: #d8d8d8;
    background-color: white;
    transition: background-color 0.3s ease;
    cursor: pointer;

}

.thmbnl-recent h1 {
    text-align: center;
    font-family: "calibri light";
    font-size: 24px;
    margin: 0 auto;
    padding: 10px 0px;
    letter-spacing: 2px;
}

#recent-title {
    font-family: "calibri light";
    text-align: center;
    width: 950px;
    background-color: white;
    margin: 0 auto;
    padding: 10px 0px;
    position: relative;
    z-index: 2;
    border-top: solid;
    border-right: solid;
    border-left: solid;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    border-width: 1.5px;
    border-color: #d8d8d8;
}

.thmbnl-recent:hover {
    background-color: #e8e8e8;
    transition: background-color 0.3s ease;
}

.thmbnl-recent:active {
    background-color: #d1d1d1;
}


/*--------SLIDE IMAGE---------*/

#gallery-container {
    margin: 75px 0px 45px 0px;
    text-align: center;
    border: solid;
    border-color: #d8d8d8;
    border-width: 1.5px;
}

#slide-section {
    text-align: center;
    background-color: white;
    padding: 20px 20px 0px 20px;

}

#gallery-container h1{
    padding: 15px 0 15px 0;
    margin: 0;
    font-family: "calibri light";
    font-size: 30px;
    border-bottom: solid;
    background-color: white;
    border-color: #d8d8d8;
    border-width: 1.5px;
    box-shadow: 0 7px 15px -2px rgba(0, 0, 0, 0.3);
    z-index: 3;
    position: relative;
}

#imgrow {
    margin-top: 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;

}

<DOCTYPE! HTML>
<html>

<head>

    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src='script.js' type='text/javascript'></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>

  <div id="navbar">
      <div id="nav-container">
        <h1>PORTFOLIO</h1>
        <a href="#">Logo Design</a>
        <a href="#">Business Cards</a>
        <a href="posters+flyers.html">Posters & Flyers</a>
        <a id="web" href="#">Website Design</a>

      </div>
  </div>
        <div id='webdsn-drop'>
            <div id="webdsn-content">
                <h2 id="webname">WEBSITE DESIGN</h2>
            </div>
        </div>  


  <div id="banner-container">
    <h1>LOREM IPSUM<br>SAMPLE<h1> 
    <h2>Lorem Ipsum Sample Lorem Ipsum Sample</h2>
  </div>

 <div id="thmbnl-container">  

  <div class="ctgrs-container">
    <a href="#">
      <img src="https://image.freepik.com/free-vector/workspace-banners_23-2147509206.jpg">
      <h1>Web Design</h1>
    </a> 
  </div>


   <div class="ctgrs-container">
    <a href="posters+flyers.html">
      <img src="https://image.freepik.com/free-psd/blue-company-poster_23-2147493194.jpg">
      <h1>Posters & Flyers</h1>
    </a>  
  </div> 


   <div class="ctgrs-container">
     <a href="#">
      <img src="https://image.freepik.com/free-vector/blue-wave-business-card-design_1017-4370.jpg">
      <h1>Business Cards</h1>
     </a> 
  </div>

  <div class="ctgrs-container">
    <a href="#">
      <img src="https://image.freepik.com/free-vector/abstract-logo-template_23-2147490980.jpg">
      <h1>Logo Design</h1>
     </a> 
  </div>

  </div> 

  <h2 id="recent-title">Recent Projects</h2>
  <div id="recent">
    <div id="recent-container">
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>  
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>  
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
    </div>
  </div>

</body>

【讨论】：

是的，我试图让下拉菜单在悬停在网站设计又名#web 上时出现
是的，谢谢你的工作，但是还有一件事即使在其他版本上我也永远无法工作。当我尝试探索向下滑动的 div 时，它消失了，因为我是 jquery/js 的新手，所以我无法使用 if else 语句
另外，我是否错误地链接了我的 javascript，因为它仍然无法正常工作，但可以在您的 sn-p 中使用
是的，你可以复制我的 sn-p 的代码。如果你认为我的回答解决了你的问题，你应该用绿色勾号标记它。然后，对于您所说的另一个问题，您应该定义您希望菜单如何工作。您希望它在您将鼠标悬停在网站设计上时出现，然后您必须考虑何时希望它消失。