Help using JS with CSS and HTML - Drop down Menu for website

I’m trying to build a drop down menu. Do I need to incorporate JS to get it to work. My brain is scrambled trying to work it out and looking at different sites. ! Can someone please help me with my code for my website menu? Thanks.

Hi Puzzle1. Welcome to the forums. :slight_smile:

No, you can do a drop down menu with CSS alone, as demonstrated here:

http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

(View the source code of that page to see how it works. There isn’t much. :slight_smile: )

You can use JS to enhance the menu, but it’s not needed.

Thank you so much for your help. It’s nice to know there is a helpful human being out there.

Ha ha, there are quite a few around here. :slight_smile:

Let us know how you go with this. If you need any help, just ask. :slight_smile:

Hi! I had a good look at the code and there were some lines that I hadn’t seen before (such as the hack for the mac!). Is it the use of the margins that force the menu to be horizontal? I though if a ul was used that automatically made the list vertical? I current have a vertical menu on the website I created (first ever site!) and I’m still struggling to apply the what you kindly demonstrated yesterday. www.scottishgreatdaneclub.co.uk I know the code is very amateurish but I got to the point where I just thought it works! Leave it alone!

I’d like to be able to have the sub menu on my vertical list? Am I best just starting from scratch, rather than try to edit existing code? As you can tell I’m not very good at this! I also noticed that you used em, % and px? is there a reason for this? I’ve just stuck to px and %.

Many thanks again for your help :slight_smile:

Puzzle1 (Shona)

A UL by default does sit vertically, but there are various ways to change that, such as setting LIs to float: left; (as in the linked example—which is not my site, by the way, but that of our resident guru here, @Paul_O_B; )

An example of a vertical flyout menu is here:

http://www.pmob.co.uk/temp/dropdown-vertical3.htm

However, at the moment you don’t have any nested sublists to fly out. E.g. You need something like this:

<ul>
  <li><a href="http://scottishgreatdaneclub.co.uk/index.html">Home</a></li>
  <li><a href="http://scottishgreatdaneclub.co.uk/history.html">History</a>
        [COLOR="#FF0000"]<ul>
            <li><a href="">Ach aye, sublink 1</a></li>
            <li><a href="">Aye laddeh, sublink 2</a></li>
        </ul>[/COLOR]
  </li>
</ul>

Hi, this is the html code in my new menu along with the CSS:

<!DOCTYPE>
<html>
<head>
<title>Drop Down Menu</title>
<link rel=“stylesheet” href=“menu.css”>
</head>

<body>
<ul class=“nav”>
<li><a href=“#”>Home</a></li>
<li><a href=“#”>The Club</a><li>
<ul class=“dropdown”>
<li><a href=“#”>History</a></li>
<li><a href=“#”>Rules & Regs</a></li>
<li><a href=“#”>Committee</a></li>
<li><a href=“#”>Membership</a></li>
<li><a href=“#”>Contacts</a></li>
</ul>
<li><a href=“#”>Show Info</a></li>
<ul class=“dropdown”>
<li><a href=“#”>CH Show</a></li>
<li><a href=“#”>Open Show</a></li>
<li><a href=“#”>Show Dates</a></li>
<li><a href=“#”>Schedules</a></li>
<li><a href=“#”>Show Archives</a></li>
</ul>
<li><a href=“#”>Judging</a><li>
<ul class=“dropdown”>
<li><a href=“#”>Criteria</a></li>
<li><a href=“#”>SGDC Form</a></li>
<li><a href=“#”>BC Form</a></li>
</ul>
<li><a href=“#”>Club Awards</a><li>
<ul class=“dropdown”>
<li><a href=“#”>2012</a></li>
<li><a href=“#”>2011</a></li>
<li><a href=“#”>2010</a></li>
</ul>
<li><a href=“#”>Rescue</a></li>
<li><a href=“#”>Health</a></li>
<li><a href=“#”>Links</a></li>
<li><a href=“#”>Blog</a></li>
</ul>
</body>
</html>

CSS:

.nav ul {
display;block
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}

.nav li {
display:block;
width:150px;
background-color:#00008B;
list-style:none;
text-align:center;
font-weight:bold;
border-top:1px solid white;
border-bottom:1px solid white;
position:relative;
height:35px;
line-height:35px;
}

.nav a {
text-decoration:none;
color:white;

}

.nav li a:hover {
background-color:#D8BFD8;
font-style:italic;
color:#000000;
}

.dropdown ul {
position:relative;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}

.dropdown ul li {
width:50px;
background-color:#00008B;
list-style:none;
text-align:center;
font-weight:bold;
border-top:1px solid white;
border-bottom:1px solid white;
position:absolute;
height:35px;
line-height:35px;
}

.dropdown ul li a {
text-decoration:none;color:white;

}

.dropdown ul li a:hover {
background-color:#D8BFD8;
font-style:italic;
color:#000000;
}

Then confused myself about where I go from here.

Puzzle1 :slight_smile:

Yeah, some major errors in your HTML and CSS there. Try this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vertical Menu</title>
<style media="all">
body {background: #c6deff;}

ul.nav, .nav ul {
	list-style:none; 
	margin:0; 
	padding:0;
}

.nav li {
	width:150px; 
	background-color:#00008B;
	text-align:center;
	font-weight:bold;
	border-top:1px solid white; 
	border-bottom:1px solid white;
	position:relative;
}

.nav a {
	text-decoration:none;
	color:white;
	display: block;
	background: darkBlue;
	line-height: 35px;
}

.nav li a:hover {
	background:#D8BFD8;
	font-style:italic;
	color:#000000;
}

.nav ul {
	position: absolute;
	top: 0;
	margin-left:-999em;
	min-height:0;
}

.nav li:hover ul { margin-left:149px;} 
</style>
</head>
<body>
<ul class="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">The Club</a>
		<ul>
			<li><a href="#">History</a></li>
			<li><a href="#">Rules & Regs</a></li>
			<li><a href="#">Committee</a></li>
			<li><a href="#">Membership</a></li>
			<li><a href="#">Contacts</a></li>
		</ul>
	</li>
	<li><a href="#">Show Info</a>
		<ul>
			<li><a href="#">CH Show</a></li>
			<li><a href="#">Open Show</a></li>
			<li><a href="#">Show Dates</a></li>
			<li><a href="#">Schedules</a></li>
			<li><a href="#">Show Archives</a></li>	
		</ul>
	</li>
	<li><a href="#">Judging</a>
		<ul>
			<li><a href="#">Criteria</a></li>
			<li><a href="#">SGDC Form</a></li>
			<li><a href="#">BC Form</a></li>
		</ul>
	</li>
	<li><a href="#">Club Awards</a>
		<ul>
			<li><a href="#">2012</a></li>
			<li><a href="#">2011</a></li>
			<li><a href="#">2010</a></li>
		</ul>
	</li>
	<li><a href="#">Rescue</a></li>
	<li><a href="#">Health</a></li>
	<li><a href="#">Links</a></li>
	<li><a href="#">Blog</a></li>
</ul>
</body>
</html>

A few of the errors included:

- not nesting the sub UL inside its parent LI. E.g.

You need this:

<li><a href="#">Club Awards</a>
		<ul>
			<li><a href="#">2012</a></li>
			<li><a href="#">2011</a></li>
			<li><a href="#">2010</a></li>
		</ul>
	[COLOR="#FF0000"]</li>[/COLOR]

not this:

<li><a href="#">Club Awards</a>[COLOR="#FF0000"]</li>[/COLOR]
		<ul>
			<li><a href="#">2012</a></li>
			<li><a href="#">2011</a></li>
			<li><a href="#">2010</a></li>
		</ul>
	

- citing .dropdown ul when the class is on the UL, meaning it should be ul.dropdown (although I remeoved that class anyway, as it was unnecessary).

Wow, huge thanks to you and major respect. :slight_smile: I’ve spent a long time trying to figure this out and I was on the point of nearly giving up. I take my hat off to you. Thank you so much :slight_smile:

Puzzle1

You’re most welcome. Glad I could help. There are lots of helpful folk around here, so I hope we’ll see you back. The menu may need some refining, so don’t hesitate to ask for more help with it. :slight_smile:

Hi, back again! I am unable to get the menu to work properly within my website. As you will see I have removed the scroll box, resized the table cells, deleted the nav.css file (my orignal menu file). I’m not sure what else to try? If I construct a completely new table with no other data in it except the menu, it works perfectly. I’d appreciate your input. Below is my code! I’ve taken a copy of the index.html file and style.css files. Please advise? Thanks.

Puzzle1 (Shona)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Welcome to the Scottish Great Dane Club</title>
<meta name="msvalidate.01" content="9CCBC9C152D72D7379A682909A4D0784" />
<meta http-equiv="content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Scottish Great Dane Club Aims">
<meta name="keywords" content="Scottish; Great; Dane; Club; Scotland; Danes;">

<style media="all">

ul.nav, .nav ul {
	list-style:none;
	margin:0;
	padding:0;
}

.nav li {
	width:150px;
	background-color:#00008B;
	text-align:center;
	font-weight:bold;
	border-top:1px solid white;
	border-bottom:1px solid white;
	position:relative;
}

.nav a {
	text-decoration:none;
	color:white;
	display: block;
	background: darkBlue;
	line-height: 35px;
}

.nav li a:hover {
	background:#D8BFD8;
	font-style:italic;
	color:#000000;
}

.nav ul {
	position: absolute;
	top: 0;
	margin-left:-999em;
	min-height:0;
}

.nav li:hover ul { margin-left:149px;}
</style>


</head>

<body>
<!--Begin table Header and logo-->
<table border="0" width=100% height=20% cellspacing="0">
<tr>
<td class="header"></td>
</tr>
</table>
<!--End Header and logo-->
<!--End table-->

<!--Begin table. Middle border-->
<table border="0" width=100% height=5% cellspacing="0">
<tr>
<td width=70% class="midborder"></td>
</tr>
</table>
<!--End table.-->

<!--Begin table. Navigation Bar-->
<table border="0" width=100% height=70% cellspacing="0">
<tr><td width=25% class="background">
 <ul class="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">The Club</a>
		<ul>
			<li><a href="#">History</a></li>
			<li><a href="#">Rules & Regs</a></li>
			<li><a href="#">Committee</a></li>
			<li><a href="#">Membership</a></li>
		</ul>
	</li>
	<li><a href="#">Show Info</a>
		<ul>
			<li><a href="#">CH Show</a></li>
			<li><a href="#">Open Show</a></li>
			<li><a href="#">Show Dates</a></li>
			<li><a href="#">Schedules</a></li>
			<li><a href="#">Show Archives</a></li>	
		</ul>
	</li>
	<li><a href="#">Judging</a>
		<ul>
			<li><a href="#">Criteria</a></li>
			<li><a href="#">SGDC Form</a></li>
			<li><a href="#">BC Form</a></li>
		</ul>
	</li>
	<li><a href="#">Club Awards</a>
		<ul>
			<li><a href="#">2012</a></li>
			<li><a href="#">2011</a></li>
			<li><a href="#">2010</a></li>
			<li><a href="#">Award Archives</a></li>
		</ul>
	</li>
	<li><a href="#">Rescue</a></li>
	<li><a href="#">Health</a></li>
	<li><a href="#">Contacts</a></li>
	<li><a href="#">Links</a></li>
	<li><a href="#">Blog</a></li>
</ul>
</td>

<!--Begin contents-->

<td width=70%  class="content" valign="top">

<h3><center>Welcome to the Scottish Great Dane Club Website</center></h3>
<p>The Scottish Great Dane Club Aims:</p>
<!--Begin Aims-->
<p>To enhance the profile of Great Danes in Scotland and the UK</p>
<p>To advocate and encourage responsible dog ownership and promote excellence in breeding and exhibiting.</p>
<p>To maintain the breed standard and uphold the values of the Scottish Great Dane Club and the Kennel Club.</p>
<hr>
<p span style="color:#6666FF;font-size=14px;font-family=Verdana";>For regular updates and additions to our website, visit our news page:<a href="http://scottishgreatdaneclub.co.uk/news.html">Club News</a></p><br><hr>
<p>Visitor #<br><img src="http://homepages.plus.net/cgi-bin/count_dyno? bridgethyme_ss";></p>
</div><br>
</td>
<!--End Contents-->

<!Begin Links Box-->
<td width=5% valign="bottom">
 <ul class="linksbox">
    <h4>Quick Links & Forms</h4>
    <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/rulesregs2012.pdf" target="_blank">Rules & Regs</a></li>
    <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/showdates2013.pdf" target="_blank">Show Dates</a></li>
    <li><a href="http://www.scottishgreatdaneclub.co.uk/schedules.html">Schedules</a></li>
    <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/membership.pdf" target="_blank">Membership</a></li>
    <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/somandate.pdf" target="_blank">SO Mandate</a></li>
    <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/sgdccriteria.pdf" target="_blank">Judging Criteria</a></li>
    <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/sgdcjudging.pdf" target="_blank">SGDC Judging</a></li>
    <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/bcjudging.pdf" target="_blank">BC Judging</a></li>
 </ul>
</td>
</tr>
</table>
<!End links Box-->
<!End table-->

<Begin table. Footer-->
<table border="0" width=100% height=5% div class="footer" cellspacing="0">
<tr><td>Scottish Great Dane Club &#xA9; 2012 Design by Shona Owens</td>
</tr>
</table>
<!--End footer-->
<!End Table-->

</body>
</html>
.header {
	background-image:url("images/Final2.jpg");
	background-repeat:no-repeat;
	background-position:center;
	background-color:#FFFFFF;
	margin:auto;
	padding:10px;
	
}

.midborder {
	background-image:url("images/SGDC Tartan Dark.jpg");
	Background-repeat:repeat x;
	padding:0;
}




h3 {
	font-family:Verdana Arial;
	font-size:14px;
	color:#6666FF;
	text-align:left;
	padding:0px;

}

.content {
   	font-family:Verdana;
	font-size:14px;
	color:#000;
	text-align:left;
	padding:15px;
}

.clublinks {
	font-family:Verdana Arial;
	font-size:14px;
	line-height:20px;
	text-align:left;
	list-style:none;
	padding:10px;
}

.clublinks a {
	color:#00008B;
}


.clublinks a:visited {
	color:#00008B;

}


h4 {
	font-family:Verdana;
	font-size:12px;
	color:6666FF;
	text-align:center;
	padding:0;
}



.linksbox {
	font-family:Verdana Arial;
	width:150px;
	border:1px solid #C6DEFF;
	font-size:14px;
	line-height:20px;
	text-align:left;
	list-style:none;
	padding:10px;
}

.linksbox a {
	text-decoration:none;
	color:#00008B;
	font-size:14px;


}

.linksbox a:visited {
	color:#00008B;

}

.footer {
	background-color:#C6DEFF;
	font-family:Verdana Arial;
	font-size:13px;
	font-weight:bold;
	text-align:center;
	color:#000;
	padding:0;
}

Could you provide an updated link? On this page:

http://www.scottishgreatdaneclub.co.uk/

you don’t have the code you show above. You just have an unordered list (<ul>) with not sub uls.

Hi, that’s the home page (index.html) updated only. I’ve also removed the css file that calls my previous menu from this page only. I really appreciate this. Many thanks.

Puzzle1 (Shona)

OK, the menu seems to be working now. Is all well now, or do you still see issues?

Glad it’s back again. :slight_smile:

Hi, I only uploaded the menu after you said as I didn’t want to work on the website live. The drop down part isn’t working! Please help!! Thanks.

Shona

It’s working perfectly for me now. Make sure to refresh your browser / clear your cache etc. If that doesn’t help, what browser are you using?

Hi, I’m using IE 9 The menu works fine, till I put it into the website, that’s why I am thinking there is something wrong with my code? Thanks.

Shona

The menu works OK in IE9 for me. Did you try those steps I suggested?

Hi, Yes I did try them. It works fine in chrome, but not in IE. Had a couple of friends try in IE (incase I’m having a ‘thick’ day) and the sub menu definitely doesn’t appear.

Thanks.

Shona

Hm, it seems your page is going into Quirks mode in IE some of the time. That means that it is not recognizing your doctype at the top of the page, so something is going wrong with that. What do you see in your HTML? Is it this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<html>
<head>

If so, try changing it to this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>