Yeah, I’ve looked at both and tried the 1st solution, but with no joy. The 2nd looks nothing like the CSS I have in my child theme..
/* =Menu
———————————————– */
#access {
background: transparent;
clear: both;
display: block;
float: left;
margin: 0 auto 3.23em;
width: 80%;
}
#access ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#access li {
display: table;
margin: 0 auto;
}
#access a {
color: #ee4037;
border-bottom: .25em solid #;
display: block;
line-height: 3.23em;
margin: 0 1px 0 0;
padding: 0 28px;
text-decoration: none;
}
#access ul ul {
background: #ee4037;
border-top: 1px solid #a41c23;
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
position: absolute;
top: 3.5em;
left: 0;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
border: none;
color: #ffe8ef;
margin: 0;
padding: 0 28px;
width: 200px;
height: auto;
}
#access ul ul li {
border-bottom: 1px solid #a41c23;
}
#access li:hover > a {
border-color: #ee4037;
color: #ee4037;
}
#access ul ul :hover > a {
background: #ac242b;
color: #fff;
}
#access ul ul a:hover {
}
#access ul li:hover > ul {
display: block;
}
#access li.current_page_item a,
#access li.current-menu-item a {
border-color: #ee4037;
}