Question

每当我将鼠标悬停在“博客”选项上时，都应该看到3个项目的列表。悬停本身可以正常运行：列表子级出现在列表项下方。但是，菜单项所在的div会向下扩展，并且菜单项的标题会降到div的最底部，而悬停的列表项则保持在原始位置。有人有什么想法吗？谢谢！

代码：

extension String {

func lineSpaced(_ spacing: CGFloat) -> NSAttributedString {
    let paragraphStyle = NSMutableParagraphStyle()
    paragraphStyle.lineSpacing = spacing
    let attributedString = NSAttributedString(string: self, attributes: [NSAttributedStringKey.paragraphStyle: paragraphStyle])
    return attributedString
}
}

    //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;
    }

Answer 1

您可以将以下内容添加到CSS中，以处理Blogs的子菜单，这是在非移动版本时的真正简单修补。我敢肯定还有其他方法可以解决这个问题。在移动视图中，默认情况下显示子菜单。可能要看一下点击事件以切换在移动设备中显示/隐藏它？

@media (min-width: 480px) {
  li.blogs ul {
    position: absolute;
    float: left;
    z-index: 1000;
  }
}

此外，仅供参考，您在HTML中多次包含了jQuery库源代码，这不是必需的。对于此示例代码段，我还删除了对本地JS和IMG文件的引用。

//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;
}

@media (min-width: 480px) {
  li.blogs ul {
    position: absolute;
    float: left;
    z-index: 1000;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <!--RESPONSIVE SETUP-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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>YOUR NAME</title>
</head>

<body>
  <!--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">
      </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-->


</body>

</html>

CSS / JQuery：将鼠标悬停在另一个列表项上时，菜单列表标题会下拉

1 个答案: