首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

横向导航条页面被撑开,就高手指教解决方法

2012-06-05 
横向导航条页面被撑开,就高手指教本人正在做一个横向导航条,但是下拉菜单总是把页面撑开,试过很多方法都不

横向导航条页面被撑开,就高手指教
本人正在做一个横向导航条,但是下拉菜单总是把页面撑开,试过很多方法都不行,请高手帮我看看,下面是Html代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <link href="App_Themes/StyleSheet.css" rel="stylesheet" type="text/css" />


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
  <title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div class="menulearn" >
<ul >
<li class="MenuLi" ><a href="../Default.aspx"class="mainmenu" cname="主菜单导航" oname="主 页" otype="文字链接">主 页</a>

</li>

<li class="MenuLi" ><a id="mainmenuxx" href="../Default.aspx" onmouseout="Hind(event,'menuxx','mainmenuxx')" onmouseover="ShowMenu('menuxx','mainmenuxx')" class="mainmenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a>
<div id="menuxx" class="menulist" onmouseout="Hind(event,'menuxx','mainmenuxx')" >

<a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a>
<a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a>
<a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" ><span>在线学习</span></a></div>
</li>

<li class="MenuLi" ><a id="mainmenucs" href="" onmouseout="Hind(event,'menucs','mainmenucs')" onmouseover="ShowMenu('menucs','mainmenucs')" class="mainmenu" cname="主菜单导航" oname="在线测试" otype="文字链接">在线测试</a>

<div id="menucs" class="menulist" onmouseout="Hind(event,'menucs','mainmenucs')"></div>

</li>

<li class="MenuLi" ><a href="../buider.aspx" class="mainmenu" cname="主菜单导航" oname="在线论坛" otype="文字链接">在线论坛</a></li>

<li class="MenuLi" ><a href="../Master/Master.aspx" class="mainmenu" cname="主菜单导航" oname="系统管理" otype="文字链接">系统管理</a></li>

</ul>
</div>


<div style=" position:absolute; z-index:1; width:249px; height:200px; border-right:thin dotted; border-top: thin dotted; border-left: thin dotted; border-bottom: thin dotted"><a>测试效果</a><a>测试效果</a><a>测试效果</a><a>测试效果</a><a>测试效果</a><a></a></div>
</form>
</body>
<script type="text/javascript">
function ShowMenu(menu,mainmenu)
{
  if(document.getElementById(mainmenu)&&document.getElementById(mainmenu).className!="CurMenu")
  document.getElementById(mainmenu).className="CurMenu";
  if(document.getElementById(menu)&&document.getElementById(menu).style.visibility!="visible")
  document.getElementById(menu).style.visibility="visible";
}

function Hind(e,menu,mainmenu)
{  
  if(!isMouseToSubMenu(e, menu))
  {
  if(document.getElementById(menu)&&document.getElementById(menu).style.visibility!="hidden")


  document.getElementById(menu).style.visibility="hidden";
  if(document.getElementById(mainmenu)&&document.getElementById(mainmenu).className!="mainmenu")
  document.getElementById(mainmenu).className="mainmenu";
  }
}

function isMouseToSubMenu(e,menu)
{
  if (e.type != 'mouseout')
  return false;
  var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;
  while(reltg && reltg.id != menu)
  reltg = reltg.parentNode;
   
  return reltg;
}
</script>
</html>


这是css代码

body 
{
margin:auto;
}
a
{  
  text-decoration: none;
} /*链接无下划线none,有为underline*/


.menulearn{background:url(../image/main_menu_bg.gif) repeat-x; height:36px;position:relative; z-index:100; }
.mainmenu { float:left;line-height:36px;color:White;width:83px; font-size:14px; font-weight:bold; height:36px; }
.menulearn a:hover {font-size:14px; color:Yellow; }
.menulearn li {display:inline; list-style:none; float:left; text-align:center; }
.MenuLi { width:83px; height:36px;}
.submenu { float:left;line-height:36px;color:Black;width:79px; font-size:14px; font-weight:bold; }
.menulist
{  
float:left;line-height:36px;color:Red;width:79px; font-size:14px; font-weight:bold; visibility :hidden;
border-right: firebrick thin solid; border-left: firebrick thin solid; border-bottom: firebrick thin solid;}
.menulist a:link { font-size:14px; color:#b22222 }
.menulist a:hover { font-size:14px; color:#b22222; background-color:#ffe4e1 }
.menulist a:visited { font-size:14px; color:#b22222; }

.CurMenu {float:left; background:url(../image/main_focusbg.jpg) no-repeat;color:#b22222; text-align:center; height:36px; width:83px; line-height:36px;font-size:14px; font-weight:bold; }

a.CurMenu:link { font-size:14px; color:#b22222;}
a.CurMenu:visited { font-size:14px; color:#b22222;}
a.CurMenu:hover { font-size:14px; color:#b22222;} 

.curMenu_left {float:left; background:url(../../image/main_curmenu_left.gif) no-repeat;width:4px;height:36px;}
.curMenu_right {float:left; background:url(../../image/main_curmenu_right.gif) no-repeat;width:4px;height:36px;}
.curMenu_main {margin-top:0px;float:left; background:url(../../image/main_curmenu_main.gif) repeat-x;color:black; height:36px; width:80px; line-height:38px;font-size:14px; font-weight:bold; }
.curMenu_main a:link { font-size:14px; color:#b22222; }
.curMenu_main a:visited { font-size:14px; color:#b22222; }
.curMenu_main a:hover { font-size:14px; color:#b22222; } 


[解决办法]
怎么把页面撑开了,不明白 楼主的意思。

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <link href="App_Themes/StyleSheet.css" rel="stylesheet" type="text/css" /><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">  <title>无标题页</title>  <style type="text/css">  body  {margin:auto;background:#eee}a{     text-decoration: none;} /*链接无下划线none,有为underline*/.menulearn{ background:url(../image/main_menu_bg.gif) repeat-x; height:36px;position:relative; z-index:100; }.mainmenu { float:left;line-height:36px;color:White;width:83px; font-size:14px; font-weight:bold; height:36px; }.menulearn a:hover {font-size:14px; color:Yellow; }.menulearn li {display:inline; list-style:none; float:left; text-align:center; }.MenuLi { width:83px; height:36px;}.submenu { float:left;line-height:36px;color:Black;width:79px; font-size:14px; font-weight:bold; }.menulist{   float:left;line-height:36px;color:Red;width:79px; font-size:14px; font-weight:bold; visibility :hidden;border-right: firebrick thin solid; border-left: firebrick thin solid; border-bottom: firebrick thin solid;}.menulist a:link { font-size:14px; color:#b22222 }.menulist a:hover { font-size:14px; color:#b22222; background-color:#ffe4e1 }.menulist a:visited { font-size:14px; color:#b22222; }.CurMenu {float:left; background:url(../image/main_focusbg.jpg) no-repeat;color:#b22222; text-align:center; height:36px; width:83px; line-height:36px;font-size:14px; font-weight:bold; }a.CurMenu:link { font-size:14px; color:#b22222;}a.CurMenu:visited { font-size:14px; color:#b22222;}a.CurMenu:hover { font-size:14px; color:#b22222;}  .curMenu_left {float:left; background:url(../../image/main_curmenu_left.gif) no-repeat;width:4px;height:36px;}.curMenu_right {float:left; background:url(../../image/main_curmenu_right.gif) no-repeat;width:4px;height:36px;}.curMenu_main {margin-top:0px;float:left; background:url(../../image/main_curmenu_main.gif) repeat-x;color:black; height:36px; width:80px; line-height:38px;font-size:14px; font-weight:bold; }.curMenu_main a:link { font-size:14px; color:#b22222; }.curMenu_main a:visited { font-size:14px; color:#b22222; }.curMenu_main a:hover { font-size:14px; color:#b22222; }   </style></head><body><form id="form1" runat="server"><div class="menulearn" ><ul ><li class="MenuLi" ><a href="../Default.aspx"class="mainmenu" cname="主菜单导航" oname="主 页" otype="文字链接">主 页</a></li><li class="MenuLi" ><a id="mainmenuxx" href="../Default.aspx" onmouseout="Hind(event,'menuxx','mainmenuxx')" onmouseover="ShowMenu('menuxx','mainmenuxx')" class="mainmenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a><div id="menuxx" class="menulist" onmouseout="Hind(event,'menuxx','mainmenuxx')" ><a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a><a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a><a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" ><span>在线学习</span></a></div></li><li class="MenuLi" ><a id="mainmenucs" href="" onmouseout="Hind(event,'menucs','mainmenucs')" onmouseover="ShowMenu('menucs','mainmenucs')" class="mainmenu" cname="主菜单导航" oname="在线测试" otype="文字链接">在线测试</a><div id="menucs" class="menulist" onmouseout="Hind(event,'menucs','mainmenucs')"></div></li><li class="MenuLi" ><a href="../buider.aspx" class="mainmenu" cname="主菜单导航" oname="在线论坛" otype="文字链接">在线论坛</a></li><li class="MenuLi" ><a href="../Master/Master.aspx" class="mainmenu" cname="主菜单导航" oname="系统管理" otype="文字链接">系统管理</a></li></ul></div><div style=" position:absolute; z-index:1; width:249px; height:200px; border-right:thin dotted; border-top: thin dotted; border-left: thin dotted; border-bottom: thin dotted"><a>测试效果</a><a>测试效果</a><a>测试效果</a><a>测试效果</a><a>测试效果</a><a></a></div></form></body><script type="text/javascript">function ShowMenu(menu,mainmenu){  if(document.getElementById(mainmenu)&&document.getElementById(mainmenu).className!="CurMenu")  document.getElementById(mainmenu).className="CurMenu";  if(document.getElementById(menu)&&document.getElementById(menu).style.visibility!="visible")  document.getElementById(menu).style.visibility="visible";}function Hind(e,menu,mainmenu){     if(!isMouseToSubMenu(e, menu))  {  if(document.getElementById(menu)&&document.getElementById(menu).style.visibility!="hidden")  document.getElementById(menu).style.visibility="hidden";  if(document.getElementById(mainmenu)&&document.getElementById(mainmenu).className!="mainmenu")  document.getElementById(mainmenu).className="mainmenu";  }}function isMouseToSubMenu(e,menu){  if (e.type != 'mouseout')  return false;  var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;  while(reltg && reltg.id != menu)  reltg = reltg.parentNode;      return reltg;}</script></html> 


[解决办法]
提供个思路代码楼主自己改把
将导航栏目设置成position:absolute;
然后将正文设置成position:relation;
top:栏目高度;
[解决办法]
您把二级下拉菜单加上个背景后,就可以看出来其实是在下面的DIV上面的,那只是您的视觉差别而已

HTML code
<!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 runat="server"><title>无标题页</title><link href="App_Themes/StyleSheet.css" rel="stylesheet" type="text/css" /><style type="text/css">body {margin:auto;}a{    text-decoration: none;} /*链接无下划线none,有为underline*/.menulearn{ background:url(../image/main_menu_bg.gif) repeat-x; height:36px;position:relative; z-index:100; }.mainmenu { float:left;line-height:36px;color:#000;width:83px; font-size:14px; font-weight:bold; height:36px; }.menulearn a:hover {font-size:14px; color:Yellow; }.menulearn li {display:inline; list-style:none; float:left; text-align:center; }.MenuLi { width:83px; height:36px;}.submenu { float:left;line-height:36px;color:Black;width:79px; font-size:14px; font-weight:bold; }.menulist{  float:left;line-height:36px;color:Red;width:79px; font-size:14px; font-weight:bold; visibility :hidden; border: firebrick thin solid; background:#eee;/*您把二级下拉菜单加上个背景后,就可以看出来其实是在下面的DIV上面的,那只是您的视觉差别而已*/}.menulist a:link { font-size:14px; color:#b22222 }.menulist a:hover { font-size:14px; color:#b22222; background-color:#ffe4e1 }.menulist a:visited { font-size:14px; color:#b22222; }.CurMenu {float:left; background:url(../image/main_focusbg.jpg) no-repeat;color:#b22222; text-align:center; height:36px; width:83px; line-height:36px;font-size:14px; font-weight:bold; }a.CurMenu:link { font-size:14px; color:#b22222;}a.CurMenu:visited { font-size:14px; color:#b22222;}a.CurMenu:hover { font-size:14px; color:#b22222;} .curMenu_left {float:left; background:url(../../image/main_curmenu_left.gif) no-repeat;width:4px;height:36px;}.curMenu_right {float:left; background:url(../../image/main_curmenu_right.gif) no-repeat;width:4px;height:36px;}.curMenu_main {margin-top:0px;float:left; background:url(../../image/main_curmenu_main.gif) repeat-x;color:black; height:36px; width:80px; line-height:38px;font-size:14px; font-weight:bold; }.curMenu_main a:link { font-size:14px; color:#b22222; }.curMenu_main a:visited { font-size:14px; color:#b22222; }.curMenu_main a:hover { font-size:14px; color:#b22222; }  </style></head><body><form id="form1" runat="server"><div class="menulearn" ><ul ><li class="MenuLi" ><a href="../Default.aspx"class="mainmenu" cname="主菜单导航" oname="主 页" otype="文字链接">主 页</a></li><li class="MenuLi" ><a id="mainmenuxx" href="../Default.aspx" onmouseout="Hind(event,'menuxx','mainmenuxx')" onmouseover="ShowMenu('menuxx','mainmenuxx')" class="mainmenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a><div id="menuxx" class="menulist" onmouseout="Hind(event,'menuxx','mainmenuxx')" ><a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a><a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a><a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" ><span>在线学习</span></a></div></li><li class="MenuLi" ><a id="mainmenucs" href="" onmouseout="Hind(event,'menucs','mainmenucs')" onmouseover="ShowMenu('menucs','mainmenucs')" class="mainmenu" cname="主菜单导航" oname="在线测试" otype="文字链接">在线测试</a><div id="menucs" class="menulist" onmouseout="Hind(event,'menucs','mainmenucs')"></div></li><li class="MenuLi" ><a href="../buider.aspx" class="mainmenu" cname="主菜单导航" oname="在线论坛" otype="文字链接">在线论坛</a></li><li class="MenuLi" ><a href="../Master/Master.aspx" class="mainmenu" cname="主菜单导航" oname="系统管理" otype="文字链接">系统管理</a></li></ul></div><div style=" position:absolute; z-index:-1; width:249px; height:200px; border-right:thin dotted; border-top: thin dotted; border-left: thin dotted; border-bottom: thin dotted"><a>测试效果</a><a>测试效果</a><a>测试效果</a><a>测试效果</a><a>测试效果</a><a></a></div></form></body><script type="text/javascript">function ShowMenu(menu,mainmenu){  if(document.getElementById(mainmenu)&&document.getElementById(mainmenu).className!="CurMenu")  document.getElementById(mainmenu).className="CurMenu";  if(document.getElementById(menu)&&document.getElementById(menu).style.visibility!="visible")  document.getElementById(menu).style.visibility="visible";}function Hind(e,menu,mainmenu){    if(!isMouseToSubMenu(e, menu))  {  if(document.getElementById(menu)&&document.getElementById(menu).style.visibility!="hidden")  document.getElementById(menu).style.visibility="hidden";  if(document.getElementById(mainmenu)&&document.getElementById(mainmenu).className!="mainmenu")  document.getElementById(mainmenu).className="mainmenu";  }}function isMouseToSubMenu(e,menu){  if (e.type != 'mouseout')  return false;  var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;  while(reltg && reltg.id != menu)  reltg = reltg.parentNode;     return reltg;}</script></html> 

热点排行