Accordian menu problem

HTML & CSS
1

Im trying to add a different accordian menu to the one that is currently being used on a site but I just cant figure out what Im doing wrong.

I currently have one working here on the left http://universalbearings.com.au/v2/index.html

but I am trying to use one that has three levels which the code is below but for some reason the li in the css is knocking the page out of line and Im getting to the end of my tether with it - Im sorry if the code is messy Im just in a rush trying to get it sorted as Ive been playing with it for about 5 hours if I remove the li from the css its fine. any ideas anyone?

<div class="main-1-manu">
		<ul id="theMenu">
			<li>
		    <h3 class="head"><a href="javascript:;">Bearings</a></h3>
				<ul>
			  <li>
                    	<ul id="xtraMenu">
                        	<li>
                                <h4 class="head"><a href="javascript:;">Ball</a></h4>
                                <ul>
                                <li><a href="index-multi.php"  class="bluelink" >MR MINIATURE </a></li>
                              <li><a href="index-multi.php" class="bluelink">Content 2 1 2</a></li>
                                    <li><a href="index-multi.php" class="bluelink">Content 2 1 3</a></li>
                              </ul>
      </li>
                      <li>
                                <h4 class="head"><a href="javascript:;">Content xtra 2 1b</a></h4>
                                <ul>
                                    <li><a href="index-multi.php">Content 2 2 1</a></li>
                                    <li><a href="index-multi.php">Content 2 2 2</a></li>
                                    <li><a href="index-multi.php">Content 2 2 3</a></li>
                                </ul>
                          </li>
                </ul>
</li>
			    <li><a href="index-multi.php">Content 2 2</a></li>
					<li><a href="index-multi.php">Content 2 3</a></li>
				</ul>
		  </li>
			<li>
				<h3 class="head"><a href="javascript:;">Title 3</a></h3>
				<ul>
					<li><a href="index-multi.php">Content 3 1</a></li>
					<li><a href="index-multi.php">Content 3 2</a></li>
					<li><a href="index-multi.php">Content 3 3</a></li>
				</ul>
			</li>
			<li>
				<h3 class="head"><a href="javascript:;">Title 4</a></h3>
				<ul>
			    <li><a href="index-multi.php">Content 4 1</a></li>
					<li><a href="index-multi.php">Content 4 2</a></li>
					<li><a href="index-multi.php">Content 4 3</a></li>
				</ul>
			</li>
			<li>
				<h3 class="head"><a href="javascript:;">Title 5</a></h3>
				<ul>
					<li><a href="index-multi.php">Content 5 1</a></li>
					<li><a href="index-multi.php">Content 5 2</a></li>
					<li><a href="index-multi.php">Content 5 3</a></li>
				</ul>
			</li>
</ul>
</div>

the css for the new menu is

		#theMenu {
	width: 190px;
	height: 350px;
	padding: 0;
	margin-top: 30px;
	margin-right: 0;
	margin-bottom: 30px;
	margin-left: 0;
}
/* Some list and link styling */
		ul#theMenu li{
	width: 190px;
}
ul#theMenu ul li{
	width: 190px;
	margin-bottom: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
}
ul#themenu ul li a{
	display:block;
	color: #F90;
	font-size: 12px;
	padding-top: 3px;
	padding-right: 6px;
	padding-bottom: 3px;
}
ul#themenu ul li a:hover {
	display:block;
	color: #369;
	background-color: #FFF;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 3px;
	padding-right: 8px;
	padding-bottom: 3px;
}
/* For the xtra menu */
		ul#themenu ul ul li{ border-left: none; border-bottom: 1px solid #eee; padding: 0; width: 175px; margin-bottom: 0; }
ul#themneu ul ul li a{
	display:block;
	color: #000;
	font-size: small;
	padding-top: 3px;
	padding-right: 6px;
	padding-bottom: 3px;
}
li {
	list-style-type: none;
	color: #F3C;
	line-height: 18px;
}
ul#themenu ul ul li a:hover {
	display:block;
	color: #369;
	background-color: #eee;
	font-size: small;
	padding-top: 3px;
	padding-right: 8px;
	padding-bottom: 3px;
}
		h2 {
	margin-top: 1.5em;
}
		
		/* Header links styling */
		h3.head a {
	color: #27498f;
	display:block;
	font-size: 12px;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 3px;
	padding-right: 6px;
	padding-bottom: 3px;
		}
		h3.head a:hover {
	color: #000;
		}
		h3.selected a {
	color: #27498f;
	background-color: #FFF;
	padding-top: 3px;
	padding-right: 6px;
	padding-bottom: 3px;
		}
		h3.selected a:hover {
	color: #36a;
		}
		
		/* Xtra Header links styling */
		h4.head a {
	color: #999;
	display:block;
	background-color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	padding-top: 3px;
	padding-right: 6px;
	padding-bottom: 3px;
		}
		h4.head a:hover {
	color: #0F3;
		}
		h4.selected a {
	color: #900;
	background-color: #FFF;
	padding-top: 3px;
	padding-right: 6px;
	padding-bottom: 3px;
		}
		h4.selected a:hover {
	color: #900;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
		}
	

A.bluelink:link {
	COLOR: #0d3f74; TEXT-DECORATION: none
}
A.bluelink:visited {
	COLOR: #0d3f74; TEXT-DECORATION: none
}
A.bluelink:hover {
	COLOR: #0d3f74; TEXT-DECORATION: underline
}
A.bluelink:active {
	COLOR: #0d3f74
}


.main-1-manu {
	height: auto;
	width: 200px;
}
2

…but I am trying to use one that has three levels which the code is below but for some reason the li in the css is knocking the page out of line…

Hi,
Since the menu at the link you gave is not using the code you posted it makes it impossible for us to see the problems you are describing.

In order to get any help with this you should set up a test page with the menu you are actually wanting to use. Then we can see the “knocking the page out of line” problems you are talking about and possibly offer a way to fix it. :slight_smile: