CSS Hover Menü in Höhe anpassen

[selfmade]

Hallo
habe hier folgendes fertiges auf css basierendes hover Nav-Menü gefunden und dieses bei mir eingebaut.
Funktioniert eigentlich einwandfrei.
Ich möchte nur von den Hauptbuttons die Hintergrundfarbe ändern und die gesamte Menübreite (nicht den eigentlichen Button) auch in ihrer Höhe ändern.
Finde dazu aber rein gar nichts wo ich ansetzen könnte.
Ich vermute es könnte beim div und der dortigen Angabe wrapper liegen.

Kann mir dazu jemand helfen?

Gruß Jürgen

hier das stylesheet

  
  
/*nav-Menü*/  
nav {  
    width: 960px;  
}  
nav ul {  
    padding: 0px;  
    margin: 0px;  
  
    box-shadow: 2px 2px 2px #dfdfdf;  
    -moz-box-shadow: 2px 2px 2px #dfdfdf;  
    -webkit-box-shadow: 2px 2px 2px #dfdfdf;  
}  
  
nav ul:after {  
    clear: both;  
    content: " ";  
    display: block;  
    font-size: 0;  
    height: 0;  
    visibility: hidden;  
}  
  
nav ul,nav ul li{  
    background-color: #FAFAFA;  
}  
nav ul li {  
    list-style: none;  
    float:left;  
  
    border-right: 1px solid #dfdfdf;  
}  
nav ul li a {  
    text-decoration: none;  
    display: block;  
    color: #333;  
    padding: 14px 34px 14px 34px;  
  
    transition: background 0.3s ease-out; /* explorer 10 */  
    -webkit-transition: background 0.3s ease-out; /* chrome & safari */  
    -moz-transition: background 0.3 ease-out; /* firefox */  
    -o-transition: background 0.3 ease-out; /* opera */  
}  
nav  li.cat1:a, nav ul li.cat1: > ul li a{  
    background-color: #E6DD00;  
}  
  
  
nav ul li.cat1:hover a, nav ul li.cat1:hover > ul li a  {  
    background-color: #E6DD00;  
}  
nav ul li.cat2:hover a, nav ul li.cat2:hover > ul li a  {  
    background-color: #8CB302;  
}  
nav ul li.cat3:hover a, nav ul li.cat3:hover > ul li a {  
    background-color: #008C74;  
}  
nav ul li.cat4:hover a, nav ul li.cat4:hover > ul li a {  
    background-color: #004C66;  
}  
nav ul li.cat5:hover a, nav ul li.cat5:hover > ul li a {  
    background-color: #332B40;  
}  
  
nav ul li:hover > a {  
    color: #FAFAFA;  
}  
nav ul li:hover > ul {  
    visibility: visible;  
}  
  
nav ul li ul{  
    display: inline;  
    visibility: hidden;  
    position: absolute;  
    padding:0px;  
}  
nav ul li ul li{  
        float: none;  
}  
nav ul li ul li a {  
    color: #FAFAFA;  
}  
nav ul li ul li a:hover{  
        color: #333;  
        background-color: #FAFAFA !important;  
}  
/* bis hier gehört alles zum Nav-Menü */  
  
  
table.addroom, td, tr{  
	margin: 0;  
	border-spacing: 0;  
	border-collapse: collapse;  
	border-width: 1px;  
	border-style: solid;  
	padding: 0;  
	border-color: 1px #332B40;  
	caption-side:left;  
	/*border:  1pix #332B40;*/  
}

hier der zugehörige html-code

<div id = "wrapper" >  
        <nav>  
			<ul>  
                <li class = "cat5">  
                <a href="/index.php">Typ</a>  
					<ul>  
						<li><a href="#">Übersicht</a></li>  
						<li><a href="#">anlegen/ändern</a></li>  
					</ul>  
                </li>  
                <li class = "cat3">  
                <a href="#">Becken2</a>  
					<ul>  
						<li><a href="#"> Übersicht</a></li>  
						<li><a href="#"> anlegen/ändern</a></li>  
					</ul>	  
                </li>  
				<li class = "cat2">  
                <a href="/index.php">Becken</a>  
					<ul>  
						<li><a href="#">Becken Übersicht</a></li>  
						<li><a href="#">Becken anlegen/ändern</a></li>  
					</ul>  
                </li>  
                <li class = "cat5">  
                <a href="#">Becken Typ</a>  
					<ul>  
						<li><a href="#">Übersicht</a></li>  
						<li><a href="#">anlegen/ändern</a></li>  
					</ul>  
                </li>  
			</ul>  
		</nav>  
	</div>