Li格式化文本的問題請幫忙？

Question

我有在在一分鐘以上在菜單例如，不同的部分以不同顏色的標題的下拉菜單

標題（colour1）

選項1（顏色2）

（上方和下方）

我想改變它，這樣它看起來如下（在一行兩種顏色）就行了：

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

（並排）

我問一個問題提早了如何解決這個問題並得到答案。然而，列表項目仍然在上下，而不是並排。

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

    } 

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

並且在這裏使用它的一個例子： www.deanpauley.co。 uk/O-SB/categories.html

我給出的建議是將其更改爲：

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

任何人都可以幫忙嗎？這是否與填充/邊距文本不會在同一行上？

Answer 1

不知道這是否正是你的意思，但它會達到我認爲你想要的！

<ul> 
    <li class="section" style="overflow:hidden"> 
     <span class="title" style="display:block; float:left; width:somewidth">Title Color 1</span>       
     <ul class="content" style="width:somewidth; float:left"> 
      <li>Content Color 2</li> 
      <li>Content Color 2</li> 
      <li>Content Color 2</li> 
      <li>Content Color 2</li> 
     </ul> 
    </li> 
</ul> 

藉口內嵌樣式，但我很懶，今天下午:)

，這將導致：

標題顏色1 - > 內容顏色2
- >_ __ _ __ _ ___ Content Color 2
- > __ _ __ _ __ _ __內容顏色2
- >_ __ _ __ _ ____內容顏色2

替換「有些寬度與你所需要的寬度相比 - 會使它比使用自動寬度更均勻，更少bug。但是你可以使用自動寬度併爲ie6添加樣式 - 哪個不會玩球！