8 Replies - 1536 Views - Last Post: 21 April 2011 - 08:17 AM

#1 lexxe  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 44
  • Joined: 05-December 10

Drop down menu help(HTML, CSS, and a wee bit o javascript)

Posted 21 April 2011 - 05:48 AM

I'm building a website, and trying to build a drop down style menu. I found this tutorial that explains how to make it a vertical list. I have modified it to make it a horizontal list. Here is my snippets that I use:

HTML:
<div id="navigation">
<ul id="nav"> 
  <li><a href="index.html">Home</a></li> 
  <li><a href="#">About</a> 
    <ul> 
	<li><a href="#">About</a></li> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Offices</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Services</a> 
    <ul> 
	<li><a href="#">Services</a></li> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">Internet Marketing</a></li> 
      <li><a href="#">Hosting</a></li> 
      <li><a href="#">Domain Names</a></li> 
      <li><a href="#">Broadband</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Contact Us</a> 
    <ul> 
	<li><a href="#">Contact Us</a></li> 
      <li><a href="#">United Kingdom</a></li> 
      <li><a href="#">France</a></li> 
      <li><a href="#">USA</a></li> 
      <li><a href="#">Australia</a></li> 
    </ul> 
  </li> 
</ul> 
 </div>


CSS:
#navigation {
	background-color: #FFD273;
	border: 1px solid black;
    width: 760px;
    margin: 0px auto;
	text-align: center;
	font-size: 75%;
}


ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    display: inline;
}

ul li {
    text-align: center;
    float: left;
    display: block;
	position: relative;
    background-color: #FFD273;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 120px; 
	border-bottom: 1px solid #ccc;
}
ul li a {
    display: block;
    height: 20px;
    line-height: 20px;
    text-decoration: none;
    color: #000000;
    font-weight: bold;
    font-size: 1.1em;
	position: relative;
}
ul li a:active{
    display: block;
    height: 20px;
    line-height: 20px;
    text-decoration: none;
    color: #000000;
    font-weight: bold;
    font-size: 1.1em;
	position: relative;
}
li ul {
	position: absolute;
	top: 19px;
	top: 0;
	display: none;
	}
li:hover ul, li.over ul { display: block; }
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }


Javascript:
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;


My webserver is down(issues at the datacenter), and I can't give you a link to all of it together, so I'll describe the issues and include a picture so you can see whats happening.

The issue: In IE, it doesn't fully collapse the menu, and the menu it does populate is shifted off to the right half way. The HTML/CSS is line for line what I got from the tutorial(excluding what I did to make it go horizontal), and I can't seem to get it to work.

Image:
Attached Image

Any help is appreciated!

Is This A Good Question/Topic? 0
  • +

Replies To: Drop down menu help(HTML, CSS, and a wee bit o javascript)

#2 Nykc  Icon User is offline

  • Gentleman of Leisure
  • member icon

Reputation: 725
  • View blog
  • Posts: 8,638
  • Joined: 14-September 07

Re: Drop down menu help(HTML, CSS, and a wee bit o javascript)

Posted 21 April 2011 - 06:02 AM

First question..

Why the Javascript? This can easily be accomplished using CSS/HTML

Here is a example http://css.flepstudi...-down-menu.html

I make these lists all the time and have yet the need for adding Javascript to make it function.

What version of IE are you experiencing problems in? IE7,8,9? They all act differently because it is IE and it can.
Was This Post Helpful? 1
  • +
  • -

#3 lexxe  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 44
  • Joined: 05-December 10

Re: Drop down menu help(HTML, CSS, and a wee bit o javascript)

Posted 21 April 2011 - 06:06 AM

Version 8.

And I just followed the tutorial I found. It works well for chrome, but not everyone uses it >.<
Was This Post Helpful? 0
  • +
  • -

#4 Nykc  Icon User is offline

  • Gentleman of Leisure
  • member icon

Reputation: 725
  • View blog
  • Posts: 8,638
  • Joined: 14-September 07

Re: Drop down menu help(HTML, CSS, and a wee bit o javascript)

Posted 21 April 2011 - 06:36 AM

Try the tutorial of the link I posted, works great in all browsers IE7 + (I refuse to support IE6)

I honestly recommend staying away from using Javascript to create a simple css drop-down menu.

If you are still having issues we can start debugging from there.

This post has been edited by Nykc: 21 April 2011 - 06:36 AM

Was This Post Helpful? 0
  • +
  • -

#5 lexxe  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 44
  • Joined: 05-December 10

Re: Drop down menu help(HTML, CSS, and a wee bit o javascript)

Posted 21 April 2011 - 06:40 AM

I got in there and made it from the link you posted, and it looks great! Except for Firefox, who shifts the menu over half way. Image included. Any insight on that?

Attached Image
Was This Post Helpful? 0
  • +
  • -

#6 Nykc  Icon User is offline

  • Gentleman of Leisure
  • member icon

Reputation: 725
  • View blog
  • Posts: 8,638
  • Joined: 14-September 07

Re: Drop down menu help(HTML, CSS, and a wee bit o javascript)

Posted 21 April 2011 - 06:52 AM

Can you post what you have now and I will throw it in firefox and see what the issue is?

Thanks,

I am assuming it is a margin or padding issue.

This post has been edited by Nykc: 21 April 2011 - 07:02 AM

Was This Post Helpful? 0
  • +
  • -

#7 lexxe  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 44
  • Joined: 05-December 10

Re: Drop down menu help(HTML, CSS, and a wee bit o javascript)

Posted 21 April 2011 - 07:01 AM

HTML:
<div id="menu">
<ul> 
  <li><a href="index.html">Home</a></li> 
  <ul> 
	<li><a href="#">About</a></li> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Offices</a></li> 
    </ul> 
  <li><a href="#">Why Scan?</a> 
    
  </li> 
  <li><a href="#">How It Works</a> 
    
  </li> 
  <li><a href="#">Pricing</a> 
    <ul> 
	<li><a href="#">Services</a></li> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">Internet Marketing</a></li> 
      <li><a href="#">Hosting</a></li> 
      <li><a href="#">Domain Names</a></li> 
      <li><a href="#">Broadband</a></li> 
    </ul> 
  </li> 
  <li><a href="#">FAQ</a> 
    <ul> 
	<li><a href="#">Services</a></li> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">Internet Marketing</a></li> 
      <li><a href="#">Hosting</a></li> 
      <li><a href="#">Domain Names</a></li> 
      <li><a href="#">Broadband</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Contact Us</a> 
    <ul> 
	<li><a href="#">By E-Mail</a></li> 
      <li><a href="#">By Phone</a></li> 
    </ul> 
  </li> 
</ul> 
</div>

CSS:
#menu{
	padding:0;
	margin:0;
	background-color: #FFD273;
	border: 1px solid black;
    width: 756px;
	text-align: center;
	font-size: 75%;
}
#menu ul{
	list-style-type: none;
    margin: 0px;
    padding: 0px;
    display: inline;
}
#menu li{
	position: relative;
	float: left;
	list-style: none;
	margin: 0;
	padding:0;
}#menu li a{
	width:126px;
	height: 25px;
	display: block;
	text-decoration:none;
	text-align: center;
	line-height: 25px;
	background-color: #FFD273;
	color: #000000;
}
#menu li a:hover{
	background-color: #A6A000;
}
#menu ul ul{
	position: absolute;
	top: 25px;
	visibility: hidden;
}
#menu ul li:hover ul{
	visibility:visible;
}
body{
	behavior: url(csshover2.htc);
}

Was This Post Helpful? 0
  • +
  • -

#8 Nykc  Icon User is offline

  • Gentleman of Leisure
  • member icon

Reputation: 725
  • View blog
  • Posts: 8,638
  • Joined: 14-September 07

Re: Drop down menu help(HTML, CSS, and a wee bit o javascript)

Posted 21 April 2011 - 07:14 AM

deleting the display:inline in the #menu ul will take away the shifting of the drop-down.

Is that what you are referring to?
Was This Post Helpful? 1
  • +
  • -

#9 lexxe  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 44
  • Joined: 05-December 10

Re: Drop down menu help(HTML, CSS, and a wee bit o javascript)

Posted 21 April 2011 - 08:17 AM

Much thanks. Works like a dream now!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1