リストの1行に2色の色があります

Question

リストの各行に2種類の色が欲しいです。ここにドロップダウンリストの例がありますhttp://deanpauley.co.uk/O-SB/categories.html そうではなく、濃いグレーの「写真家ギャラリー」が明るい灰色の「Deutche Borse photography photography photo prize 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; 

    } 

私は何かアドバイスをいただければ幸いですので、コーディングで本当に新しいです。私の頭の中でこれはまったくできません！

Answer 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：

  あなたは、各Iの前にテキストを追加する必要があります 各行はそのようになります：：

  <li> 
      <span class="section-title">Photographers Gallery</span> 
      <a href="#">Deutsche Börse Photography Prize 2010</a> 
  </li> 
  

  あなたは正確にメニューの構造を知らない、あなたには、いくつかのコピー/貼り付けを行う必要があるでしょうと仮定して、それを行うために、TEM

  テキストをすべて行に変更する必要があります。

• ステップ2：

  あなたがテキストを色付けする必要があります。 これは簡単ですが、それはすでに、次のと、CSSで行われています：

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

  我々は少し少ない特定

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

そして、それはそれを行う必要があること、それを変更します:)