css - My dropdown list is too long -
my sub-menu dropdown list long , want have "column" type of instead of "top bottom" list look.....what coding need add or change? how looks now:
.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 { padding-bottom: 0.75em; font-size: 14px; color: #888; text-transform: capitalize; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .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 { 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: .25s ease-in-out; -moz-transition: .25s ease-in-out; -ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .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 { 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%;
thanks, anita
i believe you're asking size
attribute of select
element. if specified, show [x] number of items scrollbar right rather showing dropdown.
<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>
Comments
Post a Comment