作者funnyoo (funny)
看板Web_Design
标题[问题] 请问选单menu的文字置中
时间Tue Oct 29 02:50:38 2013
以此范例@@"
http://demonstration.abgne.tw/jquery/0015/0015_1.html
我把色块宽度拉到100%，但想要让文字置中，不晓得如何做到。
最终成果是想要像下面该网站这样，
上方的黑色bar (首页、jQuery、....在中间这样）
http://ppt.cc/wnxk
请高手帮忙@@"困住了...谢谢^^"
以下是程式码
<style type="text/css">
#menu {
margin: 0;
padding: 0;
list-style: none;
position: relative;
width:100%;
float: left;
background: #000;
}
#menu li {
margin: 0;
padding: 0;
float: left;
border-right: 1px solid #999;
}
#menu li a {
padding: 8px 15px;
display: block;
color: #fff;
text-decoration: none;
}
#menu li ul {
margin: 0;
padding: 8px 0;
list-style: none;
float: left;
position: absolute;
left: 0;
width: 500px;
color: #fff;
background: #06c url('bottom.gif') no-repeat bottom;
display: none;
}
#menu li ul li { border-right: 1px solid; }
#menu li ul li a { display: inline; }
#menu li ul li a:hover { text-decoration: underline; }
</style>
<script type="text/javascript">
$(function(){
// 帮 #menu li 加上 hover 事件
$('#menu>li').hover(function(){
// 先找到 li 中的子选单
var _this = $(this),
_subnav = _this.children('ul');
// 变更目前母选项的背景颜色
// 同时淡入子选单(如果有的话)
_this.css('backgroundColor', '#06c');
_subnav.stop(true, true).fadeIn(400);
} , function(){
// 变更目前母选项的背景颜色
// 同时淡出子选单(如果有的话)
// 也可以把整句拆成上面的写法
$(this).css('backgroundColor', '').children('ul').stop(true,
true).fadeOut(400);
});
// 取消超连结的虚线框
$('a').focus(function(){
this.blur();
});
});
</script>
</head>
<body>
<ul id="menu">
<li><a href="#">jQuery</a>
<ul>
<li><a href="#">应用范例</a></li>
<li><a href="#">使用技巧</a></li>
<li><a href="#">相关资源</a></li>
</ul>
</li>
<li>
<a href="#">CSS</a>
<ul>
<li><a href="#">CSS Hack</a></li>
<li><a href="#">免费图示</a></li>
</ul>
</li>
<li><a href="#">其它网站</a>
<ul>
<li><a href="#">男丁格尔's 脱壳玩</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">Yahoo!奇摩</a></li>
<li><a href="#">原子小金刚</a></li>
</ul>
</li>
<li><a href="#">新年快乐</a></li>
</ul>
<div class="a"></div>
</body>
</html>
<nav class="container-stlye clearfloat">
</nav>
</div>
<div id="wrapper" class="container-stlye clearfloat">
<section id="main">
<div id="content" role="main">
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 36.224.182.119