CODEWITHSUNDEEP
htmlcss
Steve Ucho
Steve Ucho

Reputation: 33

html drop down menu is not being displayed even though :hover and display block has been set

I'm new both to web design and stack overflow. I noticed that there was a similar question to mine on stack overflow but my question was not answered there so I'm posting my own, hope you can help! I've been trying to make a dropdown menu that not only appears but also pushed the elements under it move. My main concern right now though is the dropdownmenu. I've added position: relative to the parent and set :hover to display the dropdown but with no result. Heres all my code:

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";
}
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;
}
<!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>

Thank you so much in advance!

Upvotes: 0

Views: 103

Answers (1)

Ryan
Ryan

Reputation: 1235

The issue here is nested anchor tags. You are trying to put the dropdown within the 'a' tag for "The News," but the dropdown has its own A tags, which is illegal. See this question for more information.

Instead, wrap the anchor tag and the dropdown within a 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>

Upvotes: 1

Related Questions