突出显示菜单项及其子菜单项

Highlight menu item and its submenu item

本文关键字：菜单项 显示      更新时间：2023-09-26

我有这个css代码，我需要这样做：我有一个包含 5 个项目的下拉菜单。项目 1（根）-项目2-项目3-项目4-项目5

例如，当我在页面内时，例如"Item4"，我需要"Item4"菜单项

和"Item1（根）"菜单项以相同的颜色突出显示。

非常感谢。

.menu-container{
}
.de-menu {
  color:#333;
  font-family:'Ovo';
  font-weight:400;
  font-size:13px;
  letter-spacing:3px;
  text-transform:uppercase;
  float:right;
}
.de-menu {
 	display:inline-block;
  	padding:0px 0px 0px 0px;
	margin:10px 0px 0px 0px;
  	height:93px;
}
.de-menu li {
  padding:0px 0px 0px 0px;
  margin:0px 0px 0px 0px;
  float:left;
  display:inline;
  list-style:none;
  position:relative;
}
.de-menu a {
  display:block;
  padding:35px 14px 34px 14px; 
  line-height:30px;
  text-decoration:none;
  color:#fff;
}
.de-menu .current-menu-item a{
  color:#e8c694;
}
.de-menu .current-menu-parent a{
  color:#e8c694;
}
/*.de-menu .active a {
  color:#red;
}*/
.de-menu li ul{
	box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.3); 
	-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.3); 
	-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.3);
	margin-left:25px;
	padding:0;
}
.de-menu li li {
	font-size:12px;
	letter-spacing:normal;
	text-transform:uppercase;
}
.de-menu li li a{
	padding:5px 15px 5px 15px;
	background:#64483E;
	border-top:none;
}
.de-menu a:hover {
  background:#64483E;
}
.de-menu li li a:hover{
	border-top:none;
}
.de-menu li li a:hover {
  background:url(../images/dotblack30.png) #513D32;
}
.de-menu li ul {
  width:170px;
  height:auto;
  position:absolute;
  top:100%;
  left:-25px;
  z-index:10;
  display:none;
  text-align:left;
}
.de-menu li li {
  display:block;
  float:none;
}
.de-menu li li ul{
	margin-left:0;
}
.de-menu li:hover > ul {
  display:block;
}
.de-menu li ul ul {
  left:100%;
  top:0px;
}
.de-menu li:hover a {
	background:#64483E;
}
.de-menu select {padding:10px; height:36px; font-size:14px; border:none; background:#513D32; color:#fff;}
.de-menu select option{padding:10px;}

（这种样式已经在样式表中第 275 行左右，所以只需要添加背景颜色）

.de-menu .current-menu-parent a {
 background: #64483E;
}

（这将添加到样式表中）：

.de-menu .current-menu-parent .sub-menu .current-menu-item a {
 background: url("../images/dotblack30.png") #513D32;
}

在我的 CSS 文件中，"active" 类突出显示了 css 值，例如 

"background-color: #FFFFFF"

我在每个页面中都使用这些：

<script>
    document.getElementById("PAGE_MENU_NAME_1").className = "active";
</script>

或

<script>
    document.getElementById("PAGE_MENU_NAME_2").className = "active";
</script>

或

<script>
    document.getElementById("PAGE_MENU_NAME_3").className = "active";
</script>

使用上述页面之一来查看您正在查看的页面。

这是我的母版页，如"菜单.php"

<ul id="menu">
   <li id="PAGE_MENU_NAME_1"><a href="page1.php">PAGEMENUNAME1"</a></li>
   <li id="PAGE_MENU_NAME_1"><a href="page2.php">PAGEMENUNAME2"</a></li>
   <li id="PAGE_MENU_NAME_3"><a href="page3.php">PAGEMENUNAME3"</a></li>
</ul>

我希望你明白我说的。

相关文章：