二级菜单

在网上下了一些源码，其子菜单是纵向的，想改成横向的，应该如何改，谢谢！
源码如下：
<%@page contentType="text/html;charset=gb2312"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title></title>
<style type="text/css">
/* 顶层列表的样式*/
.menu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/* 顶层列表*/
.menu ul li{
position: relative;
display: inline;
float: left;
background-color: #F3F3F3; /*overall menu background color*/
}/*顶层列表的链接样式*/
.menu ul li a{
display: block;
width: 90px; /*Width of top level menu link items*/
padding: 1px 8px;
border: 1px solid black;
border-left-width: 0;
text-decoration: none;
color: navy;
}/*1级列表菜单的样式*/
.menu ul li ul{
left: 0;
position: absolute;
top: 1em;
display: block;
visibility: hidden;
}/*1级子列表菜单 */
.menu ul li ul li{
display: list-item;
float: none;
}/* 1级子菜单链接样式*/
.menu ul li ul li a{
display: block;
width: 160px; /*子菜单宽度*/
color: navy;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}/* 鼠标移上去时的样式*/
.menu ul li a:hover{
background-color: black;
color: white;
}/* 设置背景图片样式 */
.menu .mainfoldericon{
background: #F3F3F3 url(1.gif) no-repeat center right;
}
/* 设置背景图片样式 */
.menu .subfoldericon{
background: #F3F3F3 url(2.gif) no-repeat center right;
}
}
</style>
<script type="text/javascript">
var menuids=["menu1"]// 定义主函数
function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
// 获取指定的DIV容器中的列表元素UL
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
   if (ultags[t].parentNode.parentNode.id==menuids[i]){ // 假如是顶级子菜单列表
    ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //则设置它的位置
    // 定义类名，套用CSS样式
    ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
   }
   else{ //假如是子菜单列表(ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //则设置它的位置
    // 定义类名，套用CSS样式
        ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
   }
    // 定义鼠标事件函数
    ultags[t].parentNode.onmouseover=function(){
    // 鼠标移上去时显示其子列表
    this.getElementsByTagName("ul")[0].style.visibility="visible"
    }
    // 鼠标移开时将其隐藏
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.visibility="hidden"
    }
    }
}
}
// 添加页面事件
if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
// attachEvent 方法监视页面中的事件
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
</script>
</head>
<body>
  <div class="menu">
    <ul id="menu1">
      <li><a href="#" style="border-left: 1px solid black">menu 1</a>
        <ul>
          <li><a href="#">Sub menu 1.1</a></li>
        </ul>
      </li>
      <li><a href="#">menu 2</a></li>
      <li><a href="#">menu 3</a>
        <ul>

          <li><a href="#">Sub menu 3.1</a></li>
          <li><a href="#">Sub menu 3.2</a></li>
          <li><a href="#">Sub menu 3.3</a></li>
            <ul>
              <li><a href="#">Sub menu 3.3.1</a></li>
              <li><a href="#">Sub menu 3.3.2</a></li>
              <li><a href="#">Sub menu 3.3.3</a></li>
              <li><a href="#">Sub menu 3.3.4</a></li>
            </ul>
        </ul>
      </li>
      <li><a href="#">menu 4</a></li>
      <li><a href="#">menu 5</a></li>
    </ul>
  </div>
</body>
</html>
          <li><a href="#">Sub menu 3.1</a></li>
          <li><a href="#">Sub menu 3.2</a></li>
          <li><a href="#">Sub menu 3.3</a></li>
此三个子菜单是纵向展示的，想要个横向展示的，应该如何做？自己通过加<td>标签无法完成

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head><body>
<ul id="MenuBar1" class="MenuBarVertical">
  <li><a class="MenuBarItemSubmenu" href="#">项目 1</a>
    <ul>
      <li><a href="#">项目 1.1</a></li>
      <li><a href="#">项目 1.2</a></li>
      <li><a href="#">项目 1.3</a></li>
    </ul>
  </li>
  <li><a href="#">项目 2</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">项目 3</a>
    <ul>
      <li><a class="MenuBarItemSubmenu" href="#">项目 3.1</a>
        <ul>
          <li><a href="#">项目 3.1.1</a></li>
          <li><a href="#">项目 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">项目 3.2</a></li>
      <li><a href="#">项目 3.3</a></li>
    </ul>
  </li>
  <li><a href="#">项目 4</a></li>
</ul>
<script type="text/javascript">

</script>
</body>
</html>
var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
{
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
}
this.windows = this.mac = this.linux = false; this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version; if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
}
};Spry.is = new Spry.BrowserSniff();Spry.Widget.MenuBar = function(element, opts)
{
this.init(element, opts);
};Spry.Widget.MenuBar.prototype.init = function(element, opts)
{
this.element = this.getElement(element);
this.currMenu = null;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
{
return;
} if (Spry.is.ie && Spry.is.version < 7){
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
} this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC; this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true; this.hasFocus = false;
if(opts)
{
for(var k in opts)
{
if (typeof this[k] == 'undefined')
{
var rollover = new Image;
rollover.src = opts[k];
}
}
Spry.Widget.MenuBar.setOptions(this, opts);
}
if (Spry.is.safari)
this.enableKeyboardNavigation = false; if(this.element)
{
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
{
if (i > 0 && this.enableKeyboardNavigation)
items[i].getElementsByTagName('a')[0].tabIndex='-1'; this.initialize(items[i], element);
if(Spry.is.ie)
{
this.addClassName(items[i], this.isieClass);
items[i].style.position = "static";
}
}
if (this.enableKeyboardNavigation)
{
var self = this;
this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
} if(Spry.is.ie)
{
if(this.hasClassName(this.element, this.verticalClass))
{
this.element.style.position = "relative";
}
var linkitems = this.element.getElementsByTagName('a');
for(var i=0; i<linkitems.length; i++)
{
linkitems[i].style.position = "relative";
}
}
}
};
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;Spry.Widget.MenuBar.prototype.getElement = function(ele)
{
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
};Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
{
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
{
return false;
}
return true;
};Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
{
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
};Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
{
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
{
try
{
if (element.addEventListener)
{
element.addEventListener(eventType, handler, capture);
}
else if (element.attachEvent)
{
element.attachEvent('on' + eventType, handler);
}
}
catch (e) {}
};Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
{
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
menu.parentNode.appendChild(layer);

layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
};Spry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu)
{
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
while(layers.length > 0)
{
layers[0].parentNode.removeChild(layers[0]);
}
};Spry.Widget.MenuBar.prototype.clearMenus = function(root)
{
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]); this.removeClassName(this.element, this.activeClass);
};Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
{
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
};Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
{
if(this.currMenu)
{
this.clearMenus(this.currMenu);
this.currMenu = null;
}

if(menu)
{
this.addClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
{
if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
{
menu.style.top = menu.parentNode.offsetTop + 'px';
}
}
if(Spry.is.ie && Spry.is.version < 7)
{
this.createIframeLayer(menu);
}
}
this.addClassName(this.element, this.activeClass);
};Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
{
if(menu)
{
this.removeClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
{
menu.style.top = '';
menu.style.left = '';
}
if(Spry.is.ie && Spry.is.version < 7)
this.removeIframeLayer(menu);
}
};Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
{
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null); if(menu)
this.addClassName(link, this.hasSubClass); if(!Spry.is.ie)
{
listitem.contains = function(testNode)
{
if(testNode == null)
return false; if(testNode == this)
return true;
else
return this.contains(testNode.parentNode);
};
} var self = this;
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false); if (this.enableKeyboardNavigation)
{
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
}
};
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
{
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
};
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
{
this.clearSelection(listitem);
};
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
if (!this.lastOpen)
return; if (el)
{
el = el.getElementsByTagName('a')[0];
var item = this.lastOpen;
while (item != this.element)
{
var tmp = el;
while (tmp != this.element)
{
if (tmp == item)
return;
try{
tmp = tmp.parentNode;
}catch(err){break;}
}
item = item.parentNode;
}
}
var item = this.lastOpen;
while (item != this.element)
{
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
}
this.lastOpen = false;
};
你是要子菜单是横向？
那你还没加JS和CS文件你看到所以是纵向的
你没看到我引用了一个JS和CS文件吗？
嗯，之前没注意到，一会加上js和cs文件试下
  那CS和JS文件要不要我发你