求CSS代码。想要的效果是鼠标划过菜单时弹出的二级菜单相对该选项居中显示。不要常用的左对齐和右对齐。

找过很多网站模板之类的，都是子菜单与相对应的主菜单等宽或与通长于整个菜单条，而且只能左对齐或右对齐。现在想要的就是如图所示的效果：子菜单较主菜单略宽，宽度自适应。并相对于... 找过很多网站模板之类的，都是子菜单与相对应的主菜单等宽或与通长于整个菜单条，而且只能左对齐或右对齐。现在想要的就是如图所示的效果：子菜单较主菜单略宽，宽度自适应。并相对于其对应的主菜单居中显示。
我是新手，以前用DW的层命令堆砌过一个，效果可以，但实在是太繁琐，也不好用。因此特向高手求教，最好是提供直接可用的代码。
常用的网站上都找遍了也没找到，如果不能直接提供代码也请将相应网站的具体实例链接留下。

只要能用一定追加奖励，十分感谢！！！！！！展开

 我来答

2个回答

#合辑# 面试问优缺点怎么回答最加分？

lmj80
2011-08-20 · TA获得超过922个赞

知道小有建树答主

回答量：317

采纳率：0%

帮助的人：136万

我也去答题访问个人页

关注

展开全部

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<style>
body{background:#000;margin:0;padding:50px;position:}
ul,li,hr{margin:0;padding:0;float:left;list-style:none;}
a{font-size:12px;font-weight:normal;font-family:"宋体";color:#999;text-decoration:none;text-

align:center;}
a:hover{color:orange;}
#nav{height:32px;background:#eee;width:100%;}
#nav a,#nav a.hover{width:88px;height:32px;float:left;color:#444;font:12px;font-weight:bold;

font-family:tahoma;text-decoration:none;line-height:32px;text-align:center;display:block;

border-right:1px solid #f5f2f0;border-left:1px solid #e0e0e0;}
#nav a:hover,#nav a.hover{background:orange;color:#fff;}
hr{width:100%;height:0px;border:none;border-top:1px solid #fff;overflow:hidden;

font-size:1px;display:block;clear:both;line-height:1px;}
*html hr{margin-bottom:-14px;}
hr.h1{border-color:#777;}
hr.h2{border-color:#555;}
hr.h3{border-color:#333;}
#cbox{position:absolute;top:82px;left:50px;}
#cbox ul{width:150px;background:#333;position:absolute;display:none;}
#cbox ul li{display:block;}
#cbox ul a{width:150px;height:25px;line-height:25px;border-bottom:1px solid #222;display:block;}
#cbox ul a:hover,#cbox ul a.hover{background:#444;color:orange;}
#cbox ul.cb{width:120px;}
#cbox ul.cb li a{width:120px;height:27px;line-height:27px;font-weight:bold;}
</style>
<body>
<div id="navbox">
<ul id="nav">
<li><a href="#">电影</a></li>
<li><a href="#">剧集</a></li>
<li><a href="#">动漫</a></li>
<li><a href="#">综艺</a></li>
<li><a href="#">游戏</a></li>
</ul>

<hr class="h1"></hr>
<hr class="h2"></hr>
<hr class="h3"></hr>
<div id="cbox">
<ul id="c1" class="cb">
<li><a href="#">新片    ></a></li>
<li><a href="#">高清    ></a></li>
<li><a href="#">内地    ></a></li>
<li><a href="#">港台    ></a></li>
<li><a href="#">欧美    ></a></li>
<li><a href="#">日韩    ></a></li>
</ul>
<ul id="c2" class="cb">
<li><a href="#">最新    ></a></li>
<li><a href="#">娱乐    ></a></li>
<li><a href="#">新闻    ></a></li>
<li><a href="#">晚会    ></a></li>
<li><a href="#">体育    ></a></li>
<li><a href="#">科教    ></a></li>
</ul>
<ul id="c3" class="cb">
<li><a href="#">最新    ></a></li>
<li><a href="#">电视版  ></a></li>
<li><a href="#">剧场版  ></a></li>
<li><a href="#">OVA     ></a></li>
<li><a href="#">原创    ></a></li>
</ul>
<ul id="c1_1">
<li><a href="#">《将爱情进行到底》</a></li>
<li><a href="#">《戒烟不戒酒》</a></li>
<li><a href="#">《朱莉娅的眼睛》</a></li>
<li><a href="#">《寻龙夺宝》</a></li>
</ul>
<ul id="c1_2">
<li><a href="#">《爱你一万年》</a></li>
<li><a href="#">《人体蜈蚣》</a></li>
<li><a href="#">《一一》</a></li>
</ul>
<ul id="c1_3">
<li><a href="#">《霸王别姬》</a></li>
<li><a href="#">《星月童话》</a></li>
<li><a href="#">《我知女人心》</a></li>
<li><a href="#">《武林外传》</a></li>
<li><a href="#">《风月》</a></li>
</ul>
<ul id="c1_4">
<li><a href="#">《前度》</a></li>
<li><a href="#">《猛男滚死队》</a></li>
<li><a href="#">《失业生》</a></li>
<li><a href="#">《婚前试爱》</a></li>
</ul>
<ul id="c1_5">
<li><a href="#">《美人计》</a></li>
<li><a href="#">《绿野仙踪》</a></li>
<li><a href="#">《乞力马扎罗的雪》</a></li>
<li><a href="#">《88分钟》</a></li>
<li><a href="#">《兰戈》</a></li>
<li><a href="#">《盗梦空间》</a></li>
<li><a href="#">《机械师》</a></li>
</ul>
<ul id="c1_6">
<li><a href="#">《攻壳机动队》</a></li>
<li><a href="#">《女教授的隐秘魅力》</a></li>
<li><a href="#">《天使之恋》</a></li>
<li><a href="#">《妈妈要出嫁》</a></li>
<li><a href="#">《告白》</a></li>
</ul>
<ul id="c2_1">
<li><a href="#">《美人心计》</a></li>
<li><a href="#">《生活大爆炸》</a></li>
<li><a href="#">《画皮》</a></li>
<li><a href="#">《实习医生格蕾》</a></li>
<li><a href="#">《恋爱SOS》</a></li>
</ul>
<ul id="c2_2">
<li><a href="#">《宫锁心玉》</a></li>
<li><a href="#">《爱似百汇》</a></li>
<li><a href="#">《借枪》</a></li>
</ul>
<ul id="c2_3">
<li><a href="#">《爱情公寓》第一季</a></li>
<li><a href="#">《回家的诱惑》</a></li>
<li><a href="#">《梨花泪》</a></li>
<li><a href="#">《风声传奇》</a></li>
<li><a href="#">《女娲传说之灵珠》</a></li>
</ul>
<ul id="c2_4">
<li><a href="#">《只有您》</a></li>
<li><a href="#">《犀利人妻》</a></li>
<li><a href="#">《谁家灶头无烟火》</a></li>
<li><a href="#">《女拳》</a></li>
<li><a href="#">《栋笃神探》</a></li>
<li><a href="#">《国民英雄》</a></li>
</ul>
<ul id="c2_5">
<li><a href="#">《幻世浮生》第一季</a></li>
<li><a href="#">《生活大爆炸》第四季</a></li>
<li><a href="#">《实习医生格蕾》第七季</a></li>
<li><a href="#">《吸血鬼日记》第二季</a></li>
<li><a href="#">《尼基塔》第一季</a></li>
<li><a href="#">《绯闻女孩》第四季</a></li>
<li><a href="#">《行尸走肉》第一季</a></li>
</ul>
<ul id="c2_6">
<li><a href="#">《南瓜花的纯情》</a></li>
<li><a href="#">《深夜食堂》</a></li>
<li><a href="#">《樱花心中》</a></li>
<li><a href="#">《天使的诱惑》</a></li>
<li><a href="#">《示谈交渉人》</a></li>
<li><a href="#">《49日》</a></li>
</ul>
<ul id="c3_1">
<li><a href="#">《银魂》第二季</a></li>
<li><a href="#">《变形金刚：领袖》</a></li>
<li><a href="#">《花开伊吕波》</a></li>
</ul>
<ul id="c3_2">
<li><a href="#">《日常》</a></li>
<li><a href="#">《DOG》DAYS</a></li>
<li><a href="#">《花开伊吕波》</a></li>
</ul>
<ul id="c3_3">
<li><a href="#">《空之境界》最终章</a></li>
<li><a href="#">《夏娃的时间》</a></li>
<li><a href="#">《我的女神》</a></li>
<li><a href="#">《破刃之剑》第四章</a></li>
<li><a href="#">《爷爷与花》</a></li>
</ul>
<ul id="c3_4">
<li><a href="#">《黑礁》第三季</a></li>
<li><a href="#">《校园迷糊大王》</a></li>
<li><a href="#">《高智能方程式Sin》</a></li>
</ul>
<ul id="c3_5">
<li><a href="#">《爷爷与花》</a></li>
<li><a href="#">《十年》</a></li>
<li><a href="#">《37137》</a></li>
<li><a href="#">《魇》</a></li>
<li><a href="#">《我叫MT》</a></li>
</ul>
</div>
</div>
</body>
</html>
<script>
var last_pid=last_cid=pid=cid=0;
var a_h=parseInt($("#c1 a").css("height"))+1;
var a_w=parseInt($("#c1 a").css("width"));
var nav_w=parseInt($("#nav li").css("width"));
function showMenu(){
if(cid!=last_cid){
$("#c"+last_pid+"_"+last_cid).hide();
$("#c"+last_pid+" a").eq(last_cid-1).removeClass("hover");
if(cid){
$("#c"+pid+"_"+cid).css("top",(cid-1)*a_h).css("left",(pid-1)*nav_w+a_w-16+"px").show();
$("#c"+pid+" a").eq(cid-1).addClass("hover");
}
last_cid=cid;
}
if(pid!=last_pid){
$("#c"+last_pid).hide();
$("#nav a").eq(last_pid-1).removeClass("hover");
if(pid){
$("#c"+pid).css("left",(pid-1)*nav_w-16).slideDown();
$("#nav a").eq(pid-1).addClass("hover");
}
last_pid=pid;
}
}

$("#nav a").hover(function(){
pid=$("#nav a").index($(this))+1;
cid=0;
showMenu();
},function(){
pid=cid=0;
t=setTimeout("showMenu()",50);
});
$("#cbox").mouseover(function(e){
var obj=e.target;
if($(obj).attr("id")!="cbox"){
var ppobj=$(obj).parent().parent();
var index=ppobj.find("a").index($(obj));
var ppid=ppobj.attr("id");
var str=ppid.substring(1,ppid.length).split("_");
pid=str[0];
if(str.length==2){
cid=str[1];
}else{
cid=index+1;
}
showMenu();
}
}).mouseout(function(e){
var obj=e.target;
if($(obj).attr("id")!="cbox"){
pid=cid=0;
t=setTimeout("showMenu()",50);
}
});
</script>

原文链接:http://hi.baidu.com/lmj80/blog/item/ecea7dff3e750a0009244d3a.html

已赞过 已踩过<

评论收起

ecshopying
2011-08-19 · TA获得超过123个赞

知道答主

回答量：129

采纳率：0%

帮助的人：90.9万

我也去答题访问个人页

关注

展开全部

<!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=gb2312" />
<title>当我吧CSS+XHTML代码</title>
</head>
<style type="text/css">

 body {
	background: #fff;
	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
	font-size: 12px;
}

.menu {
position:relative;
width:750px;
height:2em;
background:#b7c6ac;
border-top:10px solid #b7c6ac;
padding-bottom:1px;
background:#b7c6ac url(drop/line.gif) bottom left repeat-x;
margin-bottom:5em;
}

* html .menu {padding-bottom:0;}

.menu ul{
list-style-type:none;
padding:0;
margin:0 0 0 20px;
width:730px;
height:100%;
}

.menu li{
float:left;
}

.menu table{
position:absolute;
border-collapse:collapse;
left:0;
top:0;
}

.menu a, .menu :visited {
color:#fff;
text-decoration:none;
}
.menu a em.lft, .menu :visited em.lft {
display:block;
float:left;
width:5px;
height:2em;
background: transparent url(drop/lefta.gif);
border-bottom:1px solid #777;
}
.menu a b, .menu :visited b {
display:block;
font-weight:normal;
float:left;
padding:0 10px;
height:2em;line-height:1.9em;
background: transparent url(drop/mida.gif);
cursor:pointer;
border-bottom:1px solid #777;
}
.menu a em.rgt, .menu :visited em.rgt {
display:block;
float:left;
width:5px;
height:2em;
background: transparent url(drop/righta.gif);
border-bottom:1px solid #777;
}

.menu ul ul {
visibility:hidden;
position:absolute;
height:2em;
top:2em;
left:-20px;
width:749px;
border-bottom:1px solid #777;
border-right:1px solid #777;
background:#ccc;
}

.menu :hover {
white-space:normal;
}

.menu a:hover b {
color:#000;
background: transparent url(drop/midb.gif);
border-bottom-color:#ccc;
}
.menu a:hover em.lft {
background: transparent url(drop/leftb.gif);
border-bottom-color:#ccc;
}
.menu a:hover em.rgt {
background: transparent url(drop/rightb.gif);
border-bottom-color:#ccc;
}

.menu li:hover > a b
{
color:#000;
background: transparent url(drop/midb.gif);
border-bottom-color:#ccc;
}
.menu li:hover > a em.lft {
background: transparent url(drop/leftb.gif);
border-bottom-color:#ccc;
}
.menu li:hover > a em.rgt {
background: transparent url(drop/rightb.gif);
border-bottom-color:#ccc;
}
.menu ul li:hover ul,
.menu ul a:hover ul{
display:block;
visibility:visible;
top:2em;
margin-top:1px;
}

.menu ul :hover ul li {
display:block; 
border-left:1px solid #777; 
background:#ccc; 
height:2em;
}
.menu ul :hover ul li a {
display:block; 
font-size:0.8em; 
height:2em; 
line-height:2.5em; 
width:auto; 
float:left; 
color:#444; 
padding:0 10px;}
.menu ul :hover ul li a:hover {
color:#c00;
}
</style>
<body>

<div class="menu">
<ul>
<li><a href="#nogo" title="John Constable"><em class="lft"></em><b>John Constable</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo" title="The Hay Wain">The Hay Wain</a></li>
<li><a href="#nogo" title="Brighton Beach">Brighton Beach</a></li>
<li><a href="#nogo" title="Malvern Hall">Malvern Hall</a></li>
<li><a href="#nogo" title="Salisbury Cathedral">Salisbury Cathedral</a></li>
<li><a href="#nogo" title="Weymouth Bay">Weymouth Bay</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" title="William Turner"><em class="lft"></em><b>William Turner</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo" title="Fishermen at Sea">Fishermen at Sea</a></li>
<li><a href="#nogo" title="The Shipwreck">The Shipwreck</a></li>
<li><a href="#nogo" title="The Vale of Ashburnham">The Vale of Ashburnham</a></li>
<li><a href="#nogo" title="Crossing the Brook">Crossing the Brook</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" title="Henri Matisse"><em class="lft"></em><b>Henri Matisse</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo" title="The Girl with Green Eyes">The Girl with Green Eyes</a></li>
<li><a href="#nogo" title="The Dream">The Dream</a></li>
<li><a href="#nogo" title="Woman in Blue">Woman in Blue</a></li>
<li><a href="#nogo" title="The Yellow Dress">The Yellow Dress</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" title="Paul Cezanne"><em class="lft"></em><b>Paul Cezanne</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo" title="The Large Bathers">The Large Bathers</a></li>
<li><a href="#nogo" title="Onions and Bottles">Onions and Bottles</a></li>
<li><a href="#nogo" title="Mardi Gras">Mardi Gras</a></li>
<li><a href="#nogo" title="Still Life">Still Life</a></li>
<li><a href="#nogo" title="Boy in a Red Waistcoat">Boy in a Red Waistcoat</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

</body>
</html>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

求CSS代码。想要的效果是鼠标划过菜单时弹出的二级菜单相对该选项居中显示。不要常用的左对齐和右对齐。

其他类似问题

为你推荐：