<div>
I don't understand the link you posted or at least it does not match up with what you are trying to achieve. 
 
If you have 3 div's each one column. &nbsp;You could use ajax to grab all choices starting with &quot;a&quot; and place in column 2 and so on. &nbsp;Or with a page refresh, send to the url and grab the querystring. 
 

<pre><code class="code-10 nolinks" id="code-20-39888712-1">&lt;div id=&quot;col1&quot;&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href=&quot;&quot;&gt;a&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;&quot;&gt;b&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;&quot;&gt;c&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;&quot;&gt;z&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
&lt;div id=&quot;col2&quot;&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Choices from Col1&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Choices from Col1&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Choices from Col1&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Choices from Col1&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
&lt;div id=&quot;col1&quot;&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Choices from Col2&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Choices from Col2&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Choices from Col2&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;&quot;&gt;Choices from Col2&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
</code></pre>
 
If the total choices are not very many, I would just send all choices to the browser at once and use js/jquery to display. I have used chained many times <a href="http://www.appelsiini.net/projects/chained" rel="ugc">http://www.appelsiini.net/projects/chained</a>. &nbsp;If you end up having to send 1000 choices to the browser at once, that may be slow. &nbsp;But sending 50 or 100 options may be ok. &nbsp;Then you could let people make multiple choices from col1,2 and 3 without hitting the db each time. &nbsp;Or you could have it hardcoded. 
 
 
From the sample code, you can see it is easy to set up. &nbsp;They just use the class from the first column to populate the 2nd and so on. 

<pre><code class="code-10 nolinks" id="code-20-39888712-2">&lt;select id=&quot;mark&quot; name=&quot;mark&quot;&gt;
 &lt;option value=&quot;&quot;&gt;--&lt;/option&gt;
 &lt;option value=&quot;bmw&quot;&gt;BMW&lt;/option&gt;
 &lt;option value=&quot;audi&quot;&gt;Audi&lt;/option&gt;
&lt;/select&gt;
&lt;select id=&quot;series&quot; name=&quot;series&quot;&gt;
 &lt;option value=&quot;&quot;&gt;--&lt;/option&gt;
 &lt;option value=&quot;series-3&quot; class=&quot;bmw&quot;&gt;3 series&lt;/option&gt;
 &lt;option value=&quot;series-5&quot; class=&quot;bmw&quot;&gt;5 series&lt;/option&gt;
 &lt;option value=&quot;series-6&quot; class=&quot;bmw&quot;&gt;6 series&lt;/option&gt;
 &lt;option value=&quot;a3&quot; class=&quot;audi&quot;&gt;A3&lt;/option&gt;
 &lt;option value=&quot;a4&quot; class=&quot;audi&quot;&gt;A4&lt;/option&gt;
 &lt;option value=&quot;a5&quot; class=&quot;audi&quot;&gt;A5&lt;/option&gt;
&lt;/select&gt;
</code></pre>
</div>

<div>
I have the 3-column &lt;div&gt; structure in place and all my A-Z items in a &lt;ul&gt; in the first &lt;div&gt;. Columns 2 and 3 will have to be populated dynamically from the database - there are approx 1000 entries at the moment but this will grow. I'm new to web dev so need some pretty detailed guidance on how to take this forward using AJAX to grab the data for the next column (coming from SQL Server). 
 
I'm building this in ASP.Net by the way, if that changes things.
</div>

<div>
I think 1000 entries is too much to send to the browser. 
 
What would happens is you would pick a letter in column one. That would send an ajax call to populate column 2 and so on.
</div>

<div>
OK, but what I need to know is how AJAX calls and returns data from SQL Server, then iterates that to populate the second &lt;ul&gt;.
</div>

<div>
Here is a working sample of what I am talking about &nbsp;<a href="http://jsbin.com/gusebitu/1/edit" rel="ugc">http://jsbin.com/gusebitu/1/edit</a> 
 
This is using jquery ajax <a href="https://api.jquery.com/jQuery.ajax/" rel="ugc">https://api.jquery.com/jQuery.ajax/</a> 
 
The first column you would populate on page load 
 
The 2nd column would populate by clicking a letter. &nbsp;In my sample, I am hitting the url &nbsp; &nbsp; '<a href="http://jsbin.com/hutiyike/1.js" rel="ugc">http://jsbin.com/hutiyike/1.js</a>. &nbsp;This is static data and in your case could be php/asp. &nbsp;Notice I am passing the variable id. &nbsp;The get really looks like <a href="http://jsbin.com/hutiyike/1.js?id=a" rel="ugc">http://jsbin.com/hutiyike/1.js?id=a</a>&nbsp; or somepage.php?id=a. &nbsp;Use your own logic to grab all the &quot;a&quot; words. 
 
The 2nd pass does the same thing but a little different. I am passing an attribute data-item. This would be generated by your serverside code. &nbsp;You can grab the data from that by using jquery attr(&quot;data-item&quot;). &nbsp;The -item can be whatever you want to call it. &nbsp;This would hit your 2nd url that will get us the next set of results for the last column. 
 
 
 

<pre><code class="code-10 nolinks" id="code-20-39892199-1">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src=&quot;http://code.jquery.com/jquery-1.10.2.min.js&quot;&gt;&lt;/script&gt;
 &lt;meta charset=&quot;utf-8&quot;&gt;
 &lt;title&gt;JS Bin&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div class=&quot;col&quot;&gt;
 &lt;ul class=&quot;first&quot;&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;A&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;B&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;C&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 &lt;div class=&quot;col two&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;col three&quot;&gt;&lt;/div&gt;
 
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<pre><code class="code-10 nolinks" id="code-20-39892199-2">// http://jsbin.com/hutiyike/1.html
// sample data
//&lt;li&gt;&lt;a href=&quot;#&quot; data-item=&quot;1&quot;&gt;Aardvark&lt;/a&gt;&lt;/li&gt;
//&lt;li&gt;&lt;a href=&quot;#&quot; data-item=&quot;2&quot;&gt;Aardwolf&lt;/a&gt;&lt;/li&gt;
//&lt;li&gt;&lt;a href=&quot;#&quot; data-item=&quot;3&quot;&gt;Aasvogel&lt;/a&gt;&lt;/li&gt;

//http://jsbin.com/yupiwolu/1.html
//sample data
//&lt;li&gt;&lt;a data-item=&quot;1&quot;&gt;col 3 A&lt;/a&gt;&lt;/li&gt;
//&lt;li&gt;&lt;a data-item=&quot;2&quot;&gt;col 3 B&lt;/a&gt;&lt;/li&gt;
//&lt;li&gt;&lt;a data-item=&quot;3&quot;&gt;col 3 C&lt;/a&gt;&lt;/li&gt;
$(function () {
 // first column select
 $('.first li a').click(function (e) {
 e.preventDefault();
 var firstLetter = $(this).text();


 $.ajax({
 type: 'get',
 url: 'http://jsbin.com/hutiyike/1.js',
 dataType: &quot;html&quot;,
 data: {
 id: firstLetter
 }
 }).done(function (msg) {
 $('div.two').html('&lt;ul&gt;' + msg + '&lt;/ul&gt;');

 $('.two ul li a').click(function () {
 theData = $(this).attr('data-item');
 $.ajax({
 type: 'get',
 url: 'http://jsbin.com/yupiwolu/1',
 dataType: &quot;html&quot;,
 data: {
 id: theData
 }
 }).done(function (msg) {
 $('div.three').html('&lt;ul&gt;' + msg + '&lt;/ul&gt;');

 });
 });


 }); // ajax




 }); //click



});
</code></pre>
<pre><code class="code-1 nolinks" id="code-20-39892199-3">.col{width:100px;float:left;margin-right:10px;border-left-style:solid;min-height:100px;
</code></pre>
</div>

<div>
Dealing with the AJAX call first - I'm getting an undefined error. 
 
I've created a function in the code-behind file (HomePage.aspx.vb) to run a parameterised query on the database using the letter clicked in the list as the parameter. It returns the data (a list of categories beginning with the letter clicked) as xml. 
 

<pre><code class="code-10 nolinks" id="code-20-39894712-1">&lt;WebMethod()&gt;
 Public Shared Function GetCategory(letter As String) As String
 Using dtb As New DataTable
 Using myConn As New dbConn
 Using conn As SqlConnection = myConn.cnn
 Dim strCmd As String = &quot;SELECT Category FROM T_Categories WHERE Letter = '&quot; + letter + &quot;'&quot;
 Using dap As New SqlDataAdapter(strCmd, conn)
 dap.Fill(dtb)
 Using sw As StringWriter = New StringWriter()
 dtb.TableName = letter &amp; &quot;_Categories&quot; 'or next line fails
 dtb.WriteXml(sw, XmlWriteMode.IgnoreSchema)
 Return sw.ToString
 End Using
 End Using
 End Using
 End Using
 End Using
 End Function
</code></pre>
 
This works in VB but I run into problems when I call this with AJAX. You can see below that I've set it up to give me basic feedback so I know if I'm on the right track, but it just gives me 'error'. 
 

<pre><code class="code-10 nolinks" id="code-20-39894712-2">&lt;script type=&quot;text/javascript&quot;&gt;
 $(document).ready(function () {

 $(&quot;#A2Z li&quot;).click(function (e) {
 e.preventDefault();
 var Letter = $(this).text();

 $.ajax({
 type: &quot;GET&quot;,
 url: &quot;HomePage.aspx.vb/GetCategory&quot;,
 data: Letter,
 contentType: &quot;application/json; charset=utf-8&quot;,
 dataType: &quot;json&quot;,
 success: function (response) {
 alert(&quot;success&quot;);
 },
 failure: function (response) {
 alert(&quot;failure&quot;);
 },
 error: function (response) {
 alert(&quot;error&quot;);
 }
 });
 });
 });
&lt;/script&gt;
</code></pre>
</div>

<div>
Can you please post a link to your working sample? 
 
I am not a .net developer, I am sorry if this is a dumb question, but you have the url going to a .vb, is that correct? 
 

<pre><code class="code-1 nolinks" id="code-20-39894775-1">url: &quot;HomePage.aspx.vb/GetCategory&quot;,
</code></pre>
 
The url should be something you can surf to. &nbsp;My guess is you need to use the .aspx page.
</div>

<div>
I'm inching forward with this. My AJAX call is now successfully returning data from my VB function. I had to change the format of the AJAX data parameter to '{letter: &quot;' + Letter + '&quot; }', and point to the correct file - as you said. So the first section of my JQuery looks like this: 
 

<pre><code class="code-10 nolinks" id="code-20-39897212-1">$(function () {

 $(&quot;#A2Z li&quot;).click(function (e) {
 e.preventDefault();
 var Letter = $(this).text();
 
 $.ajax({
 type: &quot;POST&quot;,
 url: &quot;HomePage.aspx/GetCategory&quot;,
 contentType: &quot;application/json; charset=utf-8&quot;,
 data : '{letter: &quot;' + Letter + '&quot; }',
 dataType: &quot;json&quot;,
 success: OnSuccess,
 error: function (xhr, ajaxOptions, thrownError) {
 alert(&quot;Error&quot; + xhr.status);
 },
 failure: function (response) {
 alert(response.d);
 }
 }); //ajax
 });
</code></pre>
 
The data returned (string data type) looks like this: 
 
&lt;Document Element&gt; 
&nbsp; &nbsp; &lt;Categories&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Category&gt;Item A&lt;Category&gt; 
&nbsp; &nbsp; &lt;Categories&gt; 
&nbsp; &nbsp; &lt;Categories&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Category&gt;Item B&lt;Category&gt; 
&nbsp; &nbsp; &lt;Categories&gt; 
&lt;Document Element&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
Not very elegant but it's coming through at least. I want to iterate the &lt;Category&gt; nodes and add them as &lt;li&gt; elements to a &lt;ul&gt; I have in my second &lt;div&gt;. The code I have is below but it doesn't work: 
 

<pre><code class="code-1 nolinks" id="code-20-39897212-2">function OnSuccess(response) {
 $xml = $($.parseXML(response));
 $xml.find(&quot;&lt;Category&gt;&quot;).each(function(node){
 var text = $(node).text();
 var myli = $('&lt;li&gt;' + text + '&lt;/li&gt;');
 $('#Categories').append(myli);
 })
})
</code></pre>
</div>

<div>
Work on your xml, it does not appear to be valid. &nbsp;Everything should be closed in the same order it was opened.
</div>

<div>
<div class="content wysiwyg-content">
I want to create a 3-tier hierarchical menu that functions like the one here: <a href="http://css-tricks.com/snippets/" rel="ugc">http://css-tricks.com/snippets/</a> 
 
I want a fixed layout of 3 columns side-by-side. The first column contains letters A-Z. 
Clicking a letter populates the second column - starting from the top, not from the position of the selected letter (so the ASP.Net Menu control is out). The selected item in column 2 then populates column 3, again from the top. 
 
What are the options?
</div>
</div>

I want to create a 3-tier hierarchical menu that functions like the one here: http://css-tricks.com/snippets/ (http://css-tricks.com/snippets/)

I want a fixed layout of 3 columns side-by-side. The first column contains letters A-Z. 
Clicking a letter populates the second column - starting from the top, not from the position of the selected letter (so the ASP.Net Menu control is out). The selected item in column 2 then populates column 3, again from the top.

What are the options?

Dynamic 3-tier vertical menu - how?

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

HTML

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

The successor to Active Server Pages, ASP.NET websites utilize the .NET framework to produce dynamic, data and content-driven web applications and services. ASP.NET code can be written using any .NET supported language. As of 2009, ASP.NET can also apply the Model-View-Controller (MVC) pattern to web applications

ASP.NET

Asynchronous JavaScript and XML (AJAX) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With AJAX, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. HTML and CSS can be used in combination to mark up and style information. The Document Object Model (DOM) is accessed with JavaScript to dynamically display and allow interaction with the information presented.

AJAX

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.