the thin style ones that u can see separating the menu items. I guess its done with box shadow?
They do it with a combination of border-right and box-shadow:
border-right: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.11);
But you could also do it with a right and left border:
#page-menu-wrapper ul li .top-menu {
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-left: 1px solid rgba(255, 255, 255, 0.11);
}
… although, you’d have a problem with the left and right menu items doing it this way, so normally you’d but one of those borders on the inner element.
Anyhow, the box-shadow option is easier, but won’t work in older browsers.
thx again dude! But one more thing, if I want to have the border one the left side aswell on the first menu item, how would u do that? obv i have to add a border-left property but would i do with the shadow?
What I should have suggested is something like this:
#page-menu-wrapper ul li {
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
#page-menu-wrapper ul li .top-menu {
border-left: 1px solid rgba(255, 255, 255, 0.11);
}
Then, to add the extra black border to the left and white border to the right, you could add this on the UL itself:
#page-menu-wrapper ul.main {
border-left: 1px solid rgba(0, 0, 0, 0.1);
border-right: 1px solid rgba(255, 255, 255, 0.11);
}