[英]first-child is not working properly in my css code
我在使用第一個孩子時遇到問題
我有以下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;
}
菜單產品正是我所需要的,還有硬件菜單,但是軟件菜單不起作用,任何想法如何解決?
非常感謝 :)
使用>
可以防止樣式影響孫子的樣式,因此請嘗試更改此樣式
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{
您的代碼太混亂了...您可以在沒有<ul>
和<li>
情況下復制相同的代碼..這是home/products
菜單的一小段.. home,您可以在此處找到解決方案..
您可以根據需要來使用必要的CSS。.但是,使用div實現這一點將使您在如何將元素放置在頁面上時有更多的自由。因此,這是我對您認為的問題的解決方案。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.