Css/html/javascript Accordeon Menu - Display Sublist Inside Parent "square"

I'm pretty new to css and webdesign and I have this idea in mind of creating a navigation in the form of a little 'tower' of stacked little squares containing the main menu items.

Solution 1:

How about something like this?

You'd probably want to replace the headers with anchor tags for wherever your nav links link to.

ul {
    padding:0;
    margin:0;
}

li {
    box-sizing:border-box;
    padding:0;
    margin:0;
    list-style:none;
}

ul.menu > li {
    overflow:hidden;
    width:47px;
    max-height:47px;
    padding:10px;
    margin-bottom:10px;
    background:blue;
    color:white;
    cursor:pointer;
    transition:all 1s ease;
}

ul.menu > li:hover {
    width:100px;
    max-height:120px;
}

h2 {
    margin:0010px0;
}

h3 {
    margin:0;
}

<ulclass="menu"><li><h2>A</h2><ul><li><h3>A.a</h3><h3>A.b</h3><h3>A.c</h3></li></ul></li><li><h2>B</h2><ul><li><h3>B.a</h3><h3>B.b</h3><h3>B.c</h3></li></ul></li><li><h2>C</h2><ul><li><h3>C.a</h3><h3>C.b</h3><h3>C.c</h3></li></ul></li><li><h2>D</h2><ul><li><h3>D.a</h3><h3>D.b</h3><h3>D.c</h3></li></ul></li></ul>

Solution 2:

my solution is as seen below (for everyone who is faced with the same problem)

#hideme{display:none;}

.menuul {
    padding:0;
    margin:0;
	color:white;
	text-decoration:none;
}

.menuli {
    box-sizing:border-box;
    padding:0;
    margin:0;
    list-style:none;
	color:white;
	text-decoration: none;
	text-align: bottom; vertical-align: bottom;
}


.menu > liulli{
    box-sizing:border-box;
    margin-left:20px;
	margin-top:5px;
    list-style:none;
	text-decoration: none;
    text-align: bottom; vertical-align: bottom;
}

ul.menu > li {
    overflow:hidden;
    width:90px;
	min-height:90px;
    max-height:90px;
    padding:10px;
    margin-bottom:10px;
    background:#5DB26E;
    color:#5DB26E;
    cursor:pointer;
    transition:all 0s ease;
	
}


ul.menu > li:hover {
    width:180px;
	min-height:180px;
	color: white;
    border: 3px solid white;
	box-shadow: 0px0px0px3px#5DB26E;
	 position: relative;
}

ul.menu> li:hover#hideme{display:block;  position: absolute;
    bottom: 10;}
ul.menu> li:hover.fa-arrow-right{content: "\f023";}

.hoverme:hover.fa-arrow-right,
.hoverme.fa-check {
    display: none;
}
.hoverme:hover.fa-check {
    display: inline;
}

	
.menua {
    margin:0;
	text-decoration:none;
	color:white;
}

<ulclass="menu"><li><ahref="news.html"><b>news</b></a><ul><spanid ="hideme"><li><ahref="aaaaa.html"class="hoverme"><iclass="fa fa-arrow-right"></i><iclass="fa fa-check"></i>&nbsp;aaaaa</a></li><li><ahref="bbbbb.html"class="hoverme"><iclass="fa fa-arrow-right"></i><iclass="fa fa-check"></i>&nbsp;bbbbb</a></li></span></ul></li></ul>