Question

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

.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%;

谢谢，阿妮塔

Answer 1

我相信您所要求的是size元素的select属性。如果指定，它将显示带有向右滚动条的项目的[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

我的下拉列表太长了

1 个答案: