0

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;
2
Contributors
2
Replies
4
Views
7 Years
Discussion Span
Last Post by clarkey
0

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

0

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....

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.