What I’m trying to do is a Menu with multi-level drop downs.
I will start with this: I saw a lot of suggestions and tutorials but I’m
stuck because I really I don’t understand where is the problem in my
code. I wrote the code after W3schools tutorial and it works great but
I’ve tried various combinations of float:left, position:relative, but
couldn’t figure it out.
My question it’s: how I have to change the CSS proprieties in that way
that will result a second level menu that will open in the right of his
parent, not under like it’s right now. You can see the second level menu
when you open “Projects” element.
Here is the menu and code https://jsfiddle.net/Anaramia/mw4u2wtu/
What I have:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.mainMenubackground {
background-color: #37459D;
width: 100%;
float:left;
clear:both;
}
.mainMenu {
font-family: 'Kadwa', serif;
font-size: 10px;/* 10px is too small*/
}
.mainMenu li {
float: left;
}
.mainMenu ul li {
float:none;
}
.mainMenu li a {
display: block;
color: white;
text-align: left;
padding: 5px 38px;
text-decoration: none;
font-size: 18px;
}
.mainMenu li:hover > a {
background-color: #798AF7;
}
.mainMenu li ul {
display: none;
position: absolute;
background-color: #37459D;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #303d70), color-stop(100%, #a6acd4));
opacity: 0.9;
filter: alpha(opacity=90);
}
.dropdown-content a {
display: block;
color: white;
padding: 8px 10px;
text-decoration: none;
text-align: left;
font-size: 14px;
border: 2px solid #FFF;
border-top: 0 none;
}
.submenu {
left: 100%;
top: 0;
position:absolute;
}
.mainMenu li:hover > ul {
/* when list items are hovered over, do this to lists contained within them... */
display: block;
}
</style>
</head>
<body>
<div class="mainMenubackground">
<div class="pageWrapper">
<ul class="mainMenu">
<li class="dropdown"> <a href="index.html" title="Home - CRCE" rel="home" class="dropbtn">Home</a>
<ul class="dropdown-content">
<li><a href="Mission_statment.html">Mission statment</a></li>
<li><a href="ERASMUS+ Courses.html">ERASMUS+ Courses</a></li>
<li><a href="International_and_national _project.html">International and national project</a></li>
<li><a href="Support social - art initiatives.html">Support social - art initiatives</a></li>
<li><a href="Cultural and leisure program.html">Cultural and leisure program</a></li>
<li><a href="Parteners.html">Parteners</a></li>
<li><a href="Write to us.html">Write to us</a></li>
</ul>
</li>
<li class="dropdown"> <a href="ERASMUS+ Courses.html" class="dropbtn">ERASMUS+ Courses</a>
<ul class="dropdown-content">
<li><a href="The Power of Nonformal.html">The Power of Nonformal</a></li>
<li><a href="ABC p.m..html">ABC p.m.(Social-Cultural Project Management ABC steps)</a></li>
<li><a href="Learning by Doing ERASMUS+.html"> Learning by Doing ERASMUS+” (2014 – 2020) /writing a successful project application-step by step</a></li>
<li><a href="Creativity in teaching and training.html"> Creativity in teaching and training”-how to use drama exercises and methods in a new context</a></li>
<li><a href="Improving Entrepreneurial and Communication Skills.html"> Improving Entrepreneurial and Communication Skills through Non-formal Education</a></li>
</ul>
</li>
<li class="dropdown"> <a href="Projects.html" class="dropbtn">Projects</a>
<ul class="dropdown-content">
<li> <a href="current_projects.html" class="dropbtn">Current</a>
<ul class="submenu">
<li><a href="">Echidnas</a></li>
<li><a href="">Platypus</a></li>
</ul>
</li>
<li> <a href="previous_projects.html">Previous</a>
<ul class="submenu">
<li><a href="">Echidnas</a></li>
<li><a href="">Platypus</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"> <a href="News.html" class="dropbtn">News</a>
<ul class="dropdown-content">
<li><a href="The Power of Nonformal.html">The Power of Nonformal</a></li>
<li><a href="ABC p.m..html">ABC p.m.(Social-Cultural Project Management ABC steps)</a></li>
<li><a href="Learning by Doing ERASMUS+.html"> Learning by Doing ERASMUS+” (2014 – 2020) /writing a successful project application-step by step</a></li>
<li><a href="CERC.html"> CERC</a></li>
</ul>
</li>
<li> <a href="Photo Gallery.html">Photo Gallery</a></li>
<li> <a href="Contact.html">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
Note you forgot the list tags on a number of the menu items and they must be in place properly.
You also complicated it a little with all the extra classes as nested menus have a hierarchy that can be accessed quite easily without class names.
Generally I would not use display:none for hiding the submenus as that may hide it from screen readers and bots and instead would simply move the menu off screen and then bring it back into view when needed.
