由于框架集,不显示子菜单

时间:2015-06-02 17:47:52

标签: html5 css3

我在项目中遇到一个问题,我想显示菜单和子菜单。但是由于框架集中设置的行,子菜单没有显示。 所以你帮助我做了什么改变,以便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>

任何建议都会对我有所帮助。 提前致谢

0 个答案:

没有答案