Css 垂直菜单，在一个位置显示子部分

下午好。 对不起我的英语。 我想做一个垂直的菜单，在菜单的右边，一个地方会出现子菜单

 __________________________
|                         |
| SECTION1    subsection1 |
|___________  subsection2 |
|           | subsection3 |
| SECTION2  |             |
|___________|             |
|           |             |
| SECTION3  |             |
|___________|             |
|           |             |
| SECTION4  |             |
|___________|_____________|

 __________________________
|           |             |
| SECTION1  | subsection8 |
|___________| subsection9 |
|           | subsection7 |
| SECTION2  |             |
|___________|             |
|           |             |
| SECTION3  |             |
|___________|             |
|                         |
| SECTION4                |
|_________________________|

另外，我根本不想让小节消失——只有当我点击另一个部分时。 对不起我的英语。 （ццццццц！）

谢谢

---

代码，生成垂直菜单（Opencart原件）

我的代码：

<div class="box">
<?php foreach ($categories as $category) { ?>

    <div class="box-category">
       <?php if ($category['category_id'] == $category_id) { ?>
         <div class="active"><a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a></div>
       <?php } else { ?>
         <div><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></div>
       <?php } ?>
    </div>

    <div class="category-list">
        <?php if ($category['children']) { ?>
         <?php foreach ($category['children'] as $child) { ?>
          <?php if ($child['category_id'] == $child_id) { ?>
            <a href="<?php echo $child['href']; ?>" class="active"> - <?php echo $child['name']; ?></a>
          <?php } else { ?>
            <a href="<?php echo $child['href']; ?>"> - <?php echo $child['name']; ?></a>
          <?php } ?>
         <?php } ?>
        <?php } ?>
   </div>

<?php } ?>
</div>

有了这些代码，我只看到了主要部分。 尝试：

及

但它不起作用。 甚至尝试过java：

<script type="text/javascript">
if ($(".box-category > div.active").length > 0) {
    $('.category-list').css("display", "block");
}
</script>

如果（$（“.box类别>div.active”）.length>0）{
$（'.category list'）.css（“显示”、“块”）；
}

---

不起作用。

已更新。。。请看一看。。

<div class="box">
<?php foreach ($categories as $category) { ?>

    <div class="box-category">
       <?php if ($category['category_id'] == $category_id) { ?>
         <div class="active"><a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a></div>
       <?php } else { ?>
         <div><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></div>
       <?php } ?>
    </div>

    <div class="category-list">
        <?php if ($category['children']) { ?>
         <?php foreach ($category['children'] as $child) { ?>
          <?php if ($child['category_id'] == $child_id) { ?>
            <a href="<?php echo $child['href']; ?>" class="active"> - <?php echo $child['name']; ?></a>
          <?php } else { ?>
            <a href="<?php echo $child['href']; ?>"> - <?php echo $child['name']; ?></a>
          <?php } ?>
         <?php } ?>
        <?php } ?>
   </div>

<?php } ?>
</div>

.box-category {
width: 218px;
}

.box-category div {
height: 25px;
cursor: pointer;
}

.box-category div a {
margin-left: 8px;
}

.box-category div.active {
height: 25px;
cursor: pointer;
}
.box-category div a.active {
margin-left: 14px;
}

.category-list {
display: none;
width: 218px;
float: left;
}

.category-list a {
color: white;
}

div.box-category div.active + div.category-list {
display: block;
}

.box-category:active + .category-list {
display: block;
}

<script type="text/javascript">
if ($(".box-category > div.active").length > 0) {
    $('.category-list').css("display", "block");
}
</script>