即使已经设置了hover和display block，也没有显示html下拉菜单

时间：2016-10-02 02:22:35

标签： html css

我对网页设计和堆栈溢出都很新。我注意到我的堆栈溢出有一个类似的问题，但我的问题没有在那里回答，所以我发布了自己的，希望你能帮忙！我一直试图制作一个下拉菜单，不仅会出现，还会推动它下面的元素移动。我现在主要担心的是下降菜单。我添加了位置：相对于父级和集合：悬停以显示下拉列表但没有结果。以下是我的所有代码：

＆＃13;
＆＃13; 
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.getElementById("nav").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.getElementById("nav").style.marginLeft = "0";
}
＆＃13; 
body {
  font-family: "Lato", sans-serif;
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: crimson;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 80px;
}
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}
.sidenav #menu-list:hover,
.offcanvas a:focus {
  color: crimson;
  background-color: white;
}
.sidenav a:hover,
.offcanvas a:focus {
  color: white;
}
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
#menu-list {
  padding-top: 17px;
  padding-bottom: 17px;
  text-align: center;
  padding-right: 33px;
}
#main {
  transition: margin-left .5s;
  padding: 16px;
  padding-top: 55px;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
}
#nav {
  transition: .5s;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 6%;
  background-color: white;
  position: fixed;
  z-index: 1;
  width: 100%;
}
#nav-element {
  text-align: left;
  width: 120px;
  display: inline;
  color: crimson;
}
#red-logo {
  margin-left: 50px;
  font-size: 30px;
  color: crimson;
}
#heading {
  font-size: 45px;
}
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}
li {
  list-style-type: none;
}
#dropdown {
  display: none;
  width: 40px;
}
#dropdown a {
  color: white;
  display: block;
}
.test {
  position: relative;
}
a .test:hover > #dropdown {
  display: block;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <title>Red Storm News</title>
  <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a id="menu-list" href="/redstormtv/redstormtv.html">Red Strom TV</a>
    <a id="menu-list" class="test">The News
                <ul id="dropdown"> #What i'm trying be a dropdown
                    <li><a href="/schoolnews/schoolnews.html">School News</a>
    </li>
    <li><a href="/schoolsports/schoolsports.html">School Sports</a>
    </li>
    <li><a href="/worldnews/worldnews.html">World News</a>
    </li>
    </ul>
    </a>
    <a id="menu-list" href="/archives/archives.html">Archives</a>
    <a id="menu-list" href="/partners/partners.html">Partners</a>
  </div>
  <div class="container" id="nav">
    <div id="nav-element">
      <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
    </div>
    <div id="nav-element">
      <a id="red-logo" href="index.html">Red Strom News</a>
    </div>
  </div>
  <div class="container" id="main">
    #type text here#
  </div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

提前非常感谢你！

1 个答案:

答案 0 :(得分：1)

这里的问题是嵌套的锚标签。您正试图将下拉列表放在＆＃39; a＆＃39;标签为＆＃34;新闻，＆＃34;但是下拉列表有自己的A标签，这是非法的。有关详细信息，请参阅this question。

相反，将锚标记和下拉包装在div中。

<!DOCTYPE html>
<html>
<style>
  body
        {
            font-family: "Lato", sans-serif;
        }

    .sidenav
        {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: crimson;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 80px;
        }

    .sidenav a
        {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: white;
            display: block;
            transition: 0.3s;
        }

    .sidenav #menu-list:hover, .offcanvas a:focus
        {
            color: crimson;
            background-color: white;
        }

    .sidenav a:hover, .offcanvas a:focus
        {
            color: white;
        }

    .sidenav .closebtn
        {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }

    #menu-list
        {   
            padding-top: 17px;
            padding-bottom: 17px;
            text-align: center;
            padding-right: 33px;
        }

    #main
        {
            transition: margin-left .5s;
            padding: 16px;
            padding-top: 55px;
            left: 0;
            right: 0;
            top: 0;
            width: 100%;
        }

    #nav
        {
            transition: .5s;
            padding-top: 15px;
            padding-bottom: 15px;
            padding-left: 6%;
            background-color: white;
            position: fixed;
            z-index: 1;
            width: 100%;
        }

    #nav-element
        {
            text-align: left;
            width: 120px;
            display: inline;
            color: crimson;
        }

    #red-logo
        {
            margin-left: 50px;
            font-size: 30px;
            color: crimson;
        }

    #heading
        {
            font-size: 45px;
        }

    @media screen and (max-height: 450px)
        {
            .sidenav {padding-top: 15px;}
            .sidenav a {font-size: 18px;}
        }

    li
        {
            list-style-type: none;
        }

    #dropdown
        {
            display: none;
            width: 40px;
        }

    #dropdown a
        {
            color: white;
            display: block;
        }

    .test
        {
            position: relative;
        }

    .test:hover > #dropdown
        {
            display: block;
        }
</style>

<head>
  <title>Red Storm News</title>
  <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a id="menu-list" href="/redstormtv/redstormtv.html">Red Strom TV</a>
    <div class="test">
      <a id="menu-list">The News</a>
      <ul id="dropdown"> #What i'm trying be a dropdown
        <li><a href="/schoolnews/schoolnews.html">School News</a></li>
        <li><a href="/schoolsports/schoolsports.html">School Sports</a></li>
        <li><a href="/worldnews/worldnews.html">World News</a></li>
      </ul>
    </div>
    <a id="menu-list" href="/archives/archives.html">Archives</a>
    <a id="menu-list" href="/partners/partners.html">Partners</a>
  </div>
  <div class="container" id="nav">
    <div id="nav-element">
      <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
    </div>
    <div id="nav-element">
      <a id="red-logo" href="index.html">Red Strom News</a>
    </div>
  </div>
  <div class="container" id="main">
    #type text here#
  </div>
  <script>
    function openNav() {
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
        document.getElementById("nav").style.marginLeft = "250px";
    }

    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main").style.marginLeft= "0";
        document.getElementById("nav").style.marginLeft = "0";
    }
  </script>
</body>
相关问题
最新问题