我的下拉列表太长了

-3

我的子菜单下拉列表太长，我希望它有一个“列”类型的外观，而不仅仅是“从上到下”列表看看.....什么编码做我需要添加或更改？这是现在的样子：我的下拉列表太长了

.primary-nav ul ul.children li.page_item_has_children:after, .primary-nav-container ul ul.sub-menu li.menu-item-has-children:after { 
    border-top: 6px solid transparent; 
    border-right: none; 
    border-bottom: 6px solid transparent; 
    border-left: 6px solid #ccc; 
    top: 25%; 
    right: 6px; 
} 

.primary-nav ul li a, .primary-nav-container ul li a { 
    padding-bottom: 0.75em; 
    font-size: 14px; 
    color: #888; 
    text-transform: capitalize; 

    -webkit-transition: all .25s ease-in-out; 
    -moz-transition: all .25s ease-in-out; 
    -ms-transition: all .25s ease-in-out; 
    -o-transition: all .25s ease-in-out; 
    transition: all .25s ease-in-out; 
} 

.primary-nav ul li a:hover, .primary-nav ul li.current_page_item a, .primary-nav-container ul li a:hover, .primary-nav-container ul li.current_page_item a { 
    color: #222; 
} 

.primary-nav-container ul ul.sub-menu, .primary-nav ul ul.children { 
    width: auto; 
    position: absolute; 
    left: 0; 
    top: 125%; 
    background: #fff; 
    border: 1px solid #ddd; 
    border-radius: 3px; 
    display: block; 
    opacity: 0; 
    overflow: hidden; 
    visibility: hidden; 

    -webkit-transition: all .25s ease-in-out; 
    -moz-transition: all .25s ease-in-out; 
    -ms-transition: all .25s ease-in-out; 
    -o-transition: all .25s ease-in-out; 
    transition: all .25s ease-in-out; 
} 

.primary-nav-container ul:hover li:hover > .sub-menu, .primary-nav ul:hover li:hover > .children { 
    opacity: 1; 
    z-index: 1000; 
    overflow: visible; 
    visibility: visible; 
} 

.primary-nav-container ul li:hover > .sub-menu, .primary-nav ul li:hover > .children { 
} 

.primary-nav-container ul ul.sub-menu li, .primary-nav ul ul.children li { 
    width: 100%; 
    min-width: 8em; 
    margin: 0.5em 5% 0.5em 0; 
    padding: 0; 
    border: none; 
    text-align: left; 
    float: none; 
} 

.primary-nav-container ul:hover li:hover > .sub-menu li, .primary-nav ul:hover li:hover > .children li { 
} 

.primary-nav-container ul ul.sub-menu li a, .primary-nav ul ul.children li a { 
    width: 100%; 
    padding: 0 10px; 
    display: inline-block; 
    white-space: nowrap; 
    float: none; 
} 

.primary-nav-container ul ul.sub-menu li > ul, .primary-nav ul ul.children li > ul { 
    top: -38%; 
    left: 100%;

感谢，梅艳芳

来源

2014-09-10 Anita Quiles

如果您也可以提供HTML，也许它做成的jsfiddle，那将是有益的。还有一个“列”与“从上到下”的例子会很好。目前还不清楚这意味着什么。 – GentlePurpleRain 2014-09-10 18:57:58

也许我可以更好地解释它？一旦悬停显示列表，我想列表显示在多列，而不是只有一个长列，你必须保持滚动到底部.....这里是网站>>> thnx2u.nolongerbroke.ws – 2014-09-12 17:45:34

[HTML多列选择列表]可能的重复（http://stackoverflow.com/questions/15203198/html-multiple-column-select-list） – GentlePurpleRain 2014-09-12 19:31:07

我相信你问的是select元素的size属性。如果指定，它将显示[x]右侧滚动条的项目数量，而不是显示下拉菜单。

<select size="5"> 
    <option>Option 1</option> 
    <option>Option 2</option> 
    <option>Option 3</option> 
    <option>Option 4</option> 
    <option>Option 5</option> 
    <option>Option 6</option> 
    <option>Option 7</option> 
    <option>Option 8</option> 
    <option>Option 9</option> 
    <option>Option 10</option> 
</select>

here is a sample

来源

2014-09-10 19:06:02

我不认为这就是我要找的东西？一旦悬停显示列表，我希望列表显示在多列，而不是只有一列，你必须保持滚动到底部.....这里是网站>>> thnx2u.nolongerbroke.ws – 2014-09-12 14:23:05

我的下拉列表太长了

回答

相关问题