Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <style type="text/css" media="screen">
        ul, li {display: inline;}
        ul {margin-left: 0;}
        li { float: left; margin-left: 0.5em;}
        li:first-child:before {content: " ["; padding-left: 5px;}
        li:after {content: " • ";}
        li:last-child:after {content: "]";}
    </style>
</head>
<body>
    <nav>
        <ul>
            <li>Test1</li>
            <li>Test2</li>
            <li>Test3</li>
            <li>Test4</li>
        </ul>
        <ul>
            <li>Test5</li>
            <li>Test6</li>
            <li>Test7</li>
            <li>Test8</li>
        </ul>
    </nav>
</body>
</html>