How To Make Top Menu Look Like This?

How can I make the top menu in v4 look like the menu at crateandbarrel.com?



I know how to change the BG to white and the font to black, but I don't know how to get the top and bottom borders. I've tried applying border styles to the ul.dropdown-multicolumns class, but it doesn't work.

Hi knoxbury



try this css at the end of your active less preset, like Satori.less in folder design/themes/basic/presets/data



.dropdown-multicolumns, .ui-dialog .ui-dialog-titlebar, .sidebox-important-wrapper .sidebox-title, .step-title-active span.float-left, .notification-content-extended h1, .cm-paging-dots a.active i, .cm-paging-dots a.active:hover i {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
}
ul.dropdown-multicolumns {
border-bottom: 1px solid #D8D8D8 !important;
border-left-style: none;
border-left-width: medium;
border-radius: 0;
border-right-style: none;
border-right-width: medium;
border-top: 1px solid #D8D8D8 !important;
}
ul.dropdown-multicolumns li a.drop, ul.dropdown-multicolumns li.nodrop a {
color: #000000;
font: bold 17px/25px Hevetica,Arial,sans-serif;
text-transform: none;
text-shadow:none;
}




You got to clear your cache from Administration->Storage->Clear Cache first.



You also need to work on the Hover state and all child divs too.



Fotis