How to change verticle drop down menu to horizontal drop down menu

[clarkey]

Hi I have created a navigation for me friends website and it works fine as a vertical meun, but I really want it to be horizontal, can anybody please help me fix this. I have submitted all the HTML and CSS below.

Thanks

HTML Code

<div id="Nav">           <ul> 
    <li><a href="./Home.aspx">Home</a></li> 
        <li><a href="./Classes.aspx">Classes</a> 
      <ul> 
        <li><a href="./Adults.aspx">Adults</a></li> 
        <li><a href="./Kids.aspx">Kids</a></li> 
       </ul> </li>   
    
    <li><a href="./Timetable.aspx">Timetable</a> </li>  
    
    <li><a href="./Gallery.aspx">Gallery</a> 
        <ul> 
        <li><a href="./Videos.aspx">Videos</a></li> 
        <li><a href="./Photos.aspx">Photos</a></li> 
       </ul>  </li>  
    
    <li><a href="./About.aspx">About</a> </li>  
    <li><a href="./News.aspx">News & Events</a></li>  
    <li><a href="./Links.aspx">Links</a></li> 
    <li><a href="./Contact.aspx">Contact</a></li> 
        
      </ul>           </div>

CSS

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	}

ul li {
	position: relative;
    top: 5px;
    left: 1px;
}

li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}

ul li a {
	display: block;
	text-decoration: none;
	font-family:Arial;
	font-size:medium;
	font-weight:bold;
	color:White;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	background-color:Black;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #ccc;
	}

li:hover ul { display: block; } 
 a:hover {
  border-bottom: 1px solid #960;
  background-color:Purple
}
            

startList  function() {
if :(document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for :(i=0; i:<navRoot.childNodes.length; i:++) {
node = navRoot.childNodes[i];
if :(node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this:className=this.className.replace»
	(" over", "");
   }
  
window.onload=startList;

li:hover ul, li.over ul { 
	display: block; color:Purple; }

ul id="nav"

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

#NA
{POSITION:absolute;

[macneato]

Hi,

This is an easy one, change your CSS to the following;

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: auto;
}

ul li {
    position: relative;
    top: 5px;
    left: 1px;
	display: inline-block;
}

li ul {
    position: absolute;
    left: 0;
    top: 25px;
    display: none;
}

ul li a {
    display: block;
    text-decoration: none;
    font-family: Arial;
    font-size: medium;
    font-weight: bold;
    color: White;
    background: #fff;
    padding: 5px;
    border: 1px solid #ccc;
    background-color: Black;
}

/* Fix IE. Hide from IE Mac \*/ * html ul li {
    float: left;
}* html ul li a {
    height: 1%;
}

/* End */

li:hover ul {
    display: block;
}

a:hover {
    border-bottom: 1px solid #960;
    background-color: Purple
}

startList
function() {

if:(document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for :(i=0; i:<navRoot.childNodes.length; i:++) {
node = navRoot.childNodes[i];
if :(node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this:className=this.className.replace»
	(" over", "");
   }
  
window.onload=startList;

li:hover ul, li.over ul { 
	display: block; color:Purple; }

ul id="nav"

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

#NA
{POSITION:absolute;}

Like to be honest with you, im not too sure what you doing with all those horrible hacks but what floats your boat

[clarkey]

Hi,

This is an easy one, change your CSS to the following;

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: auto;
}

ul li {
    position: relative;
    top: 5px;
    left: 1px;
	display: inline-block;
}

li ul {
    position: absolute;
    left: 0;
    top: 25px;
    display: none;
}

ul li a {
    display: block;
    text-decoration: none;
    font-family: Arial;
    font-size: medium;
    font-weight: bold;
    color: White;
    background: #fff;
    padding: 5px;
    border: 1px solid #ccc;
    background-color: Black;
}

/* Fix IE. Hide from IE Mac \*/ * html ul li {
    float: left;
}* html ul li a {
    height: 1%;
}

/* End */

li:hover ul {
    display: block;
}

a:hover {
    border-bottom: 1px solid #960;
    background-color: Purple
}

startList
function() {

if:(document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for :(i=0; i:<navRoot.childNodes.length; i:++) {
node = navRoot.childNodes[i];
if :(node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this:className=this.className.replace»
	(" over", "");
   }
  
window.onload=startList;

li:hover ul, li.over ul { 
	display: block; color:Purple; }

ul id="nav"

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

#NA
{POSITION:absolute;}

Like to be honest with you, im not too sure what you doing with all those horrible hacks but what floats your boat

Hiya,

Thanks ever so much for helping me out. I don't know what you mean by hacks, I got this code from somebody else but would more than welcome any recommendations you have to improve the code. I am a beginner at this web stuff malarky....