你的样式设计有问题
你的ul嵌套了
内层的ul a受外层ul a的样式影响
第二个问题
内层ul样式应该用定位做，这样就不占位，否则菜单容易发生位移
我大概改了一下，你看看
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#nav li ul {
display: none
}
#nav li.subMenuDisplay ul {
display: block
}
/* Menu */
#menu {
width: 830px
height: 70px
}
#menu ul {
margin: 0
padding: 0
list-style: none
}
#menu li {
display: inline-block
outline: 1px solid green
}
#menu>ul>li>a {
float: left
width: 166px
height: 73px
padding-top: 35px
text-decoration: none
text-align: center
letter-spacing: -1px
font-size: 24px
color: #333
}
#menu a:hover {
color: #f60
}
</style>
</head>
<body>
<div id="menu">
<ul id="nav">
<li><a href="#" title="">首页</a>
<ul>
<li><a href="#" title="">首页</a></li>
<li><a href="#" title="">首页</a></li>
<li><a href="#" title="">首页</a></li>
</ul>
</li>
<li><a href="#" title="">图片</a>
<ul>
<li><a href="#" title="">首页</a></li>
<li><a href="#" title="">首页</a></li>
<li><a href="#" title="">首页</a></li>
</ul>
</li>
<li><a href="#" title="">视频</a>
<ul>
<li><a href="#" title="">首页</a></li>
<li><a href="#" title="">首页</a></li>
<li><a href="#" title="">首页</a></li>
</ul>
</li>
<li><a href="#" title="">统计</a>
<ul>
<li><a href="#" title="">首页</a></li>
<li><a href="#" title="">首页</a></li>
<li><a href="#" title="">首页</a></li>
</ul>
</li>
<li><a href="#" title="">商城</a>
<ul>
<li><a href="#" title="">首页</a></li>
<li><a href="#" title="">首页</a></li>
<li><a href="#" title="">首页</a></li>
</ul>
</li>
</ul>
</div>
<script>
window.onload = function(){
var liNodes = document.getElementsByTagName("li")
for (var i=0i<liNodes.lengthi++)
{
liNodes[i].onmouseover = function(){
this.className = "subMenuDisplay"
}
liNodes[i].onmouseout = function(){
this.className = " "
}
}
}
</script>
</body>
</html>
用css定义。<style type="text/css">
body {
background-image: url(/images/test.jpg)
background-repeat: repeat
}
</style>
但是还是用到了repeat，你说的repeat是不重复图片，还是可以重复图片但不能用repeat？
另外：图片多大呢？全屏显示的分辨率又是多少呢？
设想你的图片只有300*400。那么全屏显示的话，图片的失真会很严重。如果是纯色图片，那还不如直接写RGB代码呢。
再说显示屏的分辨率，有800*600,1024*768,1280*720等等，你要如何满足这些要求呢。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="blog7_test.aspx.cs" Inherits="blog7_test" %><!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>
<style type="text/css">
.Defautl-Navigation {
FONT-SIZE: 12pxFLOAT: leftCOLOR: #7ea9bfLINE-HEIGHT: 23pxHEIGHT: 23pxTEXT-ALIGN: center
}
/*CSS*/
body {
margin: 0
padding: 0
line-height: 1.5em
font-family: Arial, Helvetica, sans-serif
font-size: 12px
color: #dbc1a7
background: #110915
}
a:link, a:visited { color: #cfa3ebtext-decoration:none}
a:active, a:hover { color: #CCFF00}
h1 {
margin: 0px
padding: 10px 0
font-size: 26px
color: #dbb4e0
font-weight: normal
}
h2 {
margin: 0 0 15px 0
padding: 0 0 10px 0
font-size: 20px
color: #dbc1a7
border-bottom: 1px dotted #663e17
}
h3 {
margin: 0 0 12px 0
padding: 0 0 10px 0
font-size: 16px
color: #dbb4e0
border-bottom: 1px dotted #663e17
}
p {
margin: 0px
padding: 0 0 10px 0
text-align: justify
}
.cleaner {
clear: both
width: 100%
height: 1px
}
/* ----- Form ----- */
form {
margin: 0px
padding: 0px
width: 100%
/*text-align: right*/
}
.inputfield {
background: #ffffff
border: 1px solid #c9f5f6
color: #000
font-size: 13px
font-variant: normal
height: 14px
line-height: normal
padding: 4px
margin-bottom: 5px
width: 240px
}
#searchfield {
background: none
border: 1px solid #874d76
color: #ffffff
font-size: 13px
font-variant: normal
height: 15px
line-height: normal
padding: 4px
width: 200px
}
#searchbutton {
cursor: pointer
font-size: 12px
font-weight: bold
height: 24px
margin: 0 0 0 7px
padding: 0 6px
text-align: center
vertical-align: bottom
white-space: pre
width: 60px
}
.button {
width: 60px
height: 25px
}
/* end of form */
#templatemo_header_panel {
width:100%
margin: 0 auto
height: 145px
}
#templatemo_header_panel #templatemo_header_section {
width: 960px
height: 145px
margin:0 auto
background: url(../../images/blog3/templatemo_top_panel_bg.jpg) center top no-repeat
}
#templatemo_header_section #templatemo_title_section {
float: left
width: 400px
padding: 90px 0 15px 30px
font-size: 60px
color: #d3c2f9
}
#templatemo_header_section #templatemo_search_section {
float: right
margin-right: 20px
margin-top:-5px
width: 330px
padding: 70px 0 15px 0
}
#templatemo_header_section #templatemo_search_section form {
text-align: left
}
#templatemo_menu_panel {
width:100%
height: 59px
margin: 0 auto
color: #ffffff
}
#templatemo_menu_panel #templatemo_menu_section {
width: 930px
height: 59px
margin:0 auto
padding: 0 0 0 30px
color: #03a0a6
background: url(../../images/blog3/templatemo_menu_panel_bg.jpg) no-repeat
}
#templatemo_menu_section ul {
float: left
width: 930px
margin: 0
padding: 15px 0 0 0
list-style: none
}
#templatemo_menu_section ul li {
display: inline
}
#templatemo_menu_section ul li a {
float: left
width: 110px
padding: 5px 0
margin-right: 5px
font-size: 12px
font-weight: bold
text-align: center
text-decoration: none
color: #ffffff
border-right: 1px solid #660e4c
}
#templatemo_menu_section li a:hover, #templatemo_menu_section li .current {
color: #d3c2f9
}
/* end of menu */
/* content panel */
#templatemo_content_container {
clear: both
overflow: hidden
width:100%
margin: 0 auto
}
#templatemo_content_container #templatemo_content {
overflow: hidden
height: 100%
width: 930px
padding: 30px 0 0 15px
margin:0 auto
background: url(../../images/blog3/templatemo_content_top.jpg) top center no-repeat
}
#templatemo_content_left {
float: left
width: 600px
margin-bottom: 15px
}
#templatemo_content_right {
float: right
width: 300px
margin-bottom: 15px
}
#templatemo_content_left .templatemo_post {
width: 600px
padding: 0
padding-bottom: 10px
margin-bottom: 30px
border: 1px solid #1e1125
background: #180d1e
}
* html #templatemo_content_left .templatemo_post {
margin-bottom: 15px
}
.templatemo_post .post_title {
width: 570px
height: 55px/* padding 20px + */
margin: 0px
padding: 20px 0px 5px 30px
font-size: 26px
font-weight: bold
color: #ffffff
background: url(../../images/blog3/templatemo_post_title_bg.jpg) no-repeat
}
.templatemo_post .post_title .post_info {
width: 100%
font-weight: normal
font-size: 12px
color: #dbc1a7
margin-top: 6px
}
.templatemo_post .post_body {
padding: 15px 30px
}
.templatemo_post .post_body img {
margin-bottom: 15px
}
.templatemo_post .post_comment {
padding: 5px 30px
font-weight: bold
}
#templatemo_content_right .templatemo_right_section {
clear: both
display:inline-block
width: 250px
padding: 15px 15px 10px 15px
margin-bottom: 30px
color: #dbc1a7
background: #180d1e url(../../images/blog3/templatemo_right_section_bg.jpg) top center no-repeat
border-bottom: 1px solid #361d40
}
#templatemo_content_right .templatemo_right_section ul {
clear: both
margin: 0 0 0 15px
padding: 0px
}
#templatemo_content_right .templatemo_right_section ul li {
margin: 0 0 5px 0
}
#templatemo_content_right .templatemo_right_section ul li a, a:hover {
font-weight: normal
}
#templatemo_bottom_panel {
width:100%
margin: 0 auto
}
#templatemo_bottom_panel #templatemo_bottom_section {
overflow: hidden
height: 100%
width: 930px
margin:0 auto
padding: 40px 0 15px 30px
background: url(../../images/blog3/templatemo_content_bottom.jpg) center bottom no-repeat
border-top: 1px solid #3d234d
}
#templatemo_bottom_section .templatemo_bottom_section_content {
display: inherit
float: left
width: 270px
padding-right: 20px
margin:0 0 15px 10px
}
#templatemo_bottom_section .templatemo_bottom_section_content ul {
margin: 0 0 0 10px
padding: 0 0 5px 10px
}
#templatemo_bottom_section .templatemo_bottom_section_content li a {
color: #dbc1a7
}
#templatemo_footer_panel {
width:100%
margin: 0 auto
background: #000000 url(../../images/blog3/templatemo_footer_bg_repeat.jpg) repeat-x
color: #ffffff
}
#templatemo_footer_panel #templatemo_footer_section {
width: 960px
margin:0 auto
padding: 20px 15px
text-align: center
background: url(../../images/blog3/templatemo_footer_bg.jpg) no-repeat
}
</style>
<script type="text/javascript" language="javascript">
var f=0
var y=0
var div_obj
function over(obj){
div_obj=obj
_f=0
y=0
document.getElementById(obj).innerHTML=""
document.getElementById(obj).style.width="0px"
document.getElementById(obj).style.height="1px"
document.getElementById(obj).style.display=""
timerDIV()
}
function out(obj){
obj.style.display="none"
}
function Tout(){
document.getElementById(div_obj).style.display="none"
}
function Tover(){
document.getElementById(div_obj).style.display=""
}
function timerDIV(){
if( _f >= 140){/*宽度*/
objy()
return
}
else{
_f=_f+10
document.getElementById(div_obj).style.width=_f+"px"
window.setTimeout(timerDIV,1)
}
}
function objy(){
if(y >= 150){/*高度*/
var str="<div style=\"width:autoheight:autofloat:leftmargin:6pxline-height:20px\"><a href=\"blog7czwa.aspx\">车之我爱</a><a href=\"#\">写意人生</a><a href=\"#\">梅♡倾听I</a><a href=\"#\">梅♡倾听II</a><\/div>"
document.getElementById(div_obj).innerHTML=str
return
}
else{
y+=6
document.getElementById(div_obj).style.height=y+"px"
window.setTimeout(objy,1)
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="templatemo_menu_panel">
<div id="templatemo_menu_section">
<%-- <ul>
<li><a href="blog7.aspx">首页</a></li>
<li><a href="blog7wz.aspx">博文</a></li>
<li><a href="blog7sp.aspx">视频</a></li>
<li><a href="blog7tp.aspx">图片</a></li>
<li><a href="blog7ly.aspx">留言</a></li>
<li><a href="blog7pl.aspx">评论</a></li>
</ul>--%>
<ul>
<li>
<div class="Defautl-Navigation" style="width: 60px">
<a href="blog7.aspx">首页</a></div>
</li>
<li>
<div class="Defautl-Navigation" style="width: 70pxcursor: pointer">
<a onmouseover="over('two')" onmouseout="out(two)" href="#">博文 ∇</a>
</div>
</li>
<li>
<div class="Defautl-Navigation" style="width: 80px">
<a href="#">视频</a></div>
</li>
<li>
<div class="Defautl-Navigation" style="width: 50px">
<a href="#">图片</a></div>
</li>
<li>
<div class="Defautl-Navigation" style="width: 50px">
<a href="#">留言</a></div>
</li>
<li>
<div class="Defautl-Navigation" style="width: 50px">
<a href="#">评论</a></div>
</li>
<li>
<div id="two" style="overflow: hiddenborder: #660e4c 1px soliddisplay: none
filter: alpha(Opacity=70)left: 300pxfloat: leftwidth: 1pxposition: relative
top: 25pxleft: -593pxheight: 1pxbackground-color: #444-moz-opacity: 0.7"
onmousemove="Tover()" onmouseout="Tout()">
</div>
</li>
</ul>
</div>
</div>
</form>
</body>
</html>
以上是代码，能实现你要的效果，具体修改成什么样的效果还得靠你自己了。
补充：直接把代码复制到页面就可以运行了。
