CSS：屬性格式的語法來指代元件與ID

價這個教程：https://www.servage.net/blog/2009/03/20/create-a-cool-css-based-drop-down-menu/CSS：屬性格式的語法來指代元件與ID

我用外部樣式表，並簡單地把各#menu CSS項之前，這樣的：

#menu ul{ 
font-family: Arial, Verdana; 
font-size: 14px; 
margin: 0; 
padding: 0; 
list-style: none;}

或：

#menu ul li{ 
display: block; 
position: relative; 
float: left;}

但是，當我參考#menu，菜單無法正確呈現。它使父母'li'不受CSS影響。

http://jsfiddle.net/UGW2L/

任何想法？

THX，戴夫

來源

2012-02-05 user1163859

能爲您提供的jsfiddle例子嗎？另外，你可以試試我的教程http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/ – elclanrs 2012-02-05 02:16:54

在這裏你去：http://jsfiddle.net/UGW2L/ – user1163859 2012-02-05 02:21:01

我沒有使用jQuery;） – user1163859 2012-02-05 02:21:38

#menu ul本指標（任何ul內側id='menu'元素的）...

<div id="menu"> 
    <ul> <!-- <<-- this element is the target --> 
     ... 
    </ul> 
</div>

（div僅僅是一個例子，與id="menu"任何元件可以被上面所用）

ul#menu目標這（ul與id='menu'）...

<ul id="menu"> <!-- <<-- this element is the target --> 
    ... 
</ul>

編輯按評論：

報價：「......我缺少的‘盒子’的父節點圍繞」

我認爲你引用的節點是<li>，就在父<ul id='menu'>的內部，你根本沒有把它作爲目標。

只需將ul#menu li a添加到您的箱子樣式。（注意逗號。它分隔兩個完全獨特的選擇共享相同的造型。）

ul#menu li a, 
ul#menu ul li a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #2C5463; 
    margin-left: 1px; 
    white-space: nowrap; 
}

http://jsfiddle.net/cWpEg/1/

看到區別？

ul#menu是父母。 ul#menu li是父項中的第一項。 ul#menu li a是父母的第一個孩子內部的鏈接。

由於ul#menu li目標任何&所有<li>的屬於ul#menu父母的孩子，你只需要一個選擇......

ul#menu li a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #2C5463; 
    margin-left: 1px; 
    white-space: nowrap; 
}

http://jsfiddle.net/cWpEg/2/

還要注意它是如何的了屏幕的全寬。

要定位&風格只是父母，添加像這樣的東西。

ul#menu { 
    display: block; 
    position: relative; 
    float: left; 
    list-style: none; 
}

http://jsfiddle.net/cWpEg/6/

來源

2012-02-05 02:37:25 Sparky

謝謝，但這似乎並沒有工作？檢查：http://jsfiddle.net/cWpEg/ – user1163859 2012-02-05 11:44:17

如果你看到這裏的實例，我錯過了父節點周圍的'盒'：https：//www.servage.net/blog/wp-content/uploads /2009/03/css-menu.html – user1163859 2012-02-05 11:46:42

@ user1163859：確實有效。您仍然無法直接定位父元素。查看我的編輯。 – Sparky 2012-02-05 15:59:24

你的HTML是這樣的：

<ul id="menu">

這意味着你的CSS需要是這樣的：

ul#menu

您當前的CSS在裏面尋找一個「LI的一個UL的內部的其他元素的ID爲MENU'

來源

2012-02-05 02:23:44

http://jsfiddle.net/cWpEg/似乎把ul＃菜單沒有伎倆？ – user1163859 2012-02-05 11:42:45

我正在使用外部樣式表，並且我無法使其正常工作。孩子李仍然可見。我從頭開始做了很多次，而且總是一樣的。它適用於我將CSS併入HTML頁面，但不是在外部加載時。我在這裏錯過了什麼嗎？ – user1163859 2012-02-05 22:21:12

這意味着您的外部CSS文件鏈接可能不正確。 – 2012-02-05 22:34:36

CSS：屬性格式的語法來指代元件與ID

回答

相關問題