第一胎是不是在我的CSS代碼工作正常

我有以下的HTML代碼，以使一個菜單，第一級和第二級

<ul id="navMenu" > 
    <li class="parent"><a href="index.html">Home</a> 
    </li> 
    <li class="parent"><a href=".html">Products</a> 
     <ul ><li><a href="">Software</a> 
      <ul> 
       <li><a href="">Product 1</a></li> 
       <li><a href="">Product 2</a></li> 
       <li><a href="">Product 3</a></li> 
      </ul> 
      </li> 
      <li><a href="">Hardware</a> 
       <ul> 
        <li><a href="">Product 1</a></li> 
        <li><a href="">Product 2</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul>

和下面的CSS

#menuContainer{ 
    float: right; 
} 

ul#navMenu{ 
    margin: 25px 0 0; 
    list-style: none outside none; 
} 

ul#navMenu li{ 
    float: left; 
    margin: 0 0 0 0px; 
    position: relative; 
    z-index: 999; 
} 

ul#navMenu li a{ 
    display: block; 
    padding: 5px 0px; 
    font-size: 13px; 
    line-height: 12px; 
    background: transparent; 
    color: #444; 

    -webkit-transition: background-color 0.1s linear, color 0.1s linear; 
    -moz-transition: background-color 0.1s linear, color 0.1s linear; 
} 


ul#navMenu li.parent a{ 
    padding-right: 23px; 
    background-color: transparent; 
    background-repeat: no-repeat; 
    background-position: right top; 
    font-family: "Lucida Grande", Tahoma, Arial, sans-serif; 
    text-transform: uppercase; 


} 

ul#navMenu li a:hover, ul#navMenu li.current a{ 
    color: #CB0167 ; 
    text-decoration: none; 
    font-family: "Lucida Grande", Tahoma, Arial, sans-serif; 

} 

ul#navMenu li.parent a:hover, ul#navMenu li.current.parent a{ 
    background-position: right bottom; 
} 


/* - -- --- ---- Sub-Menu ---- --- -- - */ 

ul#navMenu li.parent ul{ 
    display: none; 
    position: absolute; 
    top: 25px; 
    left: 0; 
    width: 160px; 
    margin: 0; 
    padding: 0px 0 0; 
    list-style: none outside none; 
    overflow: visible; 
    z-index: 99; 
    border-top: 1px solid #eee; 

} 
.noJs ul#navMenu li.parent:hover ul{ 
    display: block; 
} 

ul#navMenu li.parent ul li{ 
    float: none; 
    margin: 0; 
    padding: 0; 

} 

ul#navMenu li.parent ul li a{ 
    display: block; 
    padding: 7px 10px; 
    color: #444; 
    background: #fff; 
    font-size: 11px; 
    border-right: 1px solid #eee; 
    border-left: 1px solid #eee; 
    text-transform: none; 
    background-image: url('../img/dots_menu.png'); 
    background-repeat: no-repeat; 
} 


ul#navMenu li.parent ul li:first-child a{ 
    background-image: none; 


    } 

ul#navMenu li.parent ul li:first-child a:hover{ 
    background-image: none; 
    } 

ul#navMenu li.parent ul li:last-child a{  
    box-shadow: 0 1px 0 rgba(0,0,0,0.05); 
    border-bottom: 1px solid #eee; 
} 
ul#navMenu li.parent ul li a:hover{ 
    color: #CB0167 !important; 
    background: #fefefe; 
    background-image: url('../img/dots_menu.png'); 
    background-repeat: no-repeat; 
} 
/* - -- --- ---- Second Level Sub-Menu ---- --- -- - */ 

ul#navMenu li.parent ul li ul{ 
    display: none; 
    position: absolute; 
    top: -1px; 
    left: 159px; 
    width: 160px; 
    margin: 0; 
    padding: 0 0 0 0px; 
    border-top: 1px solid #eee; 

} 

ul#navMenu li.parent ul li ul.leftMenu{ 
    left: -168px; 
    padding: 0 10px 0 0; 
} 

.noJs ul#navMenu li.parent:hover ul li ul{ 
    display: none; 
} 

.noJs ul#navMenu li.parent ul li:hover ul{ 
    display: block; 
} 

ul#navMenu li.parent ul li ul li:first-child a{ 
    background-image: none; 

} 
ul#navMenu li.parent ul li ul li:first-child a:hover{ 
    background-image: none; 

}

菜單產品正是我需要的，和硬件菜單，但軟件的菜單不工作，任何想法如何解決它？

感謝很多:)

來源

2012-02-20 Osaed

使用您提供的CSS，很難說出問題所在，因爲您的下拉菜單根本不會顯示（懸停時保持隱藏狀態）。我建議創建一個演示問題的http://jsfiddle.net/。您還需要描述「不工作」的含義。 – 2012-02-20 10:25:41

標題提到了第一個孩子，標籤也是如此，但代碼中沒有'：first-child'僞元素。 – 2012-02-20 10:46:35

使用>可以防止風格影響的孫子，所以要儘量改變這種

ul#navMenu li.parent ul li:first-child a{

這個

ul#navMenu li.parent ul li:first-child > a{

也

ul#navMenu li.parent ul li:first-child a:hover{

與此

ul#navMenu li.parent ul li:first-child > a:hover{

來源

2012-02-20 10:56:08 salahy

感謝它工作:) – Osaed 2012-02-20 10:57:03

你的代碼是太亂了......你可以複製相同的無<ul>和<li> ..這裏是你的home/products菜單的小片段..你家在這裏找到您的解決方案..

http://jsfiddle.net/NMrMN/

您可以將必要的CSS喲您的特定需求。但是，採用div爲實現這將給你如何在頁面上放置的要素更加自由..所以，這是我的解決方案，我認爲是你的問題..

來源

2012-02-20 10:22:08

第一胎是不是在我的CSS代碼工作正常

回答

相關問題