New Post: Category Menu CSS to create nicer menu

I'm trying to create the category menu so it looks like my main menu.
Basically I grabbed the CSS from my main menu, did a global replace so it's all "treeview" instead of nav and hmenu (original created by Artisteer).

It works except one thing. At each node you have to click on it for the subitems to show below, whereas on the main menu, hover does this.

I'm far from an expert on CSS, more of a self taught hacker, so is this a CSS issue, or is this the way the product menu works and I have to do code changes.

Sample can be seen at http://grt.gold-rush.net.au/products.aspx

CSS code is:

``` table, ul.treeview
{
font-size: 13px;
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
}

treeview, #treeview-bg
{
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}


.treeview:before, #treeview-bg:before
{
width: 100%;
content: " ";
display: table;
}

.treeview:after, #treeview-bg:after
.cleared, .clearfix:after {
clear: both;
font: 0/0 serif;
display: block;
content: " ";
}

table.position
{
position: relative;
width: 100%;
table-layout: fixed;
}
.treeview
{
background: #5F90C4;
background: linear-gradient(top, #A2BEDD 0, #457EBA 68%, #345F8D 100%) no-repeat;
background: -webkit-linear-gradient(top, #A2BEDD 0, #457EBA 68%, #345F8D 100%) no-repeat;
background: -moz-linear-gradient(top, #A2BEDD 0, #457EBA 68%, #345F8D 100%) no-repeat;
background: -o-linear-gradient(top, #A2BEDD 0, #457EBA 68%, #345F8D 100%) no-repeat;
background: -ms-linear-gradient(top, #A2BEDD 0, #457EBA 68%, #345F8D 100%) no-repeat;
background: linear-gradient(top, #A2BEDD 0, #457EBA 68%, #345F8D 100%) no-repeat;
-svg-background: linear-gradient(top, #A2BEDD 0, #457EBA 68%, #345F8D 100%) no-repeat;
border-bottom:1px dotted #8CAFD4;
margin:0 auto;
position: relative;
z-index: 499;
}

ul.treeview a, ul.treeview a:link, ul.treeview a:visited, ul.treeview a:hover
{
outline: none;
position: relative;
z-index: 11;
}

ul.treeview, ul.treeview ul
{
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}

ul.treeview li
{
position: relative;
z-index: 5;
display: block;
float: left;
background: none;
margin: 0;
padding: 0;
border: 0;
}

ul.treeview li:hover
{
z-index: 10000;
white-space: normal;
}

ul.treeview:after, ul.treeview ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}

ul.treeview, ul.treeview ul
{
min-height: 0;
}

ul.treeview
{
display: inline-block;
vertical-align: bottom;
padding-left: 2px;
padding-right: 2px;
}

.treeview-inner:before
{
content:' ';
}

.treeview-inner{
text-align: left;
margin:0 auto;
}

.desktop .treeview-inner{
width: 1000px;
padding-left: 2px;
padding-right: 2px;
}

.desktop .treeview
{
padding-left: 0;
padding-right: 0;
}

.treeview-extra1
{
position: relative;
display: block;
float: left;
width: auto;
height: auto;
background-position: center;
}

.treeview-extra2
{
position: relative;
display: block;
float: right;
width: auto;
height: auto;
background-position: center;
}

.treeview
{
float: none;
}

.grt-menuitemcontainer
{
margin:0 auto;
}
ul.treeview>li {
margin-left: 0;
}
ul.treeview>li:first-child {
margin-left: 0;
}
ul.treeview>li:last-child, ul.treeview>li.last-child {
margin-right: 0;
}

ul.treeview>li>a
{
background: #2D537B;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
padding:0 17px;
margin:0 auto;
position: relative;
display: block;
height: 35px;
cursor: pointer;
text-decoration: none;
color: #C0D3E8;
line-height: 35px;
text-align: center;
}

.treeview a,
.treeview a:link,
.treeview a:visited,
.treeview a.active,
.treeview a:hover
{
font-size: 13px;
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;
}

ul.treeview>li>a.active
{
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
padding:0 17px;
margin:0 auto;
color: #E1EAF4;
text-decoration: none;
}

ul.treeview>li>a:visited,
ul.treeview>li>a:hover,
ul.treeview>li:hover>a {
text-decoration: none;
}

ul.treeview>li>a:hover, .desktop ul.treeview>li:hover>a
{
background: #828282;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
padding:0 17px;
margin:0 auto;
}
ul.treeview>li>a:hover,
.desktop ul.treeview>li:hover>a {
color: #292929;
text-decoration: none;
}

ul.treeview li li a
{
background: #8CAFD4;
background: transparent;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
padding:0 10px;
margin:0 auto;
}
ul.treeview li li
{
float: none;
width: auto;
margin-top: 2px;
margin-bottom: 2px;
}

.desktop ul.treeview li li ul>li:first-child
{
margin-top: 0;
}

ul.treeview li li ul>li:last-child
{
margin-bottom: 0;
}

.treeview ul a
{
display: block;
white-space: nowrap;
height: 25px;
min-width: 7em;
border: 0 solid transparent;
text-align: left;
line-height: 25px;
color: #192D43;
font-size: 13px;
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
text-decoration: none;
margin:0;
}

.treeview ul a:link,
.treeview ul a:visited,
.treeview ul a.active,
.treeview ul a:hover
{
text-align: left;
line-height: 25px;
color: #192D43;
font-size: 13px;
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
text-decoration: none;
margin:0;
}

ul.treeview li li:after
{
display: block;
position: absolute;
content: ' ';
height: 0;
top: -1px;
left: 0;
right: 0;
z-index: 1;
border-bottom: 1px dotted #F8FAFC;
}

.desktop ul.treeview li li:first-child:before,
.desktop ul.treeview li li:first-child:after
{
display: none;
}

ul.treeview ul li a:hover, .desktop ul.treeview ul li:hover>a
{
background: #C7C7C7;
background: transparent;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:0 auto;
}
.treeview ul a:hover
{
text-decoration: none;
}

.treeview ul li a:hover
{
color: #000000;
}

.desktop .treeview ul li:hover>a
{
color: #000000;
}

ul.treeview ul:before
{
background: #C3D6E9;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
border:1px dotted rgba(62, 113, 168, 0.9);
margin:0 auto;
display: block;
position: absolute;
content: ' ';
z-index: 1;
}
.desktop ul.treeview li:hover>ul {
visibility: visible;
top: 100%;
}
.desktop ul.treeview li li:hover>ul {
top: 0;
left: 100%;
}

ul.treeview ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background-image: url('images/spacer.gif');
}

.desktop ul.treeview>li>ul
{
padding: 16px 36px 36px 36px;
margin: -10px 0 0 -30px;
}

.desktop ul.treeview ul ul
{
padding: 36px 36px 36px 18px;
margin: -36px 0 0 -5px;
}

.desktop ul.treeview ul.treeview-left-to-right
{
right: auto;
left: 0;
margin: -10px 0 0 -30px;
}

.desktop ul.treeview ul.treeview-right-to-left
{
left: auto;
right: 0;
margin: -10px -30px 0 0;
}

.desktop ul.treeview li li:hover>ul.treeview-left-to-right {
right: auto;
left: 100%;
}
.desktop ul.treeview li li:hover>ul.treeview-right-to-left {
left: auto;
right: 100%;
}

.desktop ul.treeview ul ul.treeview-left-to-right
{
right: auto;
left: 0;
padding: 36px 36px 36px 18px;
margin: -36px 0 0 -5px;
}

.desktop ul.treeview ul ul.treeview-right-to-left
{
left: auto;
right: 0;
padding: 36px 18px 36px 36px;
margin: -36px -5px 0 0;
}

.desktop ul.treeview li ul>li:first-child {
margin-top: 0;
}
.desktop ul.treeview li ul>li:last-child {
margin-bottom: 0;
}

.desktop ul.treeview ul ul:before
{
border-radius: 3px;
top: 30px;
bottom: 30px;
right: 30px;
left: 12px;
}

.desktop ul.treeview>li>ul:before
{
top: 10px;
right: 30px;
bottom: 30px;
left: 30px;
}

.desktop ul.treeview>li>ul.treeview-left-to-right:before {
right: 30px;
left: 30px;
}
.desktop ul.treeview>li>ul.treeview-right-to-left:before {
left: 30px;
left: 30px;
}
.desktop ul.treeview ul ul.treeview-left-to-right:before {
right: 30px;
left: 12px;
}
.desktop ul.treeview ul ul.treeview-right-to-left:before {
right: 12px;
left: 30px;
}

.desktop ul.treeview>li.ext>a
{
white-space: nowrap;
}

.desktop ul.treeview>li.ext>a:hover,
.desktop ul.treeview>li.ext:hover>a,
.desktop ul.treeview>li.ext:hover>a.active
{
background: none;
/ default padding + border size /
padding: 0 17px 0 17px;
/ margin for shadow /
margin: -0 -0 0 -0;
overflow: hidden;
position: relative;
border: none;
border-radius: 0;
box-shadow: none;
color: #203A56;
}

.desktop ul.treeview>li.ext>a:hover:before,
.desktop ul.treeview>li.ext:hover>a:before,
.desktop ul.treeview>li.ext:hover>a.active:before
{
position: absolute;
content: ' ';
/ top, right, left - for shadow /
top: 0;
right: 0;
left: 0;
/ border + shadow /
bottom: -1px;
background-color: #C3D6E9;
border: 1px Dotted rgba(62, 113, 168, 0.9);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.8);
z-index: -1;
}

.desktop ul.treeview>li.ext:hover>ul
{
padding-top: 5px;
/ menu bar padding /
margin-top: 0;
}

.desktop ul.treeview>li.ext:hover>ul:before
{
/ border + shadow /
top: -1px;
clip: rect(6px, auto, auto, auto);
border-top-left-radius: 0;
border-top-right-radius: 0;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.8);
}