css/html/javascript accordeon menu - display subli

Question

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. Basically an accordeon menu, but with a litte twist. I want the little squares to grow larger on hover and display a list of submenu items but INSIDE of them. A picture of what I'm trying to archive is here

Can this be done, I am a little lost ?

I have found some css code on the internet to make an accordeon menu that works nicely (as shown below), but I don't know how to change it to display the sublist inside the parent menu square.

This is probably easy stuff for someone with lots of experience and a stupid question, but I'm kinda stuck :-(. I think the "on hover" also needs to trigger the resizing of the parent item, but how ? Or am I overlooking a very simple solution ?

Thanks alot and sorry for my bad English.

n.

.menu {
  margin: 0 auto;
  padding: 0;
  width: 150px;
}
.menu li {
  list-style: none;
}
.menu li a {
  display: table;
  margin-top: 1px;
  height: 90px;
  padding: 14px 10px;
  width: 90px;
  background: #5DB26E;
  text-decoration: none;
  text-align: left;
  vertical-align: middle;
  color: #fff;
  overflow: hidden;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: ease-out;
  transition-property: background;
  transition-duration: 0.4s;
  transition-timing-function: ease-out;
}
.menu > li:first-child a {
  margin-top: 0;
}
.menu li a:hover {
  background: #4AADBB;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: background;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}
.menu li ul {
  margin: 0;
  padding: 0;
}
.menu li li a {
  display: block;
  margin-top: 0;
  padding: 0 10px;
  height: 0;
  background: #C6DDD9;
  color: #1F3D39;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}
.menu > li:hover li a {
  display: table;
  margin-top: 1px;
  padding: 10px;
  width: 100%;
  height: 1em;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.menu > li:hover li a:hover {
  background: #A4CAC8;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: background;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

Answer 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:0 0 10px 0;
}

h3 {
    margin:0;
}

<ul class="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>

Answer 2

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

#hideme{display:none;}

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

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


.menu > li ul li{
    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: 0px 0px 0px 3px #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;
}

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

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