iOS问题 - 在溢出元素之外弹出一个元素

时间：2016-03-29 03:11:46

标签： html ios css

想知道是否有办法（不使用Jquery / JS）使一些元素出现在溢出元素之外，特别是在iOS中。看来我的jsfiddle在其他浏览器上运行正常但在iOS上运行不正常。

感谢您的帮助！

jsfiddle：https://jsfiddle.net/4dm0r3aa/15/

HTML 

<div class="CategoriesCarousel">
    <!-- blue boxes -->
    <a href="#" class="CarouselLink CCbed" tabindex="0"><img src="http://dummyimage.com/150x150/1F96FF/ffffff.png&text=Bedding" alt="">
    </a>
    <a href="#" class="CarouselLink CCkitchen" tabindex="1"><img src="http://dummyimage.com/150x150/1F96FF/ffffff.png&text=Kitchen+Dining" alt="">
    </a>
    <a href="#" class="CarouselLink CCbath" tabindex="2"><img src="http://dummyimage.com/150x150/1F96FF/ffffff.png&text=Bath" alt="">
    </a>
    <a href="#" class="CarouselLink CCfur" tabindex="3"><img src="http://dummyimage.com/150x150/1F96FF/ffffff.png&text=Furniture" alt="">
    </a>
    <a href="#" class="CarouselLink CCorg" tabindex="4"><img src="http://dummyimage.com/150x150/1F96FF/ffffff.png&text=Organization" alt="">
    </a>
    <a href="#" class="CarouselLink CCdecor" tabindex="5"><img src="http://dummyimage.com/150x150/1F96FF/ffffff.png&text=Decor" alt="">
    </a>
    <a href="#" class="CarouselLink CCelec" tabindex="6"><img src="http://dummyimage.com/150x150/1F96FF/ffffff.png&text=Electronics" alt="">
    </a>
    <a href="#" class="CarouselLink CClaundry" tabindex="7"><img src="http://dummyimage.com/150x150/1F96FF/ffffff.png&text=Laundry" alt="">
    </a>
    <!-- end of blue boxes -->
    <!-- hidden sub nav -->
    <ul class="CategoriesMenu CCbedMenu">
        <li><a href="#" title="">BED</a>
        </li>
        <li><a href="#" title="">Link 2</a>
        </li>
        <li><a href="#" title="">Link 3</a>
        </li>
        <li><a href="#" title="">Link 4</a>
        </li>
        <li><a href="#" title="">Link 5</a>
        </li>
        <li><a href="#" title="">Link 6</a>
        </li>
        <li><a href="#" title="">Link 7</a>
        </li>
        <li><a href="#" title="">Link 8</a>
        </li>
    </ul>
    <ul class="CategoriesMenu CCkitchenMenu">
        <li><a href="#" title="">KITCHEN</a>
        </li>
        <li><a href="#" title="">Link 2</a>
        </li>
        <li><a href="#" title="">Link 3</a>
        </li>
        <li><a href="#" title="">Link 4</a>
        </li>
        <li><a href="#" title="">Link 5</a>
        </li>
        <li><a href="#" title="">Link 6</a>
        </li>
        <li><a href="#" title="">Link 7</a>
        </li>
        <li><a href="#" title="">Link 8</a>
        </li>
    </ul>
    <ul class="CategoriesMenu CCbathMenu">
        <li><a href="#" title="">BATH</a>
        </li>
        <li><a href="#" title="">Link 2</a>
        </li>
        <li><a href="#" title="">Link 3</a>
        </li>
        <li><a href="#" title="">Link 4</a>
        </li>
        <li><a href="#" title="">Link 5</a>
        </li>
        <li><a href="#" title="">Link 6</a>
        </li>
        <li><a href="#" title="">Link 7</a>
        </li>
        <li><a href="#" title="">Link 8</a>
        </li>
    </ul>
    <ul class="CategoriesMenu CCfurMenu">
        <li><a href="#" title="">FURNITURE</a>
        </li>
        <li><a href="#" title="">Link 2</a>
        </li>
        <li><a href="#" title="">Link 3</a>
        </li>
        <li><a href="#" title="">Link 4</a>
        </li>
        <li><a href="#" title="">Link 5</a>
        </li>
        <li><a href="#" title="">Link 6</a>
        </li>
        <li><a href="#" title="">Link 7</a>
        </li>
        <li><a href="#" title="">Link 8</a>
        </li>
    </ul>
    <ul class="CategoriesMenu CCorgMenu">
        <li><a href="#" title="">ORGANIZATION</a>
        </li>
        <li><a href="#" title="">Link 2</a>
        </li>
        <li><a href="#" title="">Link 3</a>
        </li>
        <li><a href="#" title="">Link 4</a>
        </li>
        <li><a href="#" title="">Link 5</a>
        </li>
        <li><a href="#" title="">Link 6</a>
        </li>
        <li><a href="#" title="">Link 7</a>
        </li>
        <li><a href="#" title="">Link 8</a>
        </li>
    </ul>
    <ul class="CategoriesMenu CCdecorMenu">
        <li><a href="#" title="">DECOR</a>
        </li>
        <li><a href="#" title="">Link 2</a>
        </li>
        <li><a href="#" title="">Link 3</a>
        </li>
        <li><a href="#" title="">Link 4</a>
        </li>
        <li><a href="#" title="">Link 5</a>
        </li>
        <li><a href="#" title="">Link 6</a>
        </li>
        <li><a href="#" title="">Link 7</a>
        </li>
        <li><a href="#" title="">Link 8</a>
        </li>
    </ul>
    <ul class="CategoriesMenu CCelecMenu">
        <li><a href="#" title="">ELECTRONICS</a>
        </li>
        <li><a href="#" title="">Link 2</a>
        </li>
        <li><a href="#" title="">Link 3</a>
        </li>
        <li><a href="#" title="">Link 4</a>
        </li>
        <li><a href="#" title="">Link 5</a>
        </li>
        <li><a href="#" title="">Link 6</a>
        </li>
        <li><a href="#" title="">Link 7</a>
        </li>
        <li><a href="#" title="">Link 8</a>
        </li>
    </ul>
    <ul class="CategoriesMenu CClaundryMenu">
        <li><a href="#" title="">LAUNDRY</a>
        </li>
        <li><a href="#" title="">Link 2</a>
        </li>
        <li><a href="#" title="">Link 3</a>
        </li>
        <li><a href="#" title="">Link 4</a>
        </li>
        <li><a href="#" title="">Link 5</a>
        </li>
        <li><a href="#" title="">Link 6</a>
        </li>
        <li><a href="#" title="">Link 7</a>
        </li>
        <li><a href="#" title="">Link 8</a>
        </li>
    </ul>
    <!-- end of hidden sub nav -->
</div>

CSS 

.CategoriesCarousel {overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin: 0; width: 350px; white-space: nowrap;}

.CategoriesMenu {position: absolute; z-index: 1; background: #fff; padding: 10px 20px; border: 2px solid #000; top: 50px; top: 0px; visibility: hidden; width: 230px; margin: 0 auto; left: 0; right: 0;}

.CategoriesMenu ul {margin: 0;}

.CategoriesMenu li {list-style: none; border-bottom: 1px dashed #ccc; font-size: 10px; line-height: 1em; white-space: nowrap;}

.CategoriesMenu li:last-child {border: none;}

.CategoriesMenu li a {padding: 10px 0; display: block;}

a.CCbed:focus .CCbedMenu, .CCbedMenu:focus, .CCbedMenu:active {visibility: visible;}
a.CCkitchen:focus ~ .CCkitchenMenu, .CCkitchenMenu:focus, .CCkitchenMenu:active {visibility: visible;}
a.CCbath:focus ~ .CCbathMenu, .CCbathMenu:focus, .CCbathMenu:active {visibility: visible;}
a.CCfur:focus ~ .CCfurMenu, .CCfurMenu:focus, .CCfurMenu:active {visibility: visible;}
a.CCorg:focus ~ .CCorgMenu, .CCorgMenu:focus, .CCorgMenu:active {visibility: visible;}
a.CCdecor:focus ~ .CCdecorMenu, .CCdecorMenu:focus, .CCdecorMenu:active {visibility: visible;}
a.CCelec:focus ~ .CCelecMenu, .CCelecMenu:focus, .CCelecMenu:active {visibility: visible;}
a.CClaundry:focus ~ .CClaundryMenu, .CClaundryMenu:focus, .CClaundryMenu:active {visibility: visible;}

0 个答案:

没有答案
相关问题
最新问题