我在项目中遇到一个问题,我想显示菜单和子菜单。但是由于框架集中设置的行,子菜单没有显示。 所以你帮助我做了什么改变,以便marque.html在后台运行,子菜单和子菜单的>菜单显示正确。
以下是代码段:
ul#css3menu1, ul#css3menu1 ul {
margin: 0;
list-style: none;
padding: 0;
background-color: #dedede;
border-width: 1px;
border-style: solid;
border-color: #5f5f5f;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
ul#css3menu1 ul {
display: none;
position: absolute;
left: 0;
top: 100%;
-moz-box-shadow: 3.5px 3.5px 5px #000000;
-webkit-box-shadow: 3.5px 3.5px 5px #000000;
box-shadow: 3.5px 3.5px 5px #000000;
background-color: #0000ff;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-color: #d4d4d4;
padding: 0 10px 10px;
}
ul#css3menu1 li:hover > * {
display: block;
}
ul#css3menu1 li {
position: relative;
display: block;
white-space: nowrap;
font-size: 0;
float: left;
}
ul#css3menu1 li:hover {
z-index: 1;
}
ul#css3menu1 ul ul {
position: absolute;
left: 100%;
top: 0;
}
ul#css3menu1 {
font-size: 0;
z-index: 999;
position: relative;
display: inline-block;
zoom: 1;
padding: 0;
*display: inline;
}
* html ul#css3menu1 li a {
display: inline-block;
}
ul#css3menu1 > li {
margin: 0;
}
ul#css3menu1 a:active, ul#css3menu1 a:focus {
outline-style: none;
}
ul#css3menu1 a {
display: block;
vertical-align: middle;
text-align: left;
text-decoration: none;
font: bold 14px Tahoma, Geneva, sans-serif;
color: #0000ff;
text-shadow: #FFF 0 0 1px;
cursor: pointer;
padding: 9px 10px 9px 10px;
background-color: #c1c1c1;
background-image: url("mainbk.png");
background-repeat: repeat;
background-position: 0 0;
border-width: 0 0 0 1px;
border-style: solid;
border-color: #C0C0C0;
}
ul#css3menu1 ul li {
float: none;
margin: 10px 0 0;
}
ul#css3menu1 ul a {
text-align: left;
padding: 4px;
background-color: #0000ff;
background-image: none;
border-width: 0;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
font: 14px Tahoma;
color: #000;
text-decoration: none;
}
ul#css3menu1 li:hover > a, ul#css3menu1 li a.pressed {
background-color: #ffffff;
border-color: #C0C0C0;
border-style: solid;
color: #0000ff;
text-shadow: #FFF 0 0 1px;
background-image: url("mainbk.png");
background-position: 0 100px;
}
ul#css3menu1 span {
display: block;
overflow: visible;
background-position: right center;
background-repeat: no-repeat;
padding-right: 0px;
}
ul#css3menu1 ul span {
background-image: url("arrowsub.png");
padding-right: 12px;
}
ul#css3menu1 > li.switch {
display: none;
cursor: pointer;
width: 25px;
height: 20px;
padding: 9px 10px 9px 10px;
}
ul#css3menu1 > li.switch:before {
content: "";
position: absolute;
display: block;
height: 4px;
width: 25px;
border-radius: 4px;
background: #0000ff;
-moz-box-shadow: 0 8px #0000ff, 0 16px #0000ff;
-webkit-box-shadow: 0 8px #0000ff, 0 16px #0000ff;
box-shadow: 0 8px #0000ff, 0 16px #0000ff;
}
ul#css3menu1 > li.switch:hover:before {
background: #0000ff;
-moz-box-shadow: 0 8px #0000ff, 0 16px #0000ff;
-webkit-box-shadow: 0 8px #0000ff, 0 16px #0000ff;
box-shadow: 0 8px #0000ff, 0 16px #0000ff;
}
.c3m-switch-input {
display: none;
}
ul#css3menu1 li:hover > a, ul#css3menu1 li > a.pressed {
background-color: #ffffff;
background-image: url("mainbk.png");
background-position: 0 100px;
border-style: solid;
border-color: #C0C0C0;
color: #0000ff;
text-decoration: none;
text-shadow: #FFF 0 0 1px;
}
ul#css3menu1 ul li:hover > a, ul#css3menu1 ul li > a.pressed {
background-color: #FFFFFF;
background-image: none;
color: #FF0DDB;
text-decoration: none;
}
ul#css3menu1 li.toplast > a {
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}
@media screen and (max-width: 768px) {
ul#css3menu1 > li {
position: initial;
}
ul#css3menu1 ul .submenu, ul#css3menu1 li > ul {
left: 0;
right: auto;
top: 100%;
}
ul#css3menu1 .submenu, ul#css3menu1 ul, ul#css3menu1 .column {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-right: 0;
width: 100% !important;
}
}
@media screen and (max-width: 118px) {
ul#css3menu1 {
width: 100%;
}
ul#css3menu1 > li {
display: none;
position: relative;
width: 100% !important;
}
ul#css3menu1 > li.switch, .c3m-switch-input:checked + ul#css3menu1 > li + li {
display: block;
}
ul#css3menu1 > li.switch > label {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0">
<title>css3menu.com</title>
<!-- Start css3menu.com HEAD section -->
<link rel="stylesheet" href="check_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
<!-- End css3menu.com HEAD section -->
</head>
<body ontouchstart="" style="background-color:#EBEBEB">
<!-- Start css3menu.com BODY section -->
<input type="checkbox" id="css3menu-switcher" class="c3m-switch-input">
<ul id="css3menu1" class="topmenu">
<li class="switch"><label onclick="" for="css3menu-switcher"></label></li>
<li class="toplast"><a href="#" target="_parent" style="width:110px;height:17px;line-height:17px;"><span>Administrator</span></a>
<ul>
<li><a href="#">Administrator 3</a></li>
<li><a href="#">Administrator 2</a></li>
<li><a href="#"><span>Administrator 1</span></a>
<ul>
<li><a href="#">Administrator 1 1</a></li>
<li><a href="#">Administrator 1 0</a></li>
</ul></li>
<li><a href="#">Administrator 0</a></li>
</ul></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">css menu</a> by Css3Menu.com</p>
<!-- End css3menu.com BODY section -->
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<marquee>Welcome to test screen</marquee>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<frameset border="0" framespacing="0" rows=98,1* frameborder="no" cols=*>
<frame name=topnav marginwidth="0" marginheight="0" src="banner.html" frameborder="0" noresize="noresize" scrolling="no">
<frameset border="0" framespacing="0" rows=25,1* frameborder="no" cols=*>
<frame name=topnav marginwidth="0" marginheight="0" src="MenuBar.html" frameborder="0" noresize="noresize" scrolling="no">
<frameset border="0" framespacing="0" rows=20,1* frameborder="no" cols=*>
<frame name=topnav marginwidth="0" marginheight="0" src="marque.html" frameborder="0" noresize="noresize" scrolling="no">
</frameset>
</frameset>
</frameset>
</html>
任何建议都会对我有所帮助。 提前致谢