[求助] 请教高手关于这个菜单 [复制链接]

melody831　楼主

新手上路

帖子: 44
体力: 99
威望: 0
居住地: 天津市南开区

发表于 2007-11-28 12:19:39 |显示全部楼层

请教高手关于这个菜单~我做的是和淘宝一摸一样的菜单~在ff下没有问题但是在ie6下~点击之后左半部分橘红色图片就是显示不出来~似乎设置的左边对内补-16px没有起作用~怎么回事呢？
由于这是头文件所以走形就不考虑了调用以后就没问题了~只是ie6下左半部分橘红色图片不显示55

background-color:transparent ;
}
#ChannelMenuItems A SPAN {
	DISPLAY: block;
	FONT-SIZE: 12px;
	background-color:transparent ;
	BACKGROUND: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png) no-repeat right -75px;

FLOAT: left;
	CURSOR: pointer;
	FONT-STYLE: normal;
	HEIGHT: 20px;
	TEXT-ALIGN: center;
	padding-top: 12px;
	padding-right: 22px;

padding-bottom: 1px;
	padding-left: 8px;
}
/* 下级菜单通用 */
#ChannelMenuItems LI#MenuInfo LI A {
	HEIGHT: 30px !important;
	BACKGROUND: none transparent scroll repeat 0% 0%;
}
#ChannelMenuItems LI#MenuInfo LI A SPAN {
	BACKGROUND: none transparent scroll repeat 0% 0%;
	HEIGHT: 21px !important;
	padding: 8px 8px 1px 9px;
}
/*下级菜单第一位*/
#ChannelMenuItems LI#MenuInfo LI.m_first {
	BACKGROUND: none transparent scroll repeat 0% 0%;
}
#ChannelMenuItems LI#MenuInfo LI.m_first A SPAN {
	PADDING-LEFT: 3px;
	BACKGROUND: none transparent scroll repeat 0% 0%
}
/*上级菜单第一位*/

/*上级菜单选中位*/

#ChannelMenuItems LI.c_selectde A {
	PADDING-LEFT: 12px;
	margin: 0px 0px 0px -20px !important;
		background-color: transparent;
	z-index: 10;
	position: relative;
}
#ChannelMenuItems LI.c_selectde A SPAN {
	FONT-SIZE: 12px;
	padding: 10px 24px 3px 7px;
	margin-right: 0px;
	background-image: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png);
		background-color: transparent;
	background-repeat: no-repeat;
	background-position: right -75px;
	font-style: normal;
}*/

/* searchbox */
#SearchBox {
	BACKGROUND: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png) no-repeat 0px -208px;
	WIDTH: 100%;
	POSITION: relative;
	HEIGHT: 60px;
	bottom: 3px;
}
	#SearchInnerBox {
	BACKGROUND: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png) no-repeat right -428px;
	POSITION: relative;
	HEIGHT: 100%;
	}
		#SearchHome {
	POSITION: relative;
	HEIGHT: 58px;
	top: 8px;
	left: 30px;
		}

#searchbox input,#searchbox select {
	vertical-align: middle;
}
#searchbox select {
	height: 22px;
}
#ww {
	font: 12px/17px;
	width: 70px;
	letter-spacing: 0.7em;
}
#ee {
	width: 200px;
}
#rr {
	width: 25%;
}
#SearchForm a {
	color: #FEDEAF;
}
/* searchbox over */

#ChannelMenuItems #tag1 .selectli1 {
	background-image: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png);
	background-position: left -42px;
	color: #FFFFFF;
	text-decoration: none;
	padding-left: 15px;
	background-repeat: no-repeat;
}
#ChannelMenuItems #tag1 .selectli1 .selectspan1 {
	background-image: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png);
	background-position: right -42px;
	padding-top: 10px;
	padding-right: 24px;
	padding-bottom: 3px;
	padding-left: 7px;	
}

#ChannelMenuItems #tag2 .selectli2,#ChannelMenuItems #tag3 .selectli3,#ChannelMenuItems #tag4 .selectli4,#ChannelMenuItems #tag5 .selectli5,#ChannelMenuItems #tag6 .selectli6 {
	background-image: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png);
	background-position: left -75px;
	color: #FFFFFF;
	_float:left;
	_display:block;
	text-decoration: none;
	padding-left: 15px;

background-repeat: no-repeat;
}
#ChannelMenuItems #tag2 .selectli2 .selectspan2,#ChannelMenuItems #tag3 .selectli3 .selectspan3,#ChannelMenuItems #tag4 .selectli4 .selectspan4,#ChannelMenuItems #tag5 .selectli5 .selectspan5,#ChannelMenuItems #tag6 .selectli6 .selectspan6 {
	background-image: url(http://pics.taobao.com/2k7/frontpage/head_bg_sprite_a.png);
	background-position: right -42px;
	padding-top: 10px;
	padding-right: 24px;
	padding-bottom: 3px;
	padding-left: 7px;

}

</style>
<link href="css/ChannelMenu.css" rel="stylesheet" type="text/css" />
<script language="javascript">
function switchTag(tag,content)
{
//	alert(tag);
//	alert(content);
	for(i=1; i <14; i++)
	{
		if ("tag"+i==tag)
		{
			document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
			document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i;
		}else{
			document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
			document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
		}
		if ("content"+i==content)
		{
			document.getElementById(content).className="";
		}else{
			document.getElementById("content"+i).className="hidecontent";
		}
		document.getElementById("content").className=content;
	}
}
//切换搜索类别目录
function changeurl(str){
	$.get('<smart> $site_url </smart>/home/index.php',
			{action:'aj_get_class',search_type:str},
			function(data){
				$('#span_search_cate').html(data);
			}
		);
}
//提交表单，确定搜索路径
function search_submit(){
	var search_form = document.forms['form_search_nav'];
	if(document.getElementById('searchtype').value == 'product'){
		search_form.action='product.php?action=list';  
	 }else if (document.getElementById('searchtype').value == 'shop'){
	 	search_form.action='shop.php?action=list&slcShopClass='+document.getElementById('searchcate').value;  
	 }else{
	 	return false;
	 }
    search_form.method='POST';   
    search_form.submit(); 
}
</script>

<div id="ChannelMenu">
  <ul id="ChannelMenuItems">
    <li id="tag1" > <a href="" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"style="margin:0px"><span class="selectspan1">首页</span></a> </li>
    <li id="tag2"> <a href="" onclick="switchTag('tag2','content2');this.blur();"><span>品牌商店</span></a> </li>
    <li id="tag3"> <a href="" onclick="switchTag('tag3','content3');this.blur();"><span>宝贝类目</span></a> </li>
    <li id="tag4"> <a href="" onclick="switchTag('tag4','content4');this.blur();" target="_top"><span>二手集市</span></a> </li>
    <li id="tag5"> <a href="" onclick="switchTag('tag5','content5');this.blur();"target="_top"><span>闲置物品</span></a> </li>
    <li id="tag6"> <a href="" onclick="switchTag('tag6','content6');this.blur();" target="_top"><span>淘宝社区</span></a> </li>
    
    <li id="MenuInfo">
      <ul>
        <li id="tag7" class="m_first"> <a href="product.php?action=list&pcid=3" onclick="switchTag('tag7','content7');this.blur();" target="_top"><span>手机</span></a> </li>
        <li id="tag8"> <a href="product.php?action=list&pcid=33" onclick="switchTag('tag8','content8');this.blur();" target="_top"><span>女人</span></a> </li>
        <li id="tag9"> <a href="product.php?action=list&pcid=35" onclick="switchTag('tag9','content9');this.blur();"target="_top"><span>男人</span></a> </li>
        <li id="tag10"> <a href="product.php?action=list&pcid=12" onclick="switchTag('tag10','content10');this.blur();" target="_top"><span>运动</span></a> </li>
        <li id="tag11"> <a href="product.php?action=list&pcid=17" onclick="switchTag('tag11','content11');this.blur();" target="_top"><span>家居</span></a> </li>
        <li id="tag12"> <a href="product.php?action=list&pcid=38" onclick="switchTag('tag12','content12');this.blur();" target="_top"><span>母婴</span></a> </li>
        <li id="tag13"> <a href="product.php?action=list&pcid=16" onclick="switchTag('tag13','content13');this.blur();" target="_top"><span>游戏</span></a> </li>
        <li id="tag14"> <a href="product.php?action=list&pcid=42" onclick="switchTag('tag14','content14');this.blur();" target="_top"><span>宠物</span></a> </li>
      </ul>
    </li>
  </ul>
  <div id="content" class="content1">
    <div id="content1"></div>
    <div id="content2" class="hidecontent"></div>
    <div id="content3" class="hidecontent"></div>
    <div id="content4" class="hidecontent"></div>
    <div id="content5" class="hidecontent"></div>
  </div>
  <div id="SearchBox">
    <div id="SearchInnerBox">
      <div id="SearchHome">
        <div id="SearchForm">
          <form method="get" name="form_search_nav" id="form_search_nav" onsubmit="search_submit();">
            
            <select name="searchtype" id="searchtype" onchange="changeurl(this.value)">
              <option value="product" selected="selected">搜索宝贝</option>
              <option value="shop">搜索店铺</option>
              
            </select>
            <input name="keyword" type="text" id="rr" />
            <span id="span_search_cate"><smart> $search_cate </smart></span>
            <input name="ww" type="submit" id="ww" value="搜索" />
            <a href="product.php?action=search">[ 高级搜索 ]</a>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

提示：您可以先修改部分代码再运行

[ 本帖最后由 melody831 于 2007-11-28 12:28 编辑 ]

西部数码顶级域名注册商39元抢注！

使用道具举报