更改裏

Question

我有在在一分鐘具有高於在菜單例如

標題（colour1）

選項1不同的部分以不同顏色的標題（一個下拉菜單中的文本的部分的顏色顏色2）

選項2（顏色2）

2選項（顏色2）

我想改變它，使它看起來名單如下（兩種顏色在一行中）：

標題（colour1）選項1（顏色2）

標題（colour1）選項2（顏色2）

標題（colour1）選項3（顏色2）

請問有人可以幫我一下嗎？在html如下：

    <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 2011.html">Deutsche Börse Photography Prize 2011</a></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

你爲什麼不這樣做

<ul> 
    <li class="section"><span class="title">Title 1</span><span class="content">Color 2</span></li> 
    <li class="section"><span class="title">Title 1</span><span class="content">Color 2</span></li> 
    <li class="section"><span class="title">Title 1</span><span class="content">Color 2</span></li> 
</ul> 

，然後你要2種背景顏色？或文字顏色？

li.section { 
    padding: 0; 
} 

li.section span.title { 
    margin: 0; 
    background-color: #COLOR1; 
} 

li.section span.content { 
    margin: 0; 
    background-color: #COLOR2; 
} 

的填充和保證金就在那兒兩個部分組合在一起很好（如果你正在談論的背景色。

即

----------- 
| | | 
----------- 

不

------ ------ 
| | | | 
------ ------