My question is, is it possible to hide/make invisible elements but to keep their nested elements visible. I have a Spry Vertical Menu created by Dreamweaver. By default the first <ul> element is visible and then submenus are displayed by hovering over the relevant <li> element that has a nested <ul>, example here http://lechladeonline.co.uk/sandbox/menu_1.html. I would like the first <ul> element to be invisible, the second level of <ul> elements to be visible and then submenus to be displayed by hovering over the relevant <li> element that has a nested <ul>, example here http://lechladeonline.co.uk/sandbox/menu_2.html I've used visibility:hidden on the first level <ul>s and visibility:visible on the second level <ul>s. The only problem is that there is a gap where the hidden <li>s would have been. I've tried using display:none to hide the top level <ul> and display:block to re-display the second level <ul>s but it seems that elements within an element that is set to display:none can not have their visibility switched back on. Can someone suggest a way of achieving what I want? Any help is appreciated, thanks.