Css modification required

Hello

I’m new to CSS.

I’m a PHP & MySQL programmer but I have done hardly anything with CSS.

I was given a right justified menu and I had to set up a left flyout CSS menu system without any JavaScript.

I began with the existing CSS file. I then went to PureCSSmenu.com and created a menu that would flyout (to the right however).

I then combined the two CSS style sheets into one file and tried to get everything working. I did get it to work but with two CSS in one file

Now I need help to condense the CSS stylesheet so it reads the correct way. Not two stylesheets that have been spliced together.

If you go to http://www.hbbgmarketing.com/menu/menu.php you can see it work as it is now.

Here is the CSS file:

#nav-menu ul
 {list-style-type:none;
  margin:0px;
  padding:0px}
  
  
#nav-menu ul a
{text-decoration:none;
 border:0px solid #303030;
 font: 13px arial, verdana, sans-serif;
 font-weight: normal;
 width:170px;
 height: 32px;
 padding-bottom: 3px;
 text-align:left;
 text-indent: 15px;
 background-image: url(picts/menu.gif);
 background-repeat: no-repeat;
 background-position: 0 0px;
 vertical-align: middle;
 display:block;
 line-height:2em;
 color:blue}  
  

#nav-menu ul ul
{display:none} 

body.blog #nav-menu ul ul.blog, 
body.web #nav-menu ul ul.web,
body.web #nav-menu ul li:hover ul.web,
body.blog #nav-menu ul li:hover ul.blog 
{display:block;position:relative;left:0px}

#nav-menu ul li{position:relative}

#nav-menu ul li:hover ul
{position:absolute;
 display:block;
 right:172px;
 top:0px;}

#nav-menu ul ul li a
{ font: 13px arial, verdana, sans-serif;
 font-weight: normal;
 padding-bottom: 3px;
 text-align:left;
 text-indent: 15px;
 background-image: url(picts/menu.gif);
 background-repeat: no-repeat;
 background-position: 0 0px;
  margin-right: 0px;
 vertical-align: middle;
 display:block;
 line-height:2em;
 color:blue
 width:170px;
 height: 32px;
}

-----------------------------------------------------------------------
Note: this top part is the original CSS and the part below is the section that I modified from the PureCSSMenu.com sample. Both are in one file.
----------------------------------------------------------------------

#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;right}
ul.pureCssMenu ul ul{position: absolute;right}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 0px 0px 0px;
	background-image: url(picts/menu.gif);
	background-repeat: no-repeat;
	background-position: 0 0px;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
	display:block;
	width:75px;
	float: left;
}
ul.pureCssMenu ul{
	width:71.4px;
}
ul.pureCssMenu li{
	display:block;
	margin:0px 0px 0px 0px;
	font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	text-align:left;
	text-decoration:none;
	padding:4px;
	_padding-left:0;
	font:normal 11px Tahoma;
	color: #000000;
	text-decoration:none;
	cursor:default;
}
ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.pureCssMenu li.sep{
	text-align:left;
	padding:0px;
	line-height:0;
}
ul.pureCssMenu li.sep span{
	float:none;	padding-right:0;
	width:100%;
	height:3;
	display:inline-block;
	background-image:none;}
ul.pureCssMenu li:hover{
	position:relative;
}
ul.pureCssMenu li:hover>a{
	font:normal 11px Tahoma;
	color: #000000;
	text-decoration:none;
}
ul.pureCssMenu li a:hover{
	position:relative;
	font:normal 11px Tahoma;
	color: #000000;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:24px;
height:24px;
}
ul.pureCssMenu ul img {width:30px;
height:15px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
	display:block;
	background-image:none);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:12px;}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:none}

Here is the HTML for the menu:

<?php

?>

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en'
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<br>

<div id="nav-menu">
<ul class="pureCssMenu pureCssMenum">
	<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #1</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Item #2</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #7</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #8</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #9</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #10</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Item #3</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #11</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #12</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #13</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #14</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #4</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #5</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #6</a></li>
</ul>
</div>

Thank you in advance