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

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;

clarkey

Newbie Poster

2 posts since Feb 2010

Reputation Points: 10

Solved Threads: 0

2 Years Ago

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

macneato

Posting Pro in Training

421 posts since Jun 2007

Reputation Points: 46

Solved Threads: 48