I am trying to build a custom template from scratch for my Joomla 3.9 website. I am new to web design. I have been following several tutorials on how to set up menu style via CSS, but I cannot seem to find information on how to define the drop-down menu style. The menu items are defined in Joomla configuration, and the menu should be injected into the right place.
relevant lines from index.php:
<body>
<div class="nav">
<nav>
<jdoc:include type="modules" name="navigation" style="none"/>
</nav>
</div>
</body>
And from template.css:
.nav {
background-color:#FFA500;
position: sticky;
top: 0;
}
ul.nav { //this element needs centering
margin:auto;
width:80%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FFA500;
}
ul.nav li {
float:left;
display:block;;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-right: 3px solid #bbb;
}
ul.nav li:last-child {
border-right: none;
}
ul.nav li a{
color: white;
font-size: 20px
}
ul.nav li:hover {
background-color: #e09100;
}
This code works fine for displaying the menu the way I want (except for not centering it in the screen, but that's not relevant) for simple menu items. However, if I add sub-menu items in Joomla Menu configuration, it gets all messed up. I want these sub-menus to be displayed in a drop-down fashion when the user hovers over the parent item with the mouse, but instead, right now these sub-menus are displayed below the parent item statically. Obviously, that's because I haven't written the code for that part yet. Problem is, I do not know how to define the style for these sub-menu items, because they are not defined in the CSS, but instead, provided by Joomla. I cannot find any relevant documentation that would tell me the keywords to hook up to these items. Can someone tell me how to turn these sub-menu items into a nice drop-down menu when the user hovers the mouse over the parent menu item?