Sorry, I should have mentioned the requirements for that example to work. I tested that code on a blog using the Ari theme with one custom menu created and setup as the "primary navigation" on the Appearance → Menus page. I didn't account for there being widgets below the navigation on the left in my first example, so I updated it a little:
#page {
padding: 0;
}
#main {
margin-top: 162px;
}
#masthead {
width: 1020px;
background: #fff;
height: 95px;
padding: 20px 0;
margin: 0;
}
a.sd-button > span {
opacity: 1;
}
.slideshow-window {
z-index: -1;
}
.main-navigation {
width: 1020px;
background: #fff;
display: block;
position: absolute;
height: 28px;
border-bottom: 1px dotted #4C4C4C;
z-index: 9;
margin-top: -20px;
}
.main-navigation li {
float: left;
padding-left: 20px;
border-bottom: none;
}
.main-navigation ul ul {
left: 0;
top: 29px;
}
.main-navigation ul ul a {
padding-left: 0;
margin-top: -2px;
}
Note that other custom CSS you add may also affect this CSS and so this example may not work as a straight copy/paste for you. If you have any trouble testing it, try removing your previous custom CSS as a test and make sure you have setup a custom menu as described in the requirements above.
It's a bit of a tricky request. As I said, it's possible, but not simple.