Trouble with formatting hidden nested list on click

Question

I am trying to build a nested list where when the top level "li" is clicked it drops down and shows the nested list. I have found some examples online that illustrate how to do this (http://jsfiddle.net/theuideveloper/DFHWd/4/) and for the most part I can get the main js functionality to work.

My problem is that my top level list items are separated into 4 columns when I click on the first "li" it drops down my nested list directly under this "li" , pushes the second row beneath it to the right and does not span across the 4 columns, the nested list is all jumbled up in this single spot.

Here is a picture in an attempt to better explain:

Item 1 Item 2 Item 3 Item 4

-Sub Item 1 -Sub Item 2 -Sub Item 3 -Sub Item 4

Item 5 Item 6 Item 7 Item 8

So when I click Item 1 I want the nested sub Items to be displayed like above. Currently it is like this:

Item 1 Item 2 Item 3 Item 4

-Sub Item 1
-Sub Item 2
-Sub Item 3

Here is the code:

<ul class="promos">
<li class="expanded"><a href="#"><img src="{{skin url="images/category-button.png"}}" alt="" /></a>
  <ul class="sub-cat">
    <li.sub-cat"><a href="foo">Sub Item 1</a></li>
    <li.sub-cat"><a href="foo">Sub Item 2</a></li>
    <li.sub-cat"><a href="foo">Sub Item 3</a></li>
    <li.sub-cat"><a href="foo">Sub Item 4</a></li>
  </ul>
</li>
<li class="expanded"><img src="{{skin url="images/category-button.png"}}" alt="" /></li>
<li class="expanded"><img src="{{skin url="images/category-button.png"}}" alt="" /></li>
<li class="expanded"><img src="{{skin url="images/category-button.png"}}" alt="" /></li>
<li class="expanded"><img src="{{skin url="images/category-button.png"}}" alt="" /></li>
<li class="expanded"><img src="{{skin url="images/category-button.png"}}" alt="" /></li>
</ul>

And the css

.promos {
  margin: 0 0 10px 0;
  padding: 0;
  width: 100%;
}

.promos:after {
  content: '';
  display: table;
  clear: both;
}

/* Specifying the body only in order to override the .std ul li styling */
body .promos > li {
  margin: 0 0 10px 0;
  list-style: none;
  text-align: center;
  position: relative;
  border: 1px solid #cccccc;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.promos > li:last-child {
  margin-bottom: 0;
}

.promos img {
  max-width: 100%;
  width: 100%;
}

.promos a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: block;
}

.promos span {
  color: #FFFFFF;
  text-transform: uppercase;
  position: absolute;
  display: block;
  width: 100%;
  top: 10%;
  font-weight: 500;
  font-size: 20px;
  font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif;
  text-shadow: 1px 1px 3px #555555;
}

.promos strong {
  font-weight: 600;
  font-size: 26px;
  display: block;
}

@media only screen and (min-width: 771px) {
  .promos span {
    font-size: 16px;
  }

  .promos strong {
    font-size: 17px;
  }

  /* Config: Three columns + flexible gutter */
  body .promos > li {
    float: left;
    width: 23.2142875%;
    margin-right: 2.38095%; /* 30 / 1260 (margin divided by total width) */
  }

  .promos > li:nth-child(4n ) {
    margin-right: 0;
  }
}
@media only screen and (min-width: 880px) {
  .promos span {
    font-size: 18px;
  }

  .promos strong {
    font-size: 24px;
  }
}

The CSS defined .sub-cat is exactly the same as .promos but needed to use a different class name in order to hide it until clicked, but I need to use the same properties for text size, color etc.

Thanks!

That didnt seem to help. The nested list still stays in the container of the parent list. Thanks though — Ron, Nov 08 '14 at 16:48
@Marcelo Just posted my answer regarding the typo in the same moment when you posted your second comment, sorry about that. I suggest if this solves Rons issue, you just post both of your comments as an answer and Ron accepts yours. — matthias_h, Nov 08 '14 at 17:24

score 0 · Answer 1 · answered Nov 08 '14 at 17:07

0

I guess it's just cause of the following typo:

<ul class="sub-cat">
   <li.sub-cat"><a href="foo">Sub Item 1</a></li>
   ...

instead of e.g.

<ul class="sub-cat">
    <li><a href="foo">Sub Item 1</a></li>
     ...

(unless this is a kind of notation I don't know). Then it would work adding .sub-cat li {display:inline-block;} like suggested in the comment by Marcelo.

Fiddle

answered Nov 08 '14 at 17:07

matthias_h

11,356
9
22
40

I wasnt sure what that notation was either. It was in the example (li.leaf), i thought leaf was a class that just wasnt being shown that held the styling properties or something. I removed that and added the inline-block. My sub categories are no longer jumbled but they are still "stuck" inside the top level list. – Ron Nov 08 '14 at 19:41
For example there are lets say 4 top level "li"s each have their own sub categories but the sub categories are only displayed inside the containing "li" and do not span across underneath the other list items. – Ron Nov 08 '14 at 19:44
@Ron Are you looking for something like that? Just adjusted the leaf fiddle: http://jsfiddle.net/zcrs6twx/ – matthias_h Nov 08 '14 at 19:58
Yes but my sub list items only expand as far as the parent list item. Per http://stackoverflow.com/questions/6115353/expand-container-div-with-content-width I was able to set a fixed width on .sub-cat and my "li"s expand right, but now the problem is the other top level list items do not get pushed down, they are on top of the sub items. – Ron Nov 08 '14 at 20:08
@Ron Not sure if I understand how it should look like, so I've just adjusted the first fiddle (with some dummy images) and the mentioned leaf fiddle code - http://jsfiddle.net/o9zq1no0/ - not as fully working navigation (as also the referenced leave fiddle doesn't close the subnavi when the parent navi is clicked again). – matthias_h Nov 08 '14 at 20:53
Hey thanks. Yes I am trying to accomlish something very similar to that. I have images 1-4 on the top row and 5-8 on the next row. When I click image 1 I can see the sub list but the bottom images (5-8) are overlapping it. This is getting very close though. For example if you change the .promos width to 50% it will drop images 5 and 6 down a line and do what im talking about. I would need images 5-6 to drop down and make room to show my sub items. thanks! – Ron Nov 08 '14 at 20:58
@Ron You mean something like this? http://jsfiddle.net/o9zq1no0/1/ (could be using animate and moving up and down when 1 is clicked again, but just as suggestion) – matthias_h Nov 08 '14 at 21:18
yes! That is exactly what I am looking for. Let me try and implement this in my project and see how it works. Will get back to hopefully accept this answer soon. – Ron Nov 09 '14 at 16:37
I don't know what I'm missing here. Its got to be something in my CSS, I want to override the .std ul/li items and use the ones from the .sub-cat class so I added .sub-cat in front of the ul ul / ul li etc and this still doesnt work. My sub items are always contained inside the .promos > li container. – Ron Nov 09 '14 at 19:55
@Ron Would be easier if you could create a Fiddle with your current code, otherwise it's difficult to find the issue. – matthias_h Nov 09 '14 at 20:14
Ok, just created this one... its a direct copy and paste, you can see how the sub items are inside the first list items container. http://jsfiddle.net/o9zq1no0/1/ – Ron Nov 09 '14 at 20:30
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/64591/discussion-between-matthias-h-and-ron). – matthias_h Nov 09 '14 at 20:39

Trouble with formatting hidden nested list on click

1 Answers1