Two different colors on one line of a list

I would like two different colours on each line of a list. There is an example of the drop down list here http://deanpauley.co.uk/O-SB/categories.html So rather that the dark grey "Photographers Gallery" being above the light grey "Deutche Borse photography prize 2011" I would like them as to be beside each other on the same line of the list.

The code is as follows:

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

And the 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;

    }

I am really new at coding so any advice would be much appre开发者_如何学编程ciated. Can't get my head around this at all!

We'll start as if there was only the following HTML (the HTML of the list)

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

(Note that I removed the title text)

So your problem can be summed up like that:

• Step 1 :

  You need to add the text before each item

  To do that, assuming that you don't know exactly the structure of the menu, you'll have to do some copy/paste: each line would be like that:

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

  You'll need to change the text for every line.

• Step 2:

  You need to color the text. This is easy, it's already done in the CSS, with the following:

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

  We'll change it to be a bit less specific

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

And that should do it :)