CSS: Placing an Arrow/Triangle with Border on The Top of My Drop Down Menu

CSS: Placing an arrow / triangle with border on the top of my drop down menu

You can do this using :beforeand :afterpseudo elements, to create two triangles :

.main-navigation ul ul: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;
}
.main-navigation ul ul: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;
}

You just have to set the correct right value for both to make them fit to what you need.

Live exemple

dropdown menu with top triangle

For centering the arrow, you can add this:

ul ul:after {
    margin-left: -20px;
}

To fix the dropdown doesn't stay, give enough bottom padding like this:

nav > ul > li > a {
    padding-bottom: 50px;
}

Demo: centering dropdown and arrow:

http://jsfiddle.net/esjrhg5n/

$(document).ready(function() {
    $("nav > ul > li").mouseover(function() {
        var the_width = $(this).find("a").width();
        var child_width = $(this).find("ul").width();
        var width = parseInt((child_width - the_width)/2);
        $(this).find("ul").css('left', -width);
    });
});

Update: Non-JS version below:

https://jsfiddle.net/2Ly1h6uz/

nav {  background-color: black;  font-family: sans-serif;  text-align: center;}
nav ul,nav li {  list-style: none;  padding: 0;  margin: 0;}
nav a {  text-decoration: none;  color: white;}
nav a:hover {  color: yellow;}
nav>ul {  display: flex;  justify-content: center;}
nav>ul>li {  position: relative;}
nav>ul>li>a {  display: block;  padding: 10px 20px;}
nav>ul>li>ul {  display: none;  white-space: nowrap;  position: absolute;  left: 50%;  transform: translateX(-50%);  padding-top: 15px;}
nav>ul>li>ul>li>a {  display: block;  padding: 10px 20px;  background-color: black;  border-bottom: 1px solid darkgray;}
nav>ul>li>ul:after {  position: absolute;  left: 50%;  transform: translateX(-50%);  top: 5px;  width: 0;  height: 0;  content: '';  border-left: 10px solid transparent;  border-right: 10px solid transparent;  border-bottom: 10px solid black;}
nav>ul>li:hover>ul {  display: block;}

<nav>  <ul>    <li>      <a href="#">Dropdown1</a>      <ul>        <li><a href="#">Option1</a></li>        <li><a href="#">Option2 A Long One</a></li>        <li><a href="#">Option3</a></li>      </ul>    </li>    <li>      <a href="#">Dropdown2</a>      <ul>        <li><a href="#">Option1</a></li>        <li><a href="#">Option2</a></li>        <li><a href="#">Option3</a></li>      </ul>    </li>    <li>      <a href="#">Dropdown3</a>      <ul>        <li><a href="#">Option1</a></li>        <li><a href="#">Option2</a></li>        <li><a href="#">Option3</a></li>      </ul>    </li>  </ul></nav>

CSS - change dropdown arrow to unicode triangle

maybe so?

*,*:before,*:after {  box-sizing: border-box;}
* {  padding: 0;  margin: 0;}
form {  padding: 1rem;  max-width: 400px;  margin: 1em auto;}
.select {  height: 40px;  width: 100%;  overflow: hidden;  position: relative;  border-radius: 3px;  margin-bottom: 1em;}
.select:after {  content: "▼";  padding: 12px 8px;  position: absolute;  right: 10px;  top: 0;  z-index: 1;  text-align: center;  width: 10%;  height: 100%;  pointer-events: none;}
.select__field {  height: 40px;  width: 100%;  padding: 5px 15px;  color: #616263;  background-color: #ececec;  border: 1px solid #e3e3e3;  outline: none;  font-size: 16px;  -webkit-appearance: none;  /* for webkit browsers */  -moz-appearance: none;  /* for firefox */  appearance: none;  /* for modern browsers */}

/* remove default caret for ie */
.select__field::-ms-expand {  display: none;}
.select__field:focus:invalid {  border-color: #FD6347;}
.select__field:required:valid {  border-color: #006400;}
.btn-submit {  color: #fff;  display: block;  padding: 15px;  text-transform: uppercase;  background: #535C69;  width: 100%;  border: none;  border-radius: 3px;}

<form action="#" method="post">  <div class="select">    <select name="nameValueSelect" class="select__field" required>      <option value="" selected>Choose option ...</option>      <option>Option 1</option>      <option>Option 2</option>      <option>Option 3</option>      <option>Option 4</option>      <option>Option 5</option>      <option>Option 6</option>    </select>  </div>
  <button type="submit" class="btn-submit">Submit</button></form>

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

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>

How to change the position of a drop down arrow in CSS

It's not ideal to do it this way regardless. The <select> element particularly is hard to style. I would recommend changing the appearance instead via appearance: none;

This post is a good place to start.

Adding a dropdown arrow or triangle beside first button

Atlast did it by myself , with HTML unicodes solution

https://codepen.io/shaswat/pen/XzpRXL

usin css only to make it transition between uparrow and downarrow

HTML

<div id='cssmenu'>
<ul>
   <li ><input type=submit value='Home'/>
     <div class="downArrow"> ▼ </div>
     <div class="upArrow"> ▲ </div>     
     <ul>
         <li><input type=submit value=home1 /></li>
         <li><input type=submit value=home2 /></li>
         <li><input type=submit value=home3 /></li>
      </ul>

   </li>
   <li><input type=submit value=products class=active />

   </li>
   <li><input type=submit value=about />
   </li>
   <li><input type=submit value=Contact /></li>
</ul>
</div>

CSS

#cssmenu > ul ul input{
  border-top: 1px solid;  
}
#cssmenu input {
  padding: 0;
  border-right: 1px solid;
  border-top: none;
  border-bottom: none;
  border-left: none;
  background: none;
    border-radius : 0px 5px 0px 0px;
}
/* Menu CSS */#cssmenu,
#cssmenu > ul {
  background: black;  
  padding-bottom: 3px; 
  border-radius: 5px 5px 5px 5px;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
  content: "";
  display: table;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  clear: both;
}
#cssmenu {
  width: auto;
  zoom: 1;
}
#cssmenu > ul {
  background: blue;
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu > ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#cssmenu > ul > li {
  float: left;
  position: relative;
}
#cssmenu > ul > li > input {
  padding: 12px 30px;
  display: block;
  color: white;
  font-size: 13px;
  text-decoration: none;  
  text-shadow: 0 -1px 0 #0d0d0d;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);

}
#cssmenu > ul > li:hover > input {
  background:violet;
  -webkit-transition: all 0.40s ease-in-out;
  -moz-transition: all 0.40s ease-in-out;
  -ms-transition: all 0.40s ease-in-out;
  transition: all 0.40s ease-in-out;
}

#cssmenu > ul > li.active > input,
#cssmenu > ul > li > input.active {
  background: black;
  color:#fff;
}
/* Childs */
#cssmenu > ul ul {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 40px;
  background: green;
  margin: 0;
  padding: 0;
  z-index: -1;
  box-shadow: 5px 5px 5px #808080;
}
#cssmenu > ul li:hover ul {
  opacity: 1;
  visibility: visible;
  margin: 0;
  color: #fff;
  z-index: 2;
  top: 40px;
  left: 0;
}

#cssmenu > ul ul li {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
#cssmenu > ul ul li input {
  padding: 12px ;
  display: block;
  color: white;
  font-size: 14px;
  text-decoration: none;
  width: 150px;
  border-left: 4px solid transparent;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  transition: all 0.30s ease-in-out;
}
#cssmenu > ul ul li input[type=submit]:hover {
  border-left: 10px solid #d64e34;
  background: grey;
}
#cssmenu > ul ul li input[type=submit]:active {
  background: green;
}

.downArrow { 
    display: block;  
    position: absolute;
    top: 12px;
    right: 2px;  
    color:white;
}

.upArrow { 
  display: none;
    position: absolute;
    top: 12px;
    right: 2px;  
  color:white;    
}

#cssmenu li:first-child:hover .upArrow{
   display: block;
}

#cssmenu li:first-child:hover .downArrow{
   display: none;
}

how to arrange the triangle shaped drop down exact to the button

Remove left:-100px to set logo class. this causes the button to hide.

You can achieve the requirement by changing position from right to left to the :after element and add margin-top to dropdown-content. Check the below snippet.

.Set-logo {     display:inline-block;     height:20px;     width:19px;     border:1px solid #3d81a9;     border-radius:50%;     font-family:Arial, Helvetica, sans-serif;     font-size:11px;     line-height:18px;     font-weight:600;     background:#014d82;     background:linear-gradient(#0272a5, #014d82);     background:-moz-linear-gradient(#0272a5, #014d82);     background:-webkit-linear-gradient(#0272a5, #014d82);     text-decoration:none;     color:#fff!important;     text-align:center;    }    .dropdown {      position:absolute;        display: block;     width:25px;     float:left;    }
    .dropdown-content {            display: none;            position: absolute;           background-color: green;         text-align: left;            width: 90px;           padding: 9px;            margin: auto;            top:20px;            margin-top:20px;         border-radius: 4px;         box-shadow: 0 1px 8px rgba(0,0,0,0.05);         border:1px solid #ddd;            }    .dropdown-content:after {      position: absolute;      top: -21px;      left: 0%;      content: "";      display: block;      border-left: 15px solid transparent;      border-right: 15px solid transparent;      border-bottom: 20px solid #000;    }    .dropdown:hover .dropdown-content {        display: block;     color:#FFFFFF;
    }

   <div class="Set-logo  dropdown" ><a>S</a>   <div class="dropdown-content">            <li><a href="#">Home</a></li>            <li><a href="#">Lock</a></li>            <li><a href="#">Logout</a></li>            </div>       </div>

---

Related Topics