这样一个功能

楼主，俺给你写出来了。SQL语句。
-- phpMyAdmin SQL Dump
-- version 2.10.0.2
-- http://www.phpmyadmin.net
-- 
-- 主机: localhost
-- 生成日期: 2008 年 04 月 29 日 14:04
-- 服务器版本: 5.0.24
-- PHP 版本: 5.2.1SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";-- 
-- 数据库: `city`
-- -- ---------------------------------------------------------- 
-- 表的结构 `game`
-- CREATE TABLE `game` (
  `ID` int(3) NOT NULL auto_increment COMMENT '自增ID',
  `parentID` int(3) NOT NULL COMMENT '父ID',
  `title` varchar(50) collate utf8_unicode_ci NOT NULL COMMENT '省份或是城市',
  PRIMARY KEY  (`ID`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci COMMENT='地区表' AUTO_INCREMENT=8 ;-- 
-- 导出表中的数据 `game`
-- INSERT INTO `game` (`ID`, `parentID`, `title`) VALUES 
(1, 0, '热门游戏'),
(2, 0, '免费网游'),
(3, 2, '免费网游一'),
(4, 2, '免费网游二'),
(5, 1, '热门游戏1'),
(6, 1, '热门游戏2'),
(7, 1, '热门游戏3');
1.php<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Ajax联动</title> </head> 
<script language="javascript"> // JavaScript Document
function GetXmlHttp(){
var xmlhttp = false;
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E){
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined'){
try{
xmlhttp = new XMLHttpRequest();
}
catch (e){
xmlhttp=false;
}
}
if (!xmlhttp && window.createRequest){
try{
xmlhttp = window.createRequest();
}
catch (e){
xmlhttp=false;
}
}
return xmlhttp;
}
function product_tag(key,tag_id,total,pid){

for (i = 1; i< total; i++)
{
if (i == tag_id)
{
document.getElementById(key + "_tab_" + i).className = "on";
}
else
{
document.getElementById(key + "_tab_" + i).className = "";
}
}

var queryString;
xmlhttp = GetXmlHttp();
xmlhttp.open("POST","1_ajax.php?id="+pid,true);
xmlhttp.onreadystatechange = handleStateChange;
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
xmlhttp.send(queryString);
}

function handleStateChange() {
if(xmlhttp.readyState == 1) {
document.getElementById('index_product_list').style.cssText = "";
document.getElementById('index_product_list').innerHTML = "<div align='center'><img src=templates/default/images/loading.gif></div>";
}
if(xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
document.getElementById('index_product_list').style.cssText = "";
var product_index =  xmlhttp.responseText;
document.getElementById('index_product_list').innerHTML = product_index;
}
}
}
</script>
<style type="text/css">
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.on{font-weight:bold; font-size:16px;
}
</style>
<body> 
<?php
mysql_connect("localhost", "root", "123");
mysql_select_db("city");
mysql_query("set names gb2312");
$sql = "Select * From game where parentID=0";
$result = mysql_query($sql);
?>
<div style=" width:800px;">
<?php
while($arr=mysql_fetch_assoc($result))
{
?>
<LI id=product_tab_<?php echo $arr['ID']?> onMouseOver="product_tag('product',<?php echo $arr['ID']?>,3,<?php echo $arr['ID']?>)" style=" float:left;"><A href="javascript:"><?php echo $arr['title']?></A></LI>&nbsp;
         
      
<?
}
?>
</div>
      
      <DIV id=index_product_list style="float:left;">
  <script language="javascript">product_tag('product',1,3,1);</script>
<!--------产品Ajax------------->
      
      </DIV></body> 
</html> 1_ajax.phpheader("Content-type:text/html; charset=gb2312");
error_reporting(0);
if(isset($_GET['id'])){
mysql_connect("localhost", "root", "123");
mysql_select_db("city");
mysql_query("set names gb2312");
//显示单独新闻
$pid = ereg_replace("[^0-9]","",$_GET['id']);
//if($id=="") $inc_fun->showMsg("非法参数...","notice_list.php");
$sql = "Select * From game where parentID=".$pid."";
$result = mysql_query($sql);
$i=0;
$content="<TABLE cellSpacing=0 cellPadding=0 width=800px border=0 align=left>
  <tr>";
while($arr = mysql_fetch_assoc($result))
{
if($i%4=="0")$content.="</tr><tr>";
$content.= "<td align=center>$arr[title]</td>";
$i++;
}
$content.="</tr>
</table>";
echo $content;
} 

解决方案 »

  1.   

    最后你要运行一下1.php就可以了！
      

  2.   

    可以用Ajax做,但这是Div+css布局出来的...
    你可以看源文件,不需要服务器端的东西<TD vAlign=top><table width="100%" border="0" cellpadding="0" cellspacing="0" background="http://images.17173.com/www/images/2008-fylan-bj.gif">
     <tr>
    <td height="25">
                    <ul id="tab_game_bh">
                        <li id="tab_game_bh1">热门游戏</li>
                        <li id="tab_game_bh2">ABCD</li>
                        <li id="tab_game_bh3">EFGH</li>
                        <li id="tab_game_bh4">IJKL</li>
                        <li id="tab_game_bh5">MNOP</li>
                        <li id="tab_game_bh6">QRST</li>
                        <li id="tab_game_bh7">WXYZ</li>
                        <!--li id="tab_game_bh71">网页游戏</li-->这个例子你看看
    素材名称：　实用流行的自适应宽度的标签导航
    http://sc.cnwebshow.com/daima/20070913/2735.html