Simple tooltip with fixed width using 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/