How to display drop down menu with an arrow in the top using css?

Question

I have to display the drop down menu with an arrow in the top after hovering to the menu. I am able to display drop down menu with an arrow but it is displayed before.I have to display after hovering to the menu.Please check my output in the below snippet. Would you help me in this?

 $(function() { $(".menu").hover( function() { $(".sub").slideToggle(400); }, function() { $(".sub").hide(); } ); }); 

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

 <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> 

Answer 1

You have to make sure that the border-width is not set at the beginning. Only when the desired div is hovered, in your case .menu .

To achieve that just replace the CSS of your div .square:before with the following code

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

After that add this to your CSS

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

Centering Arrow

For centering the arrow use left: 50% and transform: translateX(-50%) instead right: 11px

 $(function() { $(".menu").hover( function() { $(".sub").slideToggle(400); }, function() { $(".sub").hide(); } ); }); 

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

 <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> 

Answer 2

Use this way 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: "";
 }

Answer 3

Just add below css

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

and everything is fine in your code.

 $(function() { $(".menu").hover( function() { $(".sub").slideToggle(400); }, function() { $(".sub").hide(); } ); }); 

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

 <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>