纵向、横向导航菜单及二级弹出菜单

一、纵向导航菜单及二级弹出菜单

首先在body中添加一个div标签，其中包含ulli ul的标签结构存放网站菜单，效果如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


  
    
    
	
	
	    
	
	
  
  
    

    	

    		
首页
    		
赛事指南
    			

		    		
竞赛规程
		    		
报名须知
		    		
参赛声明
		    		
比赛路线
		    	
		    
		
    		
赛事介绍
    			

    				
赛事简介
	    			
特色活动
	    			
精彩回顾
    			
    		
    		
赛事报名
    			

    				
我的报名
		    		
号码查询
		    		
成绩查询
		    		
证书查询
		    		
照片查询
    			
    		
	
    		
合作伙伴
    			

    				
冠名赞助商
		    		
官方赞助商
		    		
赛事支持商
		    		
公益合作伙伴
		    		
合作媒体
    			
    		
	
    	
    
  

图中效果是标签自带的样式，现在需要先将默认样式清除，再添加自己的样式，在Head标签中添加css代码：

下面是将同一子菜单下的菜单移动位置变为父级菜单的一部分，这里需要用到position属性。

1.position:relative;如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）

2.position:absolute;表示绝对定位，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）

3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角。

4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右。

我们要实现的效果是子菜单不占据空间，所以可以使用position:absolute;让子元素脱离文档流，使用left和top属性确定子菜单相对于父级菜单的位置。然后父级菜单使用position:relative;来固定在文档流中。

/*设置父级菜单样式*/
#menu ul li{background:#eee;padding:0px 7px;height:25px;line-height:25px;border-bottom:1px solid #CCC;position:relative;}
/*设置子菜单样式*/
#menu ul li ul{display:none;position:absolute;left:100px;top:0px;width:100px;border:1px solid #CCC;}

这里由于需要隐藏和显示子菜单，所以涉及到display属性。

display:none;不显示元素

display:block;可以将行内标签变为块标签，占据一行

display:inline;可以将块标签变为行内标签，占据一行内的一部分位置

我们需要实现，当鼠标悬浮到父级菜单上时显示子菜单，当鼠标离开父级菜单时隐藏子菜单，因此可以使用display的none属性隐藏菜单，当鼠标移动到父级菜单上时使用display:block显示菜单。

/*鼠标移动到父级菜单时显示子菜单*/
#menu ul li:hover ul{display:block;}

最后的页面代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


  
    
    
	
	
	    
	
	
	
  
  
    

    	

    		
首页
    		
赛事指南
    			

		    		
竞赛规程
		    		
报名须知
		    		
参赛声明
		    		
比赛路线
		    	
		    
		
    		
赛事介绍
    			

    				
赛事简介
	    			
特色活动
	    			
精彩回顾
    			
    		
    		
赛事报名
    			

    				
我的报名
		    		
号码查询
		    		
成绩查询
		    		
证书查询
		    		
照片查询
    			
    		
	
    		
合作伙伴
    			

    				
冠名赞助商
		    		
官方赞助商
		    		
赛事支持商
		    		
公益合作伙伴
		    		
合作媒体
    			
    		
	
    	
    
  

二、横向导航菜单及二级菜单

横向菜单和纵向菜单类似

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


  
    
    
	
	
	    
	
	
	
  
  
  	

    	

    		
首页
    		
赛事指南
    			

		    		
竞赛规程
		    		
报名须知
		    		
参赛声明
		    		
比赛路线
		    	
		    
		
    		
赛事介绍
    			

    				
赛事简介
	    			
特色活动
	    			
精彩回顾
    			
    		
    		
赛事报名
    			

    				
我的报名
		    		
号码查询
		    		
成绩查询
		    		
证书查询
		    		
照片查询
    			
    		
	
    		
合作伙伴
    			

    				
冠名赞助商
		    		
官方赞助商
		    		
赛事支持商
		    		
公益合作伙伴
		    		
合作媒体