Before you proceed: please be mindful of the fact that I am a novice in this area and seeking some practice. Kindly highlight my errors only if they are pertinent to the discussion or genuinely beneficial.
I've extensively reviewed my code and scoured stackoverflow for answers, but none seem to address my specific issue. My goal is to implement a dropdown menu (where hovering over a button reveals multiple links in a vertical arrangement below it). However, I've encountered difficulty as the links appear horizontally instead of vertically upon hover. The confusion stems from the fact that despite using id's in my CSS, the navbar classes seem to override them. Any assistance would be greatly appreciated. Below is the relevant code snippet (yes, Django is being utilized):
<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: Would dedicating a few weeks to learning JavaScript be the most effective solution for this issue?