How to code sprite images for main navigation for twentyeleven

What is the proper XHTML and CSS code you have?

It was created from an automatic code generator for sprite images that I found online. See below. My question is WHERE to enter this code?

XHTML:

<ul id="navigation">
		<li id="navigation-1"><a href="https://www.rosemaryahern.com" title="Home"><span>Home</span></a>
		<li id="navigation-2"><a href="https://www.rosemaryahern.com/about" title="About"><span>About</span></a>
		<li id="navigation-3"><a href="https://www.rosemaryahern.com/services" title="Services"><span>Services</span></a>
		<li id="navigation-4"><a href="https://www.rosemaryahern.com/testimonials" title="Testimonials"><span>Testimonials</span></a>
		<li id="navigation-5"><a href="https://www.rosemaryahern.com/books-by" title="Books By"><span>Books By</span></a>
		<li id="navigation-6"><a href="https://www.rosemaryahern.com/contact" title="Contact"><span>Contact</span></a>

CSS:
/* HORIZONTAL NAVIGATION BAR
/////////////////////////////////////*/

ul#navigation {
	width:410px;
	list-style:none;
	height:20px
}

ul#navigation li {
	display:inline
}

ul#navigation li a {
	height:20px;
	float:left;
	text-indent:-9999px;
	text-decoration:none
}

ul#navigation  li a span {
	float:left;
	display:block
}

ul#navigation li#navigation-1 a {
	width:65px;
	background:url(Menu_Master-19.jpg) no-repeat 0px 0
}

ul#navigation li#navigation-1 a:active,
ul#navigation li#navigation-1 a:hover {
	background-position:0px -20px
}
ul#navigation li#navigation-1 a.current {
	background-position:0px -40px
}

ul#navigation li#navigation-2 a {
	width:65px;
	background:url(Menu_Master-19.jpg) no-repeat -65px 0
}

ul#navigation li#navigation-2 a:active,
ul#navigation li#navigation-2 a:hover {
	background-position:-65px -20px
}
ul#navigation li#navigation-2 a.current {
	background-position:-65px -40px
}

ul#navigation li#navigation-3 a {
	width:65px;
	background:url(Menu_Master-19.jpg) no-repeat -130px 0
}

ul#navigation li#navigation-3 a:active,
ul#navigation li#navigation-3 a:hover {
	background-position:-130px -20px
}
ul#navigation li#navigation-3 a.current {
	background-position:-130px -40px
}

ul#navigation li#navigation-4 a {
	width:85px;
	background:url(Menu_Master-19.jpg) no-repeat -195px 0
}

ul#navigation li#navigation-4 a:active,
ul#navigation li#navigation-4 a:hover {
	background-position:-195px -20px
}
ul#navigation li#navigation-4 a.current {
	background-position:-195px -40px
}

ul#navigation li#navigation-5 a {
	width:65px;
	background:url(Menu_Master-19.jpg) no-repeat -280px 0
}

ul#navigation li#navigation-5 a:active,
ul#navigation li#navigation-5 a:hover {
	background-position:-280px -20px
}
ul#navigation li#navigation-5 a.current {
	background-position:-280px -40px
}

ul#navigation li#navigation-6 a {
	width:65px;
	background:url(Menu_Master-19.jpg) no-repeat -345px 0
}

ul#navigation li#navigation-6 a:active,
ul#navigation li#navigation-6 a:hover {
	background-position:-345px -20px
}
ul#navigation li#navigation-6 a.current {
	background-position:-345px -40px
}

Another forum user suggested that I use the following format, and still nothing.

#menu-item-246 a {
display:block; height:20px; width:65px; padding:0px; outline:none;
background-image:url('https://www.rosemaryahern.com/wp-content/themes/twentyelevenchild/images/Menu_Master-19.jpg'); background-position:0px 0px;
}
/* Hover */
#access li.menu-item-246.menu-item-object-page:hover > a, #access ul ul:hover > a, #access li.menu-item-246.menu-item-object-page a:focus {
display:block; height:20px; width:65px; padding:0px; outline:none;
background-image:url('https://www.rosemaryahern.com/wp-content/themes/twentyelevenchild/images/Menu_Master-19.jpg'); background-position:0px -20px;
}
/* =Menu - maintain ACTIVE STATE when it is the current page/sub-menu
-------------------- */

#access li.current-menu-item.menu-item-246 > a, #access li.current-menu-ancestor.menu-item-246 > a, #access li.current_page_item.menu-item-246 > a, #access li.current_page_ancestor.menu-item-246 > a
{ background-image:url('https://www.rosemaryahern.com/wp-content/themes/twentyelevenchild/images/Menu_Master-19.jpg'); background-position:0px -40px;
}

You’ll have to rename the CSS selectors to the classes and IDs of your actual menu.
You shouldn’t need to add any HTML.

Thanks, though must admit that I am completely new to code. I assume you favor the first option (the one from the auto code generator)? I don’t know what “CSS selectors” are.

Can you get me started with one section and I can take it from there?