Hover over drop down menu – don’t know where to put code

I’m trying to setup hover over drop down menus on a site, but I don’t know where to put the code.

Here’s the site:
https://www.physioworksnantucket.com

Here’s the site of the menu code:
https://www.alistapart.com/articles/horizdropdowns/

I can post the code in here but I don’t know where you need to see it (I got scolded before for posting the entire style.css), but here is where I think it should go; if elsewhere, I can post the whole thing…

Please help!! ??

***
body{
text-align:left;
color:#000;
font-family:’Liberation Sans’,FreeSans,’Helvetica Neue LT Std’,’Helvetica LT Std’,Helvetica,Arial,Tahoma,’Lucida Grande’,’Lucida Sans’,sans-serif;
}

a,.entry-content a em,.entry-content a strong,.entry-content em a,.entry-content strong a{color:#06c;outline:none !important;}
a:hover{color:#f30;}
ul li{list-style-type:square;}
.fw{width:100% !important;float:none;}

.skip-link{
display:none;
}

#header,#access{
display:block;
margin:auto;}

width:80%;
padding:1em 5%;
}
h2.entry-title,#blog-title a,h2.page-title,h3.entry-title{
font-family: ‘ITC Avant Garde Gothic Std’,’URW Gothic L’,’Century Gothic’, ‘Avant Garde’, ‘Trebuchet MS’, sans-serif;
}

#blog-title{
margin-bottom:0.35em;
}
#blog-title a{
color:#005daa;
font-weight:normal;
text-decoration:none;
font-size:225%;
}
.sb_logo img {
display:block;
margin:auto;}
}
#blog-description{
font-size:100%;
color:7E98CC;
text-transform:uppercase;
letter-spacing:0.15em;
}

#access{
text-align:center;
}
#menu ul{
overflow:hidden;
text-align:center;
}
#menu li{
display:inline;
padding:1em 2em;
border-left:1px solid #BBC1BC;
line-height:2.2;
}
#menu li:first-child{
border-left:none;
}
#menu li a{
color:#4776B9;
text-decoration:none;
font-size:138.5%;
}
#menu li a:hover{
color:#555;
}
.post, #content .page {
clear:both;
margin:1em auto 3em;
overflow:hidden;
width:50%;
}