列表中一行的兩種不同顏色

我想在列表的每一行上使用兩種不同的顏色。這裏有一個下拉列表的例子http://deanpauley.co.uk/O-SB/categories.html 因此，暗灰色的「攝影師畫廊」在淺灰色的「2011年德意志拜克斯攝影獎」上方，我希望他們在同一行的旁邊名單。列表中一行的兩種不同顏色

的代碼如下：

<div id="dropbox"></div> 
        <div id="Dropp style="position:relative;z-index:1000"> 
<div id="drop" style="position:absolute;z-index:3000"> 
    <ul> 


<li id="dropbox"><span class="nav-title" style="z-index:3000">Deutsche Börse Photography Prize 2011</span> <div class="nav-title" id="triangle"> 
        </div> 
      <ul id="ddd" class="subnav" style:"display: none;" > 
       <br> 
      <br> 
      <br> 
      <li>—</li> 
       <li class="section-title"> 
        <span class="section-title">Photographers Gallery</span> 
       </li> 
        <li><a href="#">Deutsche Börse Photography Prize 2010</a></li>

而CSS：

#drop { 
    font-size: 12px; 
    font-weight:bold; 
    position: fixed; 
    z-index:inherit; 
    left: 183px; 
    width:700px; 
    top: 15px; 
    } 

#drop ul { 
    background: #fff; 
    list-style-type: none;  
    } 

#drop ul li { 
    width: 750px; 
    float: left; 
    list-style-type: none;  
    margin: 0 10px -10 0; 
    } 

#drop ul li span { 
    display: block; 
    list-style-type: none;  
    padding: 1px 3px; 
    } 

#drop ul li ul { 
    background: #fff; 
    opacity: 0.9; 
    list-style-type: none;  
    display: none; 
    padding: 0 0em 0.5em 0; 
    } 

#drop ul li:hover ul { 
    list-style-type: none;  
    opacity: 0.9; 
    } 

#drop ul li ul li { 
    border: none;  
    list-style-type: none; 
    float: none; 
    padding-left:0px; 
    } 

#drop ul li ul li a { 
    display: block; 
    color: #808285; 
    text-decoration: none; 
    cursor:pointer; 
    } 


#drop ul li ul li a:hover { 
    background: #d8d8dc; 
    } 


#drop ul li.section-title SPAN.section-title { 
    color:#434442; 
    margin-left: -3px; 
    } 

span.nav-title { 
    border-bottom: 1px solid #808285; 
    position:fixed; 
    left: 223px; 
    width:744px; 
    top: 28px; 
    cursor:pointer; 

    }

我在編碼，因此任何建議，將不勝感激真正的新。我無法理解這一點！

來源

2011-09-09 Dean Pauley

我真的不明白。你想讓列表的第一行同時包含一個標題（在黑暗中）和一個項目（lightgrey）？ –

＆Py我想要的，而不是在例如具有一個部分標題（深灰色），例如下面的5個淺灰色項目的示例中的列表我希望所有5個淺灰色的項目有一個深灰色部分標題之前，他們在同一行，例如 –

所有線 - 攝影師圖庫（深灰色）項目1（淺灰色） –

好像有隻以下的HTML（列表中的HTML）

<ul id="ddd" class="subnav" style:"display: none;" > 
    <br> 
    <br> 
    <br> 
    <li>—</li> 
    <li><a href="#">Deutsche Börse Photography Prize 2010</a></li> 
    ... 
</ul>

（請注意，我刪除了標題文本）

所以你的問題可以概括我們將開始這樣的：

第1步：

你需要在每個我之前添加文本TEM

要做到這一點，假設你不知道菜單的確切結構，你就必須做一些複製/粘貼：每一行會是這樣的：
```
<li> 
    <span class="section-title">Photographers Gallery</span> 
    <a href="#">Deutsche Börse Photography Prize 2010</a> 
</li> 
```
你需要每行更改的文字。

第2步：

您需要顏色的文本。這很容易，它是在CSS已經完成，有以下幾點：

#drop ul li.section-title SPAN.section-title { color:#434442; margin-left: -3px; }

我們將改變它有點不太具體

#drop span.section-title { color:#434442; margin-left: -3px; }

而且應該這樣做:)

來源

2011-09-09 12:56:39

@Py謝謝！ gggggggggggggggggggggggg –

不客氣。 –

列表中一行的兩種不同顏色

回答

相關問題