Html 单击子菜单后使其保持打开状态
即使在单击子菜单后,也可以将其保持打开状态吗 例如,当您单击“信息”时,将显示一个子菜单并加载新页面。但是,即使在加载新页面后,是否可以保持子菜单打开?我希望子菜单信息始终可用,但仅在单击时显示 这是html-Html 单击子菜单后使其保持打开状态,html,css,submenu,Html,Css,Submenu,即使在单击子菜单后,也可以将其保持打开状态吗 例如,当您单击“信息”时,将显示一个子菜单并加载新页面。但是,即使在加载新页面后,是否可以保持子菜单打开?我希望子菜单信息始终可用,但仅在单击时显示 这是html- <div id="nav"> <nav> <ul id="menu" style="list-style-type: none;"> <li id="sub"> <a href="#">information
<div id="nav">
<nav>
<ul id="menu" style="list-style-type: none;">
<li id="sub">
<a href="#">information</a>
<ul>
<li> Hello, and welcome to this site</li>
</ul>
</li>
非常感谢您的帮助 您可以在导航栏下方使用iframe(显然您需要调整宽度、高度和..),并在单击菜单项时更改iframe的src,这将满足您的需要。当您的导航栏位于保持子菜单打开的页面上时,您需要添加一个类。或者更好的解决方案是在div中使用ajax加载页面。
#nav {
text-align:center;
list-style: none;
}
ul#menu {
background-color: #FFFFFF;
list-style: none outside none;
margin: 0 auto;
padding-bottom: 0;
padding-top: 0;
text-align: center;
width: 332px;
}
ul#menu:after {
content: "";
background-color: #FFFFFF;
height: 10px;
width: 100%;
display: block;
position: absolute;
left: 0;
margin-top: 20px;
}
ul#menu li {
float: left;
list-style:none;
}
ul#menu li a {
color: #666666;
font-size: 12px;
margin: 0;
padding: 0px 35px;
text-decoration: none;
}
ul#menu li a:hover {
background-color: #ccc;
}
a.selected-page, ul#menu a.selected-page:hover {
background-color: #FFFFFF;
}
li#sub ul {
display: none;
position: absolute;
background-color: #FFFFFF;
z-index: 22222;
overflow: hidden;
margin: 0;
}
li#sub ul li {
display: block;
float: none;
border-top-style: none;
border-width: 2px;
border-color: #FFFFFF;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
}
ul#menu li#sub:hover ul {
display: block;
}
ul#menu li#sub ul li:hover {
background-color: #FFFFFF;
}