Gadgetopia

I agree, it's a tidy, compact navigation. Very nice! Structurally, it's basically the same as any traditional navigation/subnavigation: A list of main items, each with a nested list of subnav items:

<ul id="mainNav">
    <li><a href="#">Seattle University</a>
        <ul>
            <li><a href="#">Mission</a></li>
            <li><a href="#">Jesuit tradition</a></li>
            <li><a href="#">President</a></li>
        </ul>
    </li>
    <li><a href="#">Undergraduate admission</a>
        <ul>
            <li><a href="#">Admissions</a></li>
            <li><a href="#">Financial aid</a></li>
            <li><a href="#">Degrees</a></li>
        </ul>
    </li>
<ul>

For what it's worth, I thought I'd share a little CSS to generate this display format from a set of unordered lists (alas, the commas between subnav items will show up only in browsers supporting CSS3 selectors and the content property):

/* main navigation ------------- */
#mainNav {
    width:15em;
    padding: 1em;
    margin: 0;
    background-color: #333;
}
#mainNav li {
    border-bottom: dotted 1px #fff;
    padding: .4em 0em;
    margin: 0;
    list-style:none;
}
#mainNav a,
#mainNav a:visited {
    color: #fff;
    text-decoration: none;
}
#mainNav a:hover {
    text-decoration: underline;
}

/* subnavigation --------------- */
#mainNav ul {
    padding: 0;
    margin: 0;
}
#mainNav li li {
    font-size:80%;
    border: none;
    display:inline;
    margin-right: .5em;
    padding: 0;
    color: #999;
}
#mainNav li li:after {
    content: ',';
}
#mainNav li ul > li:last-child:after {
    content: '';
}
#mainNav li li a,
#mainNav li li a:visited {
    color: #999;
}