jquery - :before gets hidden when setting overflow to scroll/hidden 里面的内容

Question

以下是我的简单导航代码。单击右上角的图标时会出现两个 div。我还在顶部使用 :before 实现了这些分区的三 Angular 形提示。 对于第一个 div，我设置了 overflow:scroll 所以，三 Angular 形的尖端是不可见的。在第二种情况下，它是可见的，因为我没有设置溢出属性。 是否有任何变通方法来显示三 Angular 形提示，同时设置溢出属性？

$( document ).ready(function() {
   
   $('html').click(function() {
    $(".grid1").hide();
  	$(".grid2").hide();

});
$( ".icons-container i" ).click(function() {
  
  event.stopPropagation();
  if(this.id=="grid1icon")
  {
  	
  	$(".grid1").show();
  	$(".grid2").hide();

  }
  else if(this.id=="grid2icon")
  {
  	
  	$(".grid2").show();
  	$(".grid1").hide();
  }
});
});

@charset "utf-8";

body {


 }

 .nav-container
 {
  height: 50px;
 }

 .logo
 {
  width: 20%;
  float: left;
  background: #ccc;
  height: 100%;
 }
 .searchboxcontianer
 {
  width: 50%;
  float: left;
  height: 100%;
  background: #555;
  
 }
.searchbox
{
  margin-left: 15%;
  margin-top: 1.3%;
  position: relative;
}
 .searchinput
 {
  width: 400px;
  height: 30px;
  margin: 0px;
  padding: 2px;
  border: none;
  outline: none;
  border-radius: 3px 0px 0px 3px;
 }

 .searchbutton 
 {
  width: 80px;
  height: 34px;
  margin: 0px;
  border: 0px;
  outline: none;
  margin-left: -4px;
  top:0px;
  position: absolute;
  border-radius: 0px 3px 3px 0px;
  
 }
 .nav-icons
 {
  width: 29%;
  float: left;
  height: 100%;
  background: #444;
 }

 .icons-container
 {
  width: 50%;
  float: right;
  padding: 5px 0px;
 }

  .icons-container i 
  {
    margin: 10px;
    color: #fff;
    position: relative;
  }

  .grid1
  {
   position: absolute;
   top:60px;
   right: 40px;
   background: #eee;
   height: 300px;
   width: 250px;  
   border-radius: 5px;
   border: solid 2px #555;
   display: none;
   overflow-y: scroll;
  }

  .grid1 ul
  {
    list-style-type: none;
  }
  .grid1 ul li 
  {
    display: inline-block;
    width: 80px;
    height: 100px;
    border: 1px solid #444;
    margin: 2px;
  }

  .grid1:before
  {
    border: solid;
    border-color: #000 transparent;
    border-width: 0px 6px 6px 6px;
    position: absolute;
    top: -7px;
    right: 150px;
    z-index: 99;
    content: ""
  }
  .grid2 
  {
position: absolute;
   top:60px;
   right: 10px;
   background: #eee;
   height: 300px;
   width: 250px;  
   border-radius: 5px;
   border: solid 2px #555;display: none;
  }

  .grid2:before 
  {
    border: solid;
    border-color: #000 transparent;
    border-width: 0px 6px 6px 6px;
    position: absolute;
    top: -7px;
    right: 150px;
    z-index: 99;
    content: ""

  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav-container">

	<div class="logo">
		Logo goes in here
	</div>
	<div class="searchboxcontianer">
		<div class="searchbox">
			<input type="text" class="searchinput" name="search" id="search">
			<button class="searchbutton"><i class="fa fa-search"></i></button>
		</div>

	</div>
	<div class="nav-icons">
		<div class="icons-container">
		<i id="grid1icon" class="fa fa-th"></i>
		<div class="grid1">
			some content goes in here
			<ul>
				<li>item</li>
				<li>item</li>
				<li>item</li>
				<li>item</li>
				<li>item</li>
				<li>item</li>
				<li>item</li>
				<li>item</li>
				<li>item</li>
				<li>item</li>
				<li>item</li>
			</ul>
		</div>
		<i id="grid2icon" class="fa fa-bell"></i>
		<div class="grid2">
      some othe content goes in here
		</div>
	</div>
	</div>
</div>

请在完整页面 View 中检查代码段。

Answer 1

只需将另一个容器放入您的菜单容器中，然后对其应用溢出。在具有固定宽度/高度的外部容器上应用 :before 三 Angular 形。