如何讓內部元素忽略樣式

<ul id="login"> 
    <li><a href="#">User></a></li> 
    <li><a href="#">Logout></a></li> 
</ul>

我確實讓我的菜單和子菜單正常工作。但最後一個項目來自一個局部視圖犯規表演，因爲這條線如何讓內部元素忽略樣式

/* hide the second level menu */ 
    .menu ul { 
      display: none;

我嘗試使用:not選擇推杆，但隨後顯示出一個錯誤的格式和第一子菜單停止工作。

.menu ul:not(#login)

在這個例子中，所有四個<LI>元素應該有相同的格式，第一個顯示子菜單。

也嘗試爲第二個UL創建不同的類並忽略我。

body { 
 
    background: black; 
 
} 
 

 
.menu { 
 
    display: block; 
 
} 
 

 
.menu li { 
 
    display: inline-block; 
 
    position: relative; 
 
    z-index: 100; 
 
} 
 

 
.menu li a { 
 
    font-weight: 600; 
 
    text-decoration: none; 
 
    padding: 11px; 
 
    display: block; 
 
    color: #ffffff; 
 
    -webkit-transition: all 0.2s ease-in-out 0s; 
 
    -moz-transition: all 0.2s ease-in-out 0s; 
 
    -o-transition: all 0.2s ease-in-out 0s; 
 
    -ms-transition: all 0.2s ease-in-out 0s; 
 
    transition: all 0.2s ease-in-out 0s; 
 
} 
 

 
.menu li a:hover, .menu li:hover > a { 
 
    color: #ffffff; 
 
    background: #9CA3DA; 
 
} 
 

 
/* hide the second level menu */ 
 
.menu ul { 
 
    display: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 150px; 
 
    position: absolute; 
 
    top: 43px; 
 
    left: 0px; 
 
    background: #ffffff; 
 
} 
 

 
/* display second level menu on hover */ 
 
.menu li:hover > ul { 
 
    display: block; 
 
} 
 

 
.menu ul li { 
 
    display: block; 
 
    float: none; 
 
    background: black; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.menu ul li a { 
 
    font-size: 12px; 
 
    font-weight: normal; 
 
    display: block; 
 
    color: #797979; 
 
    border-left: 3px solid #ffffff; 
 
    background: #ffffff; 
 
} 
 

 
.menu ul li a:hover, .menu ul li:hover > a { 
 
    background: #f0f0f0; 
 
    border-left: 3px solid #9CA3DA; 
 
    color: #797979; 
 
}

<nav> 
 
<ul class="menu"> 
 
    <li> 
 
     <a href="#"><i class="icon-home"></i>HOME</a> 
 
     <ul class="sub-menu"> 
 
      <li><a href="#">Sub-Menu 1</a></li> 
 
      <li><a href="#">Sub-Menu 2</a></li> 
 
      <li><a href="#">Sub-Menu 3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#"><i class="icon-user"></i>ABOUT</a></li> 
 
    <li>    
 
     <ul id="login"> 
 
      <li><a href="#">User</a></li> 
 
      <li><a href="#">Logout</a></li> 
 
     </ul> 
 
    </li> 
 
</ul> 
 
</nav>

來源

2016-06-14 Juan Carlos Oropeza

不知道是否是因爲HTML引擎，但現在犯規讓我選擇子菜單裏面的物品。如果移動鼠標非常慢，嘗試移到「HOME」下方時子菜單消失 –

爲什麼不使用'.menu .sub-menu'而不是'.menu ul'？無論如何，很難得到你想要達到的目標。 – Stickers

@Pangloss我想看到四個項目'主頁關於用戶註銷'現在最後兩個不顯示。如果我使用'：not'選擇器將顯示，但子菜單停止工作 –

你能解釋爲什麼你沒有把User和Logout在Home和About像同級別：

<nav> 
<ul class="menu"> 
    <li> 
     <a href="#"><i class="icon-home"></i>HOME</a> 
     <ul class="sub-menu"> 
      <li><a href="#">Sub-Menu 1</a></li> 
      <li><a href="#">Sub-Menu 2</a></li> 
      <li><a href="#">Sub-Menu 3</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#"><i class="icon-user"></i>ABOUT</a> 
    </li> 
    <li><a href="#">User</a></li> 
    <li><a href="#">Logout</a></li> 
</ul> 
</nav>

它應該工作！

編輯

用CSS的以下修改，您的菜單應該工作。

.menu ul.sub-menu li a { ... } 
.menu ul.sub-menu li a:hover, .menu ul.sub-menu li:hover > a { ... } 
#login {padding: 0; text-transform: uppercase;}

codepen

來源

2016-06-14 22:00:04

因爲這是部分視圖的結果 –

好的，所以你可以在你的CSS中添加'sub-menu'類而不是'not {#login}。希望這支筆適合你：http://codepen.io/lampt2509/pen/BzKXrR –

是的，這似乎工作正常。任何想法，爲什麼如果你移動鼠標緩慢的菜單和子菜單子菜單關閉？ –

你本身放置在列表項關於鏈接。下面是正確的HTML：

<nav> 
<ul class="menu"> 
    <li> 
     <a href="#"><i class="icon-home"></i>HOME</a> 
     <ul class="sub-menu"> 
      <li><a href="#">Sub-Menu 1</a></li> 
      <li><a href="#">Sub-Menu 2</a></li> 
      <li><a href="#">Sub-Menu 3</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#"><i class="icon-user"></i>ABOUT</a> 
     <ul id="login"> 
      <li><a href="#">User</a></li> 
      <li><a href="#">Logout</a></li> 
     </ul> 
    </li> 
</ul> 
</nav>

來源

2016-06-14 21:44:56

你不明白。「用戶」和「註銷」應該在導航欄上，而不是「About」的子菜單上。所以我想要導航欄上的4個項目。一個會有子菜單。在這種情況下，'HOME' –

因此，您需要4個內嵌項目，例如：主頁關於用戶註銷您仍然會在HOME下有子菜單項。這是你想要的嗎？ –

正確，現在最後兩個沒有顯示。當我嘗試使用'：not'選擇器顯示但是子菜單項停止工作 –

下面的代碼：

<nav> 
    <ul class="menu"> 
    <li> 
     <a href="#"><i class="icon-home"></i>HOME</a> 
     <ul class="sub-menu"> 
     <li><a href="#">Sub-Menu 1</a></li> 
     <li><a href="#">Sub-Menu 2</a></li> 
     <li><a href="#">Sub-Menu 3</a></li> 
     </ul> 
    </li> 
    <li><a href="#"><i class="icon-user"></i>ABOUT</a></li> 
    <li id="user"><a href="#">USER</a></li> 
    <li id="logout"><a href="#">LOGOUT</a></li> 
    </ul> 
</nav>

應該這樣做！

來源

2016-06-14 21:57:17

如何讓內部元素忽略樣式

回答

相關問題