Dica de ferramenta simples com largura fixa usando SASS

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

DEMO
http://jsfiddle.net/itsduc/fQ5mN/