Html 对齐当前选定菜单项旁边的元素

我试图找到一个解决这个问题的方法，但失败了（也许我觉得我的搜索技能太糟糕了）。基本上，这是网页

这里有两个菜单项，在第一个框中可以看到链接“Data and Internet Services is Selected”，第二个框中只有三个元素的行为类似于锚。现在，它们排列在第一级菜单（数据和互联网服务）的顶部元素旁边。我需要实现的是，当您选择另一个选项（例如VoIP和语音服务）时，第二个框会移到它旁边。因此，它的对齐取决于第一个菜单中的活动链接。我很确定这可以通过javascript实现，但我真的很不擅长

PS：虽然我不擅长JS，但请随意使用所有术语，我稍后会做研究，只需要代码和一些解释，所以将来我可以自己做这件事

---

如果选择了左侧框中的某个元素，则可能会在右侧框中设置边距。

首先，您的网页有解决方案，但无法通过JavaScript实现

JavaScript可以像您所想的那样工作，但请注意，它只在同一页面上工作。这意味着，当用户单击某个地方，并且仍然保持在同一页面上时，JavaScript可以执行许多操作，例如更改DOM结构、更改某些内容的样式或执行一些动画。但是如果页面被重定向到另一个页面，那就不同了

[网页解决方案]
在“VoIP和语音服务”（VoIP and Voice Services）项的页面上，将以下CSS添加到页面文件中：

#banner .left_box .box-2 {
    margin: -10px 0 0 20px;
}  

对于其他项目，类似于更改

边距来调整其位置（垂直位置）：

第页，共页“云服务”

第页，共页“综合语音和数据服务”

第页，共页“附加数据和语音功能”

#banner .left_box .box-2 {
    margin: 110px 0 0 20px;
}

或者你可以改变“利润率顶部”，两者都有效

/*以下部分于格林尼治标准时间10月28日15:08添加*/

[带模板的网页解决方案]

1.在模板文件中，更改此行



到



注意：
{$item}
是
Smarty
的可变格式，您可以将其更改为自己的模板格式。

2.在每个页面中，为该变量指定一个相同的值，您将执行如下操作：

$smarty->assign（'item'，'item1'）；//将item2，item3分配到其他两个页面。


3.在样式文件（“transbeam/wp content/themes/transbeam/Style/Style.css”）中，添加以下行：

#banner .left_box .box-2-item1 {  
    background:url(../images/sep_1.png) no-repeat left;  
    float:left;  
    height:163px;  
    margin:-50px 0 0 15px;
} 

#banner .left_box .box-2-item2 {  
    background:url(../images/sep_1.png) no-repeat left;  
    float:left;  
    height:163px;  
    margin:-10px 0 0 15px;
}  

#banner .left_box .box-2-item3 {  
    background:url(../images/sep_1.png) no-repeat left;  
    float:left;  
    height:163px;  
    margin:30px 0 0 15px;
} 

这应该行得通，希望能帮助您。
问题是这些页面是由单个模板生成的php。我不能只向某个页面添加一些css。那么
驻留在哪里？模板文件还是每个php页面？因为解决方案因其位置而异。
#banner .left_box .box-2 {
    margin: 110px 0 0 20px;
}

#banner .left_box .box-2-item1 {  
    background:url(../images/sep_1.png) no-repeat left;  
    float:left;  
    height:163px;  
    margin:-50px 0 0 15px;
} 

#banner .left_box .box-2-item2 {  
    background:url(../images/sep_1.png) no-repeat left;  
    float:left;  
    height:163px;  
    margin:-10px 0 0 15px;
}  

#banner .left_box .box-2-item3 {  
    background:url(../images/sep_1.png) no-repeat left;  
    float:left;  
    height:163px;  
    margin:30px 0 0 15px;
}