HTML
<ul class="nav">
<li><a title="" href=""></a>
<ul><li>tooltip</li></ul>
</li>
<li><a title="" href=""></a>
<ul><li>tooltip</li></ul>
</li>
<li><a title="" href=""></a>
<ul><li>tooltip</li></ul>
</li>
<li><a title="" href=""></a>
<ul><li>tooltip</li></ul>
</li>
</ul>
SCSS
$lblue: #2c99ce;
$lgrey: #848484;
$white: #fff;
ul.nav {
position: relative;
left: 50px;
top: 50px;
li {
display: inline-block;
list-style: none outside none;
position: relative;
background: $lgrey;
a {
height: 30px;
width: 30px;
display: block;
background: $white;
position: relative;
background: transparent;
z-index: 999;
}
ul {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
li {
display: none;
position: absolute;
z-index: 999;
padding: 5px;
opacity: 1;
font-size: 11px;
color: $white;
background-color: $lblue;
text-align: center;
width: 75px;
left: -26px;
bottom: -35px;
a {
color: $white;
background-color: $lblue;
width: auto;
height: auto;
}
}
li:before {
content: "";
height: 0;
left: 43px;
margin-left: -5px;
position: absolute;
top: -5px;
width: 0;
z-index: 1000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid $lblue;
}
}
&:hover ul li {
display: block;
position: absolute;
}
}
}