當前菜單顏色跨越整個下拉菜單

我有一個我們公司網站的下拉菜單，我試圖設置它，當您在特定頁面上時，導航/菜單中文本的顏色是不同的顏色。它部分工作。目前我的HTML和CSS文件改變了當前主標題的顏色，但是同樣的顏色也擴展到我的下拉菜單中，改變了所有鏈接的顏色。我能請你幫忙嗎？當前菜單顏色跨越整個下拉菜單

CSS：

.menu{ 
    padding:0; 
    margin:25px 0 0 0; 
} 
.menu { 
    list-style: none; 
    display: block; 
    float: right; 
} 
.menu > li { 
    position:relative; 
    width:auto; 
    line-height:40px; 
    text-align:center; 
    padding:0 10px; 
    float:left; 
    display:block; 
    border-right: 1px solid #d8d8d8; 
    z-index:300; 
} 
.menu li ul{ 
    padding: 10px 10px; 
    position:absolute; 
    background-color:white; 
    left:0; 
    width:auto; 
    display:none; 
} 
.menu li:hover > ul{ 
    display:block; 
} 
.menu li ul li{ 
    line-height:20px; 
    white-space:nowrap; 
    text-transform:capitalize; 
    margin-bottom:2px; 
} 
.menu li ul li:hover{ 
    color:#f15c22; 
} 
/*.menu li{ 
    float:left; 
    padding:12px; 
    border-right: 1px solid #d8d8d8; 
}*/ 
.menu li.last-menu-item{ 
    border: none; 
    padding-right:0; 
} 
.last-menu-item p{ 
    font-size: 15px; 
    color: #132d3c; 
    font-family: 'sansationbold'; 
    margin: 0em; 
} 
.menu a{ 
    color:#132d3c; 
    font-size:15px; 
    font-family: 'sansationbold'; 
    text-transform: uppercase; 
    text-decoration: none; 
    font-weight:lighter; 
} 
.menu a:hover{ 
    color:#f15c22; 
} 
#current-menu-item a{ 
    color:#f15c22; 
}

HTML：

<ul class="menu alignright"> 
       <li><a href="index.html">Home</a></li> 
       <li id="current-menu-item"><a href="about.html">About</a> 
        <ul> 
         <li><a href="about.html">Who We Are</a></li> 
         <li><a href="about.html">Values</a></li> 
         <li><a href="message.html">Owners Message</a></li> 
         <li><a href="#">Infotek Blog</a></li> 
         <li><a href="stories.html">Success Stories</a></li> 
         <li><a href="partners.html">Partners</a></li> 
        </ul> 
       </li> 
       <li><a href="products.html">Products &amp; Solutions</a> 
        <ul> 
         <li><a href="security.html">Security Solutions</a></li> 
         <li><a href="data.html">Data Solutions</a></li> 
         <li><a href="communication.html">Communication Solutions</a></li> 
         <li><a href="connect.html">Connectivity Solutions</a></li> 
         <li><a href="infra.html">Infrastructure Solutions</a></li> 
         <li><a href="resources.html">Resources</a></li> 
        </ul> 
       </li> 
       <li class="last-menu-item"><a href="contact.html">Contact</a> 
       <ul> 
        <li><p>Phone:</p></li> 
        <li><p>281-296-3160</p></li> 
        <br /> 
        <li><a href="mailto:[email protected]">Sales</a></li> 
        <li><a href="mailto:[email protected]">Support</a></li> 
        <li><a href="mailto:[email protected]">HR</a></li> 
        <li><a href="#">Blog</a></li> 
        <li><a href="contact.html">Contact Form</a></li> 
       </ul> 
       </li> 
      </ul>

我知道我的代碼我是混亂和草率，但我是相當新的HTML和CSS，居然在網站設計1班這個學期。提前致謝！

Here is a jsFiddle of the code above

來源

2013-10-29 Joshua Mathews

謝謝你，忘了包括:) –

只要改變這一點：

#current-menu-item a { 
    color:#f15c22; 
}

要這樣：

#current-menu-item > a { 
    color:#f15c22; 
}

的問題是，原代碼與#current-menu-item a是選擇所有a那名的#current-menu-item後裔，當你只希望它適用於直接的孩子。 >選擇器就是這樣做的，防止級聯進一步a後代。

Here is the updated jsFiddle

來源

2013-10-29 20:14:02 PlantTheIdea

太謝謝你了。我想在網頁設計1中，你真的瞭解基礎知識。希望下個學期我們將深入學習更多的html腳本。完美的作品！ –

那麼不要感謝我，謝謝複選標記！ ;）而這種快樂是我的，歡迎來到網站開發！ – PlantTheIdea

哦，我打算檢查你的標記，我不得不等待5分鐘才選擇它:) –

當前菜單顏色跨越整個下拉菜單

回答

相關問題