CSS/Jquery垂直菜单，子菜单项的位置固定

我必须设计一个全宽页面，主菜单位于页面的左起位置。现在，每个菜单都有不同的选项，当选择主菜单中的任何项目时，都会显示这些选项，但在一个div中固定了选项…例如

i、 e.当有人从主菜单中选择菜单项时，相关选项应放在选项容器中

我该怎么做？？这可以只用css来完成吗？或者我需要使用jquery来实现它吗

更新---在这里查看////

---

您可以使用jquery来实现这一点（我相信有更好的方法，但这里有一种方法）

第1项

第2项

第3项

var opt='
'+'
'+''；
var opt2='
'+'
'+''；
var opt3='
'+'
'+''；
$（“#p1”）。单击（函数（）{
$（'.options'）.html（opt）；
});
$（“#p2”）。单击（函数（）{
$（'.options'）.html（opt2）；
});
$（“#p3”）。单击（函数（）{
$（'.options'）.html（opt3）；
});

纯CSS3解决方案 如果您希望支持较旧的浏览器，这是不实用的，因为它使用

：target

选择器（这也意味着您在单击主菜单时正在更改

url

字符串）

给定此HTML

<div id="main-menu">
    <div class="center">
        <a id="p1" href="#opt1">Item 1</a>
        <a id="p2" href="#opt2">Item 2</a>
        <a id="p3" href="#opt3">Item 3</a>
    </div>
</div>
<div id="submenu">
    <div class="options">
        <div id="opt1">
            <a id="s1" href="#">Sub Item 1</a>
            <a id="s2" href="#">Sub Item 2</a>
            <a id="s3" href="#">Sub Item 3</a>
        </div>    
        <div id="opt2">
            <a id="s4" href="#">Sub Item 4</a>
            <a id="s5" href="#">Sub Item 5</a>
            <a id="s6" href="#">Sub Item 6</a>
        </div>        
        <div id="opt3">
            <a id="s7" href="#">Sub Item 7</a>
            <a id="s8" href="#">Sub Item 8</a>
            <a id="s9" href="#">Sub Item 9</a>
        </div>
    </div>
</div>
<div id="application_area">
    <div id="header"></div>
</div>

在页面加载时显示选项1

首先，将

#opt1

div移动到

.options

的最后一个

div

，然后使用以下CSS而不是上面给出的CSS（）：

#子菜单。选项a{display:block；}
.options>div:not（#opt1）{display:none}
.options>：target~#opt1{display:none；}
#子菜单.选项>分区：目标{
显示：块；
}

我尝试的是，，，我创建了所有列表选项，并将它们放在单独的div中，其中一个类具有display:none。。。现在，我编写了自己的jquery函数来查找单击了哪个菜单项，基于此，我从包含该菜单项选项的相关隐藏div中提取了内容，放置display:block并将内容放置在选项容器中。您应该在问题中添加一些代码，这将使您更容易找到答案，你提供的信息越多越好。我的意思是向我们展示代码，这样我们可以帮助你实现你想要的。如果我们没有什么可处理的，我们将无能为力。@praveen请粘贴您的代码，您知道，如果您没有，我们只能猜测。如果有人能来到teamviewer，我可以展示我所做的一切。在这里粘贴所有内容实际上会使问题变得太大！！令人恼火……但这不是一种令人满意的方式……就像硬编码一样……无论如何，谢谢你的解决方案……将在其他地方使用：）@praveen——这很好。如果您可以接受，那么您应该单击我答案左侧的复选标记。

<div id="main-menu">
    <div class="center">
        <a id="p1" href="#opt1">Item 1</a>
        <a id="p2" href="#opt2">Item 2</a>
        <a id="p3" href="#opt3">Item 3</a>
    </div>
</div>
<div id="submenu">
    <div class="options">
        <div id="opt1">
            <a id="s1" href="#">Sub Item 1</a>
            <a id="s2" href="#">Sub Item 2</a>
            <a id="s3" href="#">Sub Item 3</a>
        </div>    
        <div id="opt2">
            <a id="s4" href="#">Sub Item 4</a>
            <a id="s5" href="#">Sub Item 5</a>
            <a id="s6" href="#">Sub Item 6</a>
        </div>        
        <div id="opt3">
            <a id="s7" href="#">Sub Item 7</a>
            <a id="s8" href="#">Sub Item 8</a>
            <a id="s9" href="#">Sub Item 9</a>
        </div>
    </div>
</div>
<div id="application_area">
    <div id="header"></div>
</div>