0

嗨，我想知道如何打破 ul 列表，我搜索并发现了很多资源，但没有一个应用在菜单上，我尝试使用类似这样的东西，使用 CSS2或这个 http:/将 <ul> 拆分为两列/csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

但我认为我不太了解，因为我无法构建它..

我做了一个 JsFiddle，所以你可以看到我需要在 2 列上有两个中断的大 ul...（还有一个问题是在主列表中嵌套了其他 ul。

http://jsfiddle.net/dvVn6/1/

这是我的 HTML // CSS

<a  onclick="showdiv('stateCity'); " >
       <div class="selBox22" style="cursor:pointer; " id="toggle_value1">
           <div class="wrapbox22">Mi ubicación</div>
            </div>
       </a>

<!--New Code Start-->

   <div id="stateCity"   style="float: right; margin-left:45%;
height: auto;
width:600px;
border: 2px solid #000;
left: 16px;
margin-top: 0px;
position: absolute;
z-index: 90000;
border-radius: 5px;
padding: 5px;
background:#E8E8E8; font-style:oblique; display:none;" >

   <ul>
   <li><strong style="font-size:16px; color:#660000; font-style:oblique;">Mi ubicación</strong>
   <span style="display:inline; float:right;"><a onclick="Hidediv('stateCity'); " style="cursor:pointer;">Close</a></span>
   <hr>
   </li>

<li><a class="st" href="javascript:void(0);">Aguascalientes</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2228&01&city=Aguascalientes">Aguascalientes</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Baja California</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2251&02&city=Ensenada">Ensenada</a></li>

        <li><a href="index.php?page=location/change-city/2276&02&city=Mexicali">Mexicali</a></li>

        <li><a href="index.php?page=location/change-city/2310&02&city=Tijuana">Tijuana</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Baja California Sur</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2266&03&city=La Paz">La Paz</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Campeche</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2230&04&city=Campeche">Campeche</a></li>

        <li><a href="index.php?page=location/change-city/2232&04&city=Carmen">Carmen</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Chiapas</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2306&05&city=Tapachula">Tapachula</a></li>

        <li><a href="index.php?page=location/change-city/2317&05&city=Tuxtla Gutierrez">Tuxtla Gutierrez</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Chihuahua</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2236&06&city=Chihuahua">Chihuahua</a></li>

        <li><a href="index.php?page=location/change-city/2248&06&city=Delicias">Delicias</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Coahuila de Zaragoza</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2227&07&city=Acuna">Acuna</a></li>

        <li><a href="index.php?page=location/change-city/2279&07&city=Monclova">Monclova</a></li>

        <li><a href="index.php?page=location/change-city/2291&07&city=Piedras Negras">Piedras Negras</a></li>

        <li><a href="index.php?page=location/change-city/2297&07&city=Saltillo">Saltillo</a></li>

        <li><a href="index.php?page=location/change-city/2315&07&city=Torreon">Torreon</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Colima</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2242&08&city=Colima">Colima</a></li>

        <li><a href="index.php?page=location/change-city/2271&08&city=Manzanillo">Manzanillo</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Distrito Federal</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2277&09&city=Mexico">Mexico</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Durango</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2249&10&city=Durango">Durango</a></li>

        <li><a href="index.php?page=location/change-city/2255&10&city=Gomez Palacio">Gomez Palacio</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Guanajuato</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2233&11&city=Celaya">Celaya</a></li>

        <li><a href="index.php?page=location/change-city/2262&11&city=Irapuato">Irapuato</a></li>

        <li><a href="index.php?page=location/change-city/2267&11&city=Leon">Leon</a></li>

        <li><a href="index.php?page=location/change-city/2296&11&city=Salamanca">Salamanca</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Guerrero</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2226&12&city=Acapulco">Acapulco</a></li>

        <li><a href="index.php?page=location/change-city/2237&12&city=Chilpancingo">Chilpancingo</a></li>

        <li><a href="index.php?page=location/change-city/2261&12&city=Iguala">Iguala</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Hidalgo</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2290&13&city=Pachuca">Pachuca</a></li>

        <li><a href="index.php?page=location/change-city/2316&13&city=Tulancingo">Tulancingo</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Jalisco</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2256&14&city=Guadalajara">Guadalajara</a></li>

        <li><a href="index.php?page=location/change-city/2293&14&city=Puerto Vallarta">Puerto Vallarta</a></li>

        <li><a href="index.php?page=location/change-city/2312&14&city=Tlaquepaque">Tlaquepaque</a></li>

        <li><a href="index.php?page=location/change-city/2314&14&city=Tonala">Tonala</a></li>

        <li><a href="index.php?page=location/change-city/2325&14&city=Zapopan">Zapopan</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Mexico</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2234&15&city=Chalco">Chalco</a></li>

        <li><a href="index.php?page=location/change-city/2238&15&city=Chimalhuacan">Chimalhuacan</a></li>

        <li><a href="index.php?page=location/change-city/2240&15&city=Coacalco">Coacalco</a></li>

        <li><a href="index.php?page=location/change-city/2244&15&city=Cuautitlan Izcalli">Cuautitlan Izcalli</a></li>

        <li><a href="index.php?page=location/change-city/2250&15&city=Ecatepec">Ecatepec</a></li>

        <li><a href="index.php?page=location/change-city/2260&15&city=Huixquilucan">Huixquilucan</a></li>

        <li><a href="index.php?page=location/change-city/2263&15&city=Ixtapaluca">Ixtapaluca</a></li>

        <li><a href="index.php?page=location/change-city/2265&15&city=Juarez">Juarez</a></li>

        <li><a href="index.php?page=location/change-city/2268&15&city=Lopez Mateos">Lopez Mateos</a></li>

        <li><a href="index.php?page=location/change-city/2270&15&city=Los Reyes">Los Reyes</a></li>

        <li><a href="index.php?page=location/change-city/2275&15&city=Metepec">Metepec</a></li>

        <li><a href="index.php?page=location/change-city/2282&15&city=Naucalpan">Naucalpan</a></li>

        <li><a href="index.php?page=location/change-city/2283&15&city=Nezahualcoyotl">Nezahualcoyotl</a></li>

        <li><a href="index.php?page=location/change-city/2284&15&city=Nicolas Romero">Nicolas Romero</a></li>

        <li><a href="index.php?page=location/change-city/2302&15&city=San Pablo De Las Salinas">San Pablo De Las Salinas</a></li>

        <li><a href="index.php?page=location/change-city/2309&15&city=Texcoco">Texcoco</a></li>

        <li><a href="index.php?page=location/change-city/2311&15&city=Tlalnepantla">Tlalnepantla</a></li>

        <li><a href="index.php?page=location/change-city/2313&15&city=Toluca">Toluca</a></li>

        <li><a href="index.php?page=location/change-city/2322&15&city=Xico">Xico</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Michoacan de Ocampo</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2281&16&city=Morelia">Morelia</a></li>

        <li><a href="index.php?page=location/change-city/2318&16&city=Uruapan">Uruapan</a></li>

        <li><a href="index.php?page=location/change-city/2324&16&city=Zamora">Zamora</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Morelos</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2245&17&city=Cuautla">Cuautla</a></li>

        <li><a href="index.php?page=location/change-city/2246&17&city=Cuernavaca">Cuernavaca</a></li>

        <li><a href="index.php?page=location/change-city/2264&17&city=Jiutepec">Jiutepec</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Nayarit</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2308&18&city=Tepic">Tepic</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Nuevo Leon</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2229&19&city=Apodaca">Apodaca</a></li>

        <li><a href="index.php?page=location/change-city/2253&19&city=Garza Garcia">Garza Garcia</a></li>

        <li><a href="index.php?page=location/change-city/2254&19&city=General Escobedo">General Escobedo</a></li>

        <li><a href="index.php?page=location/change-city/2257&19&city=Guadalupe">Guadalupe</a></li>

        <li><a href="index.php?page=location/change-city/2280&19&city=Monterrey">Monterrey</a></li>

        <li><a href="index.php?page=location/change-city/2301&19&city=San Nicolas De Los Garza">San Nicolas De Los Garza</a></li>

        <li><a href="index.php?page=location/change-city/2303&19&city=Santa Catarina">Santa Catarina</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Oaxaca</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2287&20&city=Oaxaca">Oaxaca</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Puebla</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2292&21&city=Puebla">Puebla</a></li>

        <li><a href="index.php?page=location/change-city/2307&21&city=Tehuacan">Tehuacan</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Queretaro de Arteaga</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2294&22&city=Queretaro">Queretaro</a></li>

        <li><a href="index.php?page=location/change-city/2298&22&city=San Juan Del Rio">San Juan Del Rio</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Quintana Roo</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2231&23&city=Cancun">Cancun</a></li>

        <li><a href="index.php?page=location/change-city/2235&23&city=Chetumal">Chetumal</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">San Luis Potosi</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2239&24&city=Ciudad Valles">Ciudad Valles</a></li>

        <li><a href="index.php?page=location/change-city/2299&24&city=San Luis Potosi">San Luis Potosi</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Sinaloa</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2247&25&city=Culiacan">Culiacan</a></li>

        <li><a href="index.php?page=location/change-city/2269&25&city=Los Mochis">Los Mochis</a></li>

        <li><a href="index.php?page=location/change-city/2273&25&city=Mazatlan">Mazatlan</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Sonora</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2258&26&city=Guaymas">Guaymas</a></li>

        <li><a href="index.php?page=location/change-city/2259&26&city=Hermosillo">Hermosillo</a></li>

        <li><a href="index.php?page=location/change-city/2285&26&city=Nogales">Nogales</a></li>

        <li><a href="index.php?page=location/change-city/2288&26&city=Obregon">Obregon</a></li>

        <li><a href="index.php?page=location/change-city/2300&26&city=San Luis Rio Colorado">San Luis Rio Colorado</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Tabasco</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2320&27&city=Villahermosa">Villahermosa</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Tamaulipas</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2272&28&city=Matamoros">Matamoros</a></li>

        <li><a href="index.php?page=location/change-city/2286&28&city=Nuevo Laredo">Nuevo Laredo</a></li>

        <li><a href="index.php?page=location/change-city/2295&28&city=Reynosa">Reynosa</a></li>

        <li><a href="index.php?page=location/change-city/2304&28&city=Tampico">Tampico</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Veracruz-Llave</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2241&30&city=Coatzacoalcos">Coatzacoalcos</a></li>

        <li><a href="index.php?page=location/change-city/2243&30&city=Cordoba">Cordoba</a></li>

        <li><a href="index.php?page=location/change-city/2278&30&city=Minatitlan">Minatitlan</a></li>

        <li><a href="index.php?page=location/change-city/2289&30&city=Orizaba">Orizaba</a></li>

        <li><a href="index.php?page=location/change-city/2305&30&city=Tampico">Tampico</a></li>

        <li><a href="index.php?page=location/change-city/2319&30&city=Veracruz">Veracruz</a></li>

        <li><a href="index.php?page=location/change-city/2321&30&city=Xalapa">Xalapa</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Yucatan</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2274&31&city=Merida">Merida</a></li>
            </ul>
</li>


<li><a class="st" href="javascript:void(0);">Zacatecas</a>
    <ul class="ulCityDN">

        <li><a href="index.php?page=location/change-city/2252&32&city=Fresnillo">Fresnillo</a></li>

        <li><a href="index.php?page=location/change-city/2323&32&city=Zacatecas">Zacatecas</a></li>
            </ul>
</li>

</ul> 
</div>  
     <!--New Code Start-->

CSS

#stateCity{
 float:left;height:auto; width:600px; border:2px solid #000;left:16px; margin-top:0px;position:absolute;z-index:90000; border-radius:5px; padding:5px; background:#3FF;
    }
#stateCity ul{list-style-type:none;}
#stateCity ul li:hover{background:#CCC; width:inherit; cursor:pointer;}
#stateCity ul li ul{ float:left;list-style-type:none; display:none;position:absolute; margin-left:180px; background:#CCC;}
#stateCity ul li:hover > ul{ display:block; }

#stateIN{
 height:auto; width:600px; border:2px solid #000; margin:50px auto; z-index:90000; border-radius:5px; padding:5px; background:#3FF;
    }
#stateIN ul{list-style-type:none;}
#stateIN ul li { width:220px;}
#stateIN ul li:hover{background:#CCC; width:200px;}
#stateIN ul li ul{ float:left;list-style-type:none; display:none;position:absolute; margin-left:200px; margin-top:-19px; background-color:#CCC;}
#stateIN ul li:hover > ul{ display:block; }

.cmpbut
{
    width: 193px;
    height: 40px;
    bottom: 0px;
    right: 0px;
}


.dv_over
{
     width: 1200px;
     height:29px;

     position:absolute;

     margin-top: 10px;
     margin-bottom: 15px;
     overflow: hidden;

     background: none repeat scroll 0 0 #F4F4F4;
     border: 1px solid #EAEAEA;
}
.dv_first_inner
{
     padding-left:0px;
     float: left;
     position: relative;
     left: 0px;
}


.dv_second_inner
{
    float:left; 
    margin-top:8px;
    width:1200px;
    position: relative;
    text-align:center;  
}

.sad_next {cursor: pointer;float: left;height: 29px;right: 0px;position: absolute; width: 28px;z-index: 1001;}
.sad_previous {cursor: pointer;float: left;height: 29px;left: 0px;position: absolute;width: 28px;z-index: 1001;}
4

1 回答 1

1

好的，我只是设法做到了，如果你想制作两列..悬停菜单..这里是代码..

http://jsfiddle.net/dvVn6/2/

诀窍是浮动 li 元素并写入不同的 %，因为“根”li 是 50%...这使得 2 列..

对于“内部”li，将宽度设置为 100%..

我在你的 ul 上设置了一个#double id，你可以看到小提琴。它都在那里。

这是我更改和添加的内容。

#stateCity ul{list-style-type:none;}
#stateCity li{  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:right;
  display:inline;}

#double li ul li {color:#000; width:100%;}
#stateCity li ul li{ float:right; }
#double li  { width:50%;} <span class="code-comment">/* 2 col */</span>
#double li ul li { width:100%;} <span class="code-comment">/* 2 col */</span>
于 2013-06-29T03:40:04.427 回答