我无法在CSS中显示标题菜单

时间:2014-02-15 13:11:11

标签: css

问题是,当我单击标题菜单时,例如“Wohnen”,当我打开此选项卡时打开底部标签,标题“Wohnen”不再是“:hover”(显示不同的字体颜色和边框在两侧)。如何在开始标签上制作过渡鼠标,标题是否有效?

/*After hover link show me the menu*/
div#menu a#menu-title:hover + #sub_backbone,
div#menu a#menu-title:hover + #sub_backbone_center,
div#menu a#menu-title:hover + #sub_backbone_end{
    display: block;
}
/*Switching to tab*/
div#menu li #sub_backbone:hover, 
div#menu li #sub_backbone_center:hover, 
div#menu li #sub_backbone_end:hover{
    display: block;
}

工作示例就在这里 http://jsfiddle.net/Tf4fc/

1 个答案:

答案 0 :(得分:3)

首先,id应该是唯一的。你不应该重复id。而是将您的id的sub_backbone和menu-title更改为类。

其次,只有当您在同一个悬停触发器上显示子菜单和菜单标题的边框时才能实现您想要实现的目标,例如#menu li:hover

以下是 Fiddle

#menu li:hover #sub_backbone{
    display: block;
}
#menu li:hover #menu-title{

    border-left: 1px solid #E2DAD1;
    border-right: 1px solid #E2DAD1;
    border-top: 1px solid #E2DAD1;
}

#menu li:hover .menu_header{
    color: #f26623;
    background-color: #f0efe6;
}

请参阅我在#menu li:hover

上触发所有css