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添加样式 - 哪个不会玩球！