Помещение отступа внутри элемента <a>внутри элемента <li> - PullRequest
Новая
       42

Помещение отступа внутри элемента <a>внутри элемента <li>

0 голосов
/ 24 марта 2012

Я пытаюсь добавить некоторые отступы для ссылки в пределах <li> на http://tyler.brixwork.com - но мне не повезло. Уменьшите браузер, чтобы сработали медиазапросы - эмуляция вертикального экрана iPhone. Я хочу, чтобы меню располагались друг над другом. Что радует, так это то, что элемент <LI> не расширяется при добавленном заполнении элемента <a>, в результате чего меню в основном перекрываются, а border-bottom:1px solid #fff элемента <LI> перекрывается следующим <li><a></LI> элемент.

Меню HTML выглядит так: 

<ul id="menu">
    <li><a href="http://tyler.brixwork.com/about">about me</a></li>
    <li><a href="http://tyler.brixwork.com/listings">listings</a>
        <ul class="submenu">
            <li><a href="http://tyler.brixwork.com/area-map">On A Map</a></li>
            <li><a href="http://tyler.brixwork.com/listings">My Listings</a></li>
        </ul>
    </li>
    <li><a href="http://tyler.brixwork.com/mls-search">MLS&reg; search</a></li>
    <li><a href="http://tyler.brixwork.com/resources">resources</a>
        <ul class="submenu">
            <li><a href="http://tyler.brixwork.com/for-buyers">for buyers</a></li>
            <li><a href="http://tyler.brixwork.com/for-sellers">for sellers</a></li>
        </ul>
    </li>
    <li><a href="http://tyler.brixwork.com/blog">blog</a></li>
    <li><a href="http://tyler.brixwork.com/contact">contact me</a></li>
</ul>

Действительно структура меню sipmle с некоторыми подменю. Проблема заключается в том, что я использую медиазапросы, чтобы сложить все меню друг над другом и отключить подменю на iPhone и т. Д. :

/* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {
        #menu {
            height: auto;
        }

        #menu li:hover .submenu {
            left: -9999px;
        }


        .container .columns.hide_below_tablet, .container .column.hide_below_tablet {
            display: none;
        }

        /* configure footer stuff */
        #footer_signupform h4, #footer_signupform p, #footer_signupform form {
            padding-left: 10px;
            padding-right: 10px;
        }


        #site_credits {
            text-align: left;
        }

    }

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {

        #index_slide {
            height: 134px;
        }

        #menu {
            text-align: left;
            background: none;
            display: block;
        }

        #menu li {
            margin-right: 10px;
            margin-left: 0px;
            text-align: left;
            width: 120px;
            display: block;
            float: left;
            border: none;
            display: block;
        }

        #menu li:hover {
            border: none;
        }

    }

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) {
        #index_slide {
            height: 96px;
        }

        #top_phone {
            font-size: 18px;
        }

        #menubar #menu li {
            width: 100%;
            border: 1px solid #fff;
            margin: 0px;
            float: left;
            clear: both;
            display: block;
        }

        #menubar #menu li a:link, #menubar #menu li a:visited {
            color: #fff;
            background-color: #333;
            width: 100%;
            white-space: nowrap;
            display: block;
            font-size: 20px;
            float: left;
            clear: both;
            padding: 5px;
        }

        #footer_nav ul li {
            text-align: center;
            width: 100%;
            display: block;
            clear: both;
        }

    }
...