如何在選擇子菜單時將菜單設置爲選中狀態

我有一個創建菜單的任務。我想在選擇其子圖時將菜單設置爲選中狀態。我的css文件是如何在選擇子菜單時將菜單設置爲選中狀態

#wrapper { 
    width:100%; 
    height:500px; 
} 
h2 { 
    color:#787878; 
} 
#menu, #menu ul { 
    list-style: none; 
    //padding: 2px; 
} 
#nav{ 
    border-bottom: 1px solid #CCCCCC; 
    border-spacing: 0; 
    display: table; 
    float: left; 
    height: 25px; 
    width: 100%; 
} 
#nav ul { 
    margin: 0; 
    padding: 0; 
} 
#nav > ul > li:hover { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border-color: #ccC#ccC#FFFFFF; 
    border-style: solid; 
    border-width: 1px; 
    padding-bottom: 0; 
    border-radius:1px; 
} 
.menu-child { 
    width:160px; 
    display:block !important; 

} 
#nav ul li ul li:hover { 
} 
#nav ul li ul :hover { 
} 
#menu { 
    float: left; 
    height: 25px; 
} 
#menu> li { 
    float: left; 
} 
#menu li a { 
    display: block; 
    height: 2em; 
    line-height: 2em; 
    padding: 0 1.5em; 
    text-decoration: none; 
} 
#menu ul { 
    position: absolute; 
    display: none; 
    z-index: 999; 
} 
#menu ul li a { 
} 
#menu li:hover ul { 
    display: block; 
} 
#menu { 
    font-family: Arial; 
    font-size: 12px; 
    //background: #F8F8F8; 
} 
#menu > li > a { 
    font-family: Verdana, Arial, sans-serif; 
    font-style: normal; 
    color:#787878; 
    font-weight: bold; 
} 
#menu > li > a:hover { 
    color: #000; 
} 
#menu ul { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border-radius: 0 0 5px 5px; 
    margin-top: 1px; 
} 
#menu ul li a { 
    color: #000; 
} 
#menu ul li a:hover { 
    background: #E0E0E0; 
} 
.logout { 
    float:right; 
    width:300px; 
} 
.title { 
    float:left; 
    width:300px; 
} 
#footer { 
    width:100%; 
    height:100px; 
    float:left; 
} 
.subchild-list { 
    margin:0; 

    position: absolute !important; 
    top:0; 
    right:-87px; 
    //border-color: #ccC#FFFFFF #ccC#FFFFFF; 
} 
.child-list ul { 
    display: none !important; 
    position: absolute !important; 
    z-index: 999 !important; 
} 
.child-list li { 
    position:relative !important; 

} 
.child-list li:hover ul { 
    display: block !important; 
} 

.child-list li{ 

    border-left:1px solid #C0C0C0; 
    border-right:1px solid #C0C0C0; 
} 

.child-list ul{ 
    border-top:1px solid #C0C0C0; 
    border-bottom:5px solid #C0C0C0; 
} 

.child-list{ 
    border-bottom:5px solid #C0C0C0; 
} 
.nav-subchild 
{ 
    border-color: #ccC#FFFFFF #ccC#FFFFFF; 
} 
#nav > ul > li:hover { 
border-color: #ccC#ccC#FFFFFF; 
border-style: solid; 
border-width: 1px; 
padding-bottom: 0; 
border-radius:1px; 
} 

#menu > li { 
border-bottom:#ccc; 
border-left: 1px solid #fff; 
border-right: 1px solid #fff; 
border-top: 1px solid #fff; 
} 
#nav ul li:hover ul { margin-left:-1px; } #nav ul li ul:hover { margin-left:-1px; } 
ul li ul li 
{ 
    width: 180px; 
} 
.subchild-list { 
    margin:0; 
    right:-183px; 
    position: absolute !important; 
    top:0; 
} 
.hassub { 
    background: url('arrow.gif') right no-repeat; 
}

我該如何解決這個問題？

來源

2013-02-28 Niths

你可以使用'CSS3''：target'還是你需要 otinanai 2013-02-28 13:20:27

試試這個字體重量：大膽的;

來源

2013-03-01 06:49:03 sumith

謝謝..其工作 – Niths 2013-03-01 06:51:11

如果我理解您的問題，您希望頂層導航即使在子級懸停上也具有活動狀態。

在這種情況下，這裏的答案（附加到你的CSS）：

#menu li:hover > a { 
    color: #000; 
}

的jsfiddle：http://jsfiddle.net/wDcV5/2/

來源

2013-02-28 15:11:55 estrar

@ estrar-您是否瞭解響應式設計？ – Niths 2013-03-07 06:30:17

@Nithu當然，爲什麼？ – estrar 2013-03-08 07:29:45

@ estrar-send我的一些文章或一些例子請 – Niths 2013-03-08 08:11:52

如何在選擇子菜單時將菜單設置爲選中狀態

回答

相關問題