ul li bullet alignment

HTML

<body>
    <div class="sidebar">
        <div class="panel">
            <div class="panel-head">
                <p>Your Menu</p>
            </div>
            <div class="panel-body">
                <ul>
                    <li><a href="#">Lorem ipsum dolor</a>
                    </li>
                    <li><a href="#">Lorem ipsum dolor</a>
                    </li>
                    <li><a href="#">Lorem ipsum dolor</a>
                    </li>
                    <li><a href="#">Lorem ipsum dolor</a>
                    </li>
                    <li><a href="#">Lorem ipsum dolor</a>
                    </li>
                    <li><a href="#">Lorem ipsum dolor</a>
                    </li>
                    <li><a href="#">Lorem ipsum dolor sit amet draco dormiens numquam titallandus</a>
                    </li>
                    <li><a href="#">Lorem ipsum dolor</a>
                    </li>
                    <li><a href="#">Lorem ipsum dolor</a>
                    </li>
                </ul>
            </div>
        </div>
</body>

CSS

body .sidebar {
    background-color:#ccc;
    padding:20px;
    width: 330px;
    float:right;
}
.panel-head {
    background-color:#53d;
    color:#fff;
    padding:.3em;
    text-align:center;
    font-family:@fancyfont;
    font-size:1.2em;
}
.panel-body {
    color:#aaa;
    background-color:#fff;
}
.panel-body ul {
    display:inline;
    padding:0;
}
.panel-body ul li {
    padding:0.5em;
    border-bottom-style:solid;
    border-color:#ccc;
    list-style-type:none;
    margin:0;
}
.panel-body ul li:last-child {
    border-bottom-style:none;
}
.panel-body ul li a {
    text-decoration:none;
    display: table;
}
.panel-body ul li a:visited {
    color:#000;
}
.panel-body ul li:before {
   display: block;
   float:left;
   content:"\27A8\00a0\00a0";
}
.panel-body ul li:hover, .panel-body ul li:hover a {
    background-color: #53d;
    color:#fff;
}