Steve Ucho Steve Ucho - 2 months ago 4
CSS Question

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:

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

a .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>
<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>
<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>




Thank you so much in advance!

Answer

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>
Comments