css a:hover to a:focus - css

Question

I am making a website for my brother and I did a dropdown CSS menu for him which worked on the :hover to display the secondary options. Then he decided he wanted people to click on the main navigation box which would then dropdown the menu to show the secondary levels...
I tried changing the :hover to :focus (also the a:active) on the a element and this worked fine in IE9, but Firefox, Safari, Chrome and Opera wouldn't recognise the new commands. I read about a Javascript alternative but I'm not familiar with it too much to really feel confident about going down that route.
Just wondering if someone could help:
Link to web: http://www.doogledesigns.co.uk/prime%20elements/website/
HTML Code:
<div class="nav1">
<div class="menu-item-home">
<h4>Home</h4>
<ul>
<li>Plumbing & Gas Work</li>
<li>Electrical Work</li>
<li>Extensions</li>
<li>Internal & External Developments</li>
</ul>
</div>
<div class="menu-item-garden">
<h4>Garden</h4>
<ul>
<li>Garden Maintenance</li>
<li>Landscaping</li>
<li>Patios & Driveways</li>
<li>Walls & Fencing</li>
<li>Ponds & Water Features</li>
<li>Lighting</li>
<li>Drainage</li>
</ul>
</div>
<div class="menu-item-construction">
<h4>Construction</h4>
<ul>
<li>Home Redevelopment</li>
<li>New Builds</li>
<li>Driveways</li>
</ul>
</div>
</div>
CSS Code:
.nav1 {
float: left;
background: #404041;
height: 500px;
line-height: 1.5;
width: 170px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,2);
box-shadow: 2px 2px 5px rgba(0,0,0,2);
}
.menu-item-home, .menu-item-garden, .menu-item-construction {
background: #404041;
width: 170px;
}
.menu-item-home h4, .menu-item-garden h4, .menu-item-construction h4 {
color: #fff;
font-size: 13px;
font-weight: 500;
padding: 7px 12px;
background: #10702a;
}
.menu-item-home h4 a, .menu-item-garden h4 a, .menu-item-construction h4 a {
color: #fff;
display: block;
text-decoration: none;
width: 170px;
}
/* Menu Header Styles */
.menu-item-home h4, .menu-item-garden h4, .menu-item-construction h4 {
border-bottom: 1px solid rgba(0,0,0,3);
border-top: 1px solid rgba(225,225,225,0.2);
color: #fff;
font-size: 13px;
font-weight: 500;
padding: 7px 12px;
/* Gradient */
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #02942a 0%, #0b872d 44%, #0f722a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02942a), color-stop(44%,#0b872d), color-stop(100%,#0f722a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#80b872d 44%,#0f722a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #02942a 0%,#0b872d 44%,#0f722a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #02942a 0%,#0b872d 44%,#0f722a 100%); /* IE10+ */
background: linear-gradient(top, #02942a 0%,#0b872d 44%,#0f722a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02942a', endColorstr='#0f722a',GradientType=0 ); /* IE6-9 */
}
/* ul styles */
.menu-item-home ul, .menu-item-garden ul, .menu-item-construction ul {
background: #404041;
font-size: 12px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px
}
.menu-item-home ul a, .menu-item-garden ul a, .menu-item-construction ul a {
margin-left: 2.5px;
text-decoration: none;
color: #404041;
diplay: block;
width: 173px;
}
/* li styles */
.menu-item-home li, .menu-item-garden li, .menu-item-construction li {
border-bottom: 1px solid #eee;
}
.menu-item-home li:hover, .menu-item-garden li:hover, .menu-item-construction li:hover {
background: #eee;
}
/* ul styles */
.menu-item-home ul, .menu-item-construction ul, .menu-item-garden ul {
background: #fff;
font-size: 12px;
line-height: 30px;
min-height: 0px;
max-height: 0px /* collapses the menu */
list-style-type: none;
overflow: hidden;
padding: 0px;
/* Animation */
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item-home:hover ul {
height: 155px;
}
.menu-item-garden:hover ul {
height: 220px;
}
.menu-item-construction:hover ul {
height: 90px;
}
CSS sheet needs cleaning up a bit but you get the general jist!

Answer 1

You want that menu to appear on click event.
To make that possible and to also make that cross browser compatible i would recommend using a jquery library jQuery just download the library and attach the link in the <head> section of your page and simply write jquery code to attach click event handler.
jQuery Download Link
basically you need to code only this much
after you link the jquery to your page write this in
<script>
$(document).ready(function(){
$(".menu-item-home a").click(function(){
$(".menu-item-home ul").slideToggle('slow');
});
$(".menu-item-garden a").click(function(){
$(".menu-item-garden ul").slideToggle('slow');
});
$(".menu-item-construction a").click(function(){
$(".menu-item-construction ul").slideToggle('slow');
});
});
</script>
and a little change to css is also required.and thats it you wana do.
have changed your css code and witten the jquery code for you for your website
check this link and you will have both your changed code.
and on the right side is the working website with click enabled.
http://jsfiddle.net/znsZu/
Hope it helps.