如何使用css显示顶部带箭头的下拉菜单？

时间：2016-12-23 08:10:34

标签： javascript jquery html css drop-down-menu

我必须在悬停到菜单后显示顶部带箭头的下拉菜单。我可以用箭头显示下拉菜单，但之前显示。我必须在鼠标悬停到菜单后显示。请在下面的代码片段中检查我的输出。你能帮帮我吗？

＆＃13;
＆＃13; 
a{
text-decoration: none;
}
.menu{
font-family: Arial;
color: #515151;
width: 200px;
position: relative;
height: 40px;
text-align:left;
width: 202px;
margin: 0 auto;
}
.menu li a{
color: #515151;
display: block;
padding: 6px 15px;
cursor: pointer;
font-size: 14px;
}
.menu li a:hover{
background: #f44141;
color: #fff;
}
.sub{
background: #fff;
position: absolute;
z-index: 2;
width: 200px;
padding: 10px 0 3px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none;
}
a.hover-link{
width: 190px;
background: #fff;
font-size: 14px;
color: #515151;
position: absolute;
z-index: 110;
display: block;
padding: 10px 0 1px 10px;
height: 28px;
cursor:pointer;
border-radius: 5px 5px 0 0;
font-weight: bold;
border: 1px solid #ddd;
}
.sub-options{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
}


.square:before {
    content:"";
    position: absolute;
    right: 11px;
    top: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #fae0bb transparent;
    z-index:9999;
}
.square:after {
    content:"";
    position: absolute;
    right: 4px;
    top: -22px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 17px 17px 17px;
    border-color: transparent transparent #ffffff transparent;
    z-index:9998;
}
.square {
   background: #fae0bb;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    /*float: left;*/
    position: absolute;
    margin: 0;
    top: 2.8em;
    width: 200px;
    z-index: 99999;
}
＆＃13; 
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>


<div class='menu'>
<a class='hover-link'>Hover on Menu</a>
<div class="square">
<div class='sub'>
<ul class='sub-options'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div>
</div>
＆＃13; 
sudo umount /mnt/hgfs
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

您必须确保border-width未在开头设置。只有当所需的div悬停时，才会出现.menu。

要实现这一点，只需使用以下代码替换div .square:before的CSS 

.square:before {
  content: "";
  position: absolute;
  right: 11px;
  top: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0;
  border-color: transparent transparent #fae0bb transparent;
  z-index: 9999;
}

之后将其添加到CSS 

.menu:hover .square:before{
  border-width: 0 10px 10px 10px;
}

居中箭头

对于箭头居中，请使用left: 50%和transform: translateX(-50%)代替right: 11px

＆＃13;
＆＃13; 
$(function() {
  $(".menu").hover(
    function() {
      $(".sub").slideToggle(400);
    },
    function() {
      $(".sub").hide();
    }
  );
});
＆＃13; 
a {
  text-decoration: none;
}

.menu {
  font-family: Arial;
  color: #515151;
  width: 200px;
  position: relative;
  height: 40px;
  text-align: left;
  width: 202px;
  margin: 0 auto;
}

.menu li a {
  color: #515151;
  display: block;
  padding: 6px 15px;
  cursor: pointer;
  font-size: 14px;
}

.menu li a:hover {
  background: #f44141;
  color: #fff;
}

.sub {
  background: #fff;
  position: absolute;
  z-index: 2;
  width: 200px;
  padding: 10px 0 3px;
  border-radius: 3px;
  box-shadow: 0 2px 4px #ddd;
  border: 1px solid #ddd;
  display: none;
}

a.hover-link {
  width: 190px;
  background: #fff;
  font-size: 14px;
  color: #515151;
  position: absolute;
  z-index: 110;
  display: block;
  padding: 10px 0 1px 10px;
  height: 28px;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  font-weight: bold;
  border: 1px solid #ddd;
}

.sub-options {
  list-style: none;
  margin: 0px;
  padding: 0px;
  font-size: 11px;
}

.square:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0;
  border-color: transparent transparent #fae0bb transparent;
  z-index: 9999;
}

.menu:hover .square:before{
  border-width: 0 10px 10px 10px;
}

.square:after {
  content: "";
  position: absolute;
  right: 4px;
  top: -22px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 17px 17px 17px;
  border-color: transparent transparent #ffffff transparent;
  z-index: 9998;
}

.square {
  background: #fae0bb;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  /*float: left;*/
  position: absolute;
  margin: 0;
  top: 2.8em;
  width: 200px;
  z-index: 99999;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='menu'>
  <a class='hover-link'>Hover on Menu</a>
  <div class="square">
    <div class='sub'>
      <ul class='sub-options'>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Services</a></li>
        <li><a href='#'>Contact</a></li>
      </ul>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

使用这种方式css：

.square:before {
    position: absolute;
    right: 11px;
    top: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #fae0bb transparent;
    z-index: 9999;
 }
 a.hover-link:hover + .square:before {
   content: "";
 }

答案 2 :(得分：1)

只需添加以下css

即可 
.square { display: none; }
.hover-link:hover + .square { display: block; }

你的代码中的一切都很好。

＆＃13;
＆＃13; 
$(function() {
$(".menu").hover(
function() { $(".sub").slideToggle(400); },
function() { $(".sub").hide(); }
);
});
＆＃13; 
a{
text-decoration: none;
}
.menu{
font-family: Arial;
color: #515151;
width: 200px;
position: relative;
height: 40px;
text-align:left;
width: 202px;
margin: 0 auto;
}
.menu li a{
color: #515151;
display: block;
padding: 6px 15px;
cursor: pointer;
font-size: 14px;
}
.menu li a:hover{
background: #f44141;
color: #fff;
}
.sub{
background: #fff;
position: absolute;
z-index: 2;
width: 200px;
padding: 10px 0 3px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none;
}
a.hover-link{
width: 190px;
background: #fff;
font-size: 14px;
color: #515151;
position: absolute;
z-index: 110;
display: block;
padding: 10px 0 1px 10px;
height: 28px;
cursor:pointer;
border-radius: 5px 5px 0 0;
font-weight: bold;
border: 1px solid #ddd;
}
.sub-options{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
}

.square { display: none; }
.hover-link:hover + .square { display: block; }

.square:before {
    content:"";
    position: absolute;
    right: 11px;
    top: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #fae0bb transparent;
    z-index:9999;
}
.square:after {
    content:"";
    position: absolute;
    right: 4px;
    top: -22px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 17px 17px 17px;
    border-color: transparent transparent #ffffff transparent;
    z-index:9998;
}
.square {
   background: #fae0bb;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    /*float: left;*/
    position: absolute;
    margin: 0;
    top: 2.8em;
    width: 200px;
    z-index: 99999;
}
＆＃13; 
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>


<div class='menu'>
<a class='hover-link'>Hover on Menu</a>
<div class="square">
<div class='sub'>
<ul class='sub-options'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题