I'm creating a [new drop-down menu](http://lwis.net/free-css-drop-down-menu/lwis.celebrity.horizontal.html), but can't seem to make the nested uls visible.

[Here's the test page](http://www.inside-guides.co.uk/brentwood/pages/about-us.html) where you can hover over the 'Events' section and it doesn't work.

Here's the html:

```
<div class="menu clearfix">
      <ul class="menu dropdown dropdown-linear dropdown-columnar">
        <li class="community"><a class="events_link" href="/events/index.html">Events</a>
            <ul>
            <li><a href="./">Menu Subitem #1</a></li>
            <li><a href="./">Menu Subitem #2</a></li>
            <li><a href="./">Menu Subitem #3</a></li>
            <li><a href="./">Menu Subitem #4</a></li>
        </ul>
        </li>
    </ul>
  </div>

```

Here's the CSS for the nested ul:

```
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

```

I didn't post all of it as there's loads, but please let me know if you need more of perhaps use an inspector to see the rest..

Any help much appreciated.