Could someone please help!
I’m having trouble displaying my “products” navigation menu (view at quaywestliving.co.uk) I am using the “Pages Nested Menu” plugin and CSS inherited from the developer.
Ist level is fine, across the top of the page. Second level is fine, pull down lists. I have created third level pages (“test page” and “test page two” which are sub pages to “Home Accessories/ Clocks”. Their menu titles are displaying but I wish to achieve the following:
1. The third level menu to only display when I hover over the parent (“Clocks”).
2. The third level menu to display to the right of the parent (“Clocks”) which is currently being obscured.
The css currently being used is as follows (just can’t get my head around it!!!)
#products-nav{
border-bottom: 1px solid #333;
margin-bottom: 10px;
height: 1.6em;
position: relative;
}
#products-nav li{
display: block;
float: left;
height: 1.6em;
}
#products-nav li a{
text-decoration:none;
padding: 0px 0px 0px 0px;
margin: 0px 19px 0px 0px;
padding: 4px;
font-size: 1.2em;
}
#products-nav li a.selected {
color: #E80000;
background-color: #333333;
}
#products-nav li a:hover{
color: #E80000;
background-color: #333333;
}
#products-nav li ul {
margin: 0;
padding: 0;
position: absolute;
width: 170px;
left: -999em;
background: #333;
}
#products-nav li:hover ul {
left: auto;
top: 21px;
}
#products-nav li ul li {
display: block!important;
width: 210px;
padding: 5px;
}
#products-nav li ul li a {
margin: 0!important;
}
#products-nav li ul li a:hover {
border:none!important;
color: #c00000;
background-color: transparent;
}