Creating drop down menu in html and css (strange error)

Question

Before you read: please do not judge me on every little thing. I am a beginner to this sort of thing and I am just trying to get some practice. Only comment my mistakes if they are either relevant to the conversation or truly helpful.

I've looked over and over at my code and stackoverflow answers but nothing has what I need. I want to create a dropdown menu (you hover on a button and multiple links appear in a vertical line below it). I have been having trouble because the links are horizontal instead of vertical when I hover. I have no idea why. I thought this may be because the display style on my nav bar is set to inline, but I used id's in my css, so that should override the navbar classes. I'm very confused. Someone please help. Here is the relevant code (yes, I am using django):

<style>
#dropdown {display: none;position: relative;background-color: #dde000; padding: 0px;z-index: 1; left: 970px; top:45px;}
#drop:hover #dropdown {display:block;}

div.navbar {border: 2px outset gray; position: relative; margin-left:-21px; height:45px; background: #dddddd; margin-top:-6px; left: 15px;}
.navbar a {height: 23px; display:inline; text-decoration: none; color: black; padding: 10px; float: left; background: #dddddd; padding-top:12px;}
.navbar a:hover {background: #eeeeee; transition: all 0.4s;}
</style>

<div class="navbar">
    <a href="{% url 'blog_main:index' %}">Home</a>
    <a href="{% url 'blog_main:create_post' %}">Create Post</a>
    {% if user.is_authenticated %}
    <a href="{% url 'blog_main:profile' user.id %}">My Profile</a>
    {% else %}
    <a href="{% url 'blog_main:login' %}">My Profile</a>
    {% endif %}
    {% if not user.is_authenticated %}
    <a href="{% url 'blog_main:login' %}" style="float:right; margin-right:50px;">Login</a>
    <a href="{% url 'blog_main:register' %}" style="float:right; ">Register</a>
    {% else %}
                
    <a href="{% url 'blog_main:logout' %}" style="float:right; margin-right:50px;">Logout</a>
    <div id="drop">
    <a style="float:right; margin-right: 50px;" >{{ user.username }}</a>
    <div id="dropdown">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
    </div>
    {% endif %}
</div>

Edit: Is the best way to do this just to take a few weeks to learn javascript?

Answer 1

You have 2 things going on here:

The horizontal links on hover are popping up because you are basically floating the a tag to the right and not fixing the #dropdown with it so it gets left behind.

in order to get the submenus to show below, you have a number of methods for me I usually use display: flex your code would look something like this:

<style>
#dropdown {display: none;background-color: #dde000; padding: 0px;z-index: 1; left: 970px; top:45px;}
#drop {float: right; padding: 10px}
#drop:hover #dropdown {display:flex; ;
  flex-direction: column;}

div.navbar {border: 2px outset gray; position: relative; margin-left:-21px; height:45px; background: #dddddd; margin-top:-6px; left: 15px;}
.navbar a {height: 23px; display:inline; text-decoration: none; color: black; padding: 10px; float: left; background: #dddddd; padding-top:12px;}
.navbar a:hover {background: #eeeeee; transition: all 0.4s;}
</style>

<div class="navbar">
    <a href="{% url 'blog_main:index' %}">Home</a>
    <a href="{% url 'blog_main:create_post' %}">Create Post</a>
    {% if user.is_authenticated %}
    <a href="{% url 'blog_main:profile' user.id %}">My Profile</a>
    {% else %}
    <a href="{% url 'blog_main:login' %}">My Profile</a>
    {% endif %}
    {% if not user.is_authenticated %}
    <a href="{% url 'blog_main:login' %}" style="float:right; margin-right:50px;">Login</a>
    <a href="{% url 'blog_main:register' %}" style="float:right; ">Register</a>
    {% else %}
                
    <a href="{% url 'blog_main:logout' %}" style="float:right; margin-right:50px;">Logout</a>
    <div id="drop">
    <a style="margin-right: 50px;" >{{ user.username }}</a>
    <div id="dropdown">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
    </div>
    {% endif %}
</div>

you can refer here to more explanation about css flex here

Edit Code

<style>
.navbar{display:flex;
justify-content: flex-end;
   width: 100%;
}
.navbar > a, .navbar> div{ 
align-content: flex-end
}
#dropdown {display: none;background-color: #dde000; padding: 0px;z-index: 1;}
#drop{display:flex; ;
  flex-direction: column;
}
#drop:hover #dropdown {display:flex;
  flex-direction: column; z-index: 1;  margin-top: 8px
}
div.navbar {border: 2px outset gray; height:45px; background: #dddddd}
.navbar a {height: 23px; text-decoration: none; color: black; padding: 10px;  background: #dddddd; padding-top:12px;}
.navbar a:hover , .navbar div:hover{background: #eeeeee; transition: all 0.4s;}
</style>

<div class="navbar">
    <a href="{% url 'blog_main:index' %}">Home</a>
    <a href="{% url 'blog_main:create_post' %}">Create Post</a>
    {% if user.is_authenticated %}
    <a href="{% url 'blog_main:profile' user.id %}">My Profile</a>
    {% else %}
    <a href="{% url 'blog_main:login' %}">My Profile</a>
    {% endif %}
    {% if not user.is_authenticated %}
    <a href="{% url 'blog_main:login' %}">Login</a>
    <a href="{% url 'blog_main:register' %}">Register</a>
    {% else %}
                
    <a href="{% url 'blog_main:logout' %}">Logout</a>
    <div id="drop">
    <a style="margin-right: 8px;" >{{ user.username }}</a>
    <div id="dropdown">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
    </div>
    {% endif %}
</div>