0

こんにちは、私は Joomla テンプレートを構築しています。テンプレートを他の解像度で定期的にチェックして、どのように見えるかを確認しています。

私の問題はメニューです。%すべてのコンテナの幅にパーセントを使用します。

1024解像度または拡大ページを設定する800X600と、水平メニューは次のようになります。

**[ item 1 ] [ item 2 ] [ item 3 ] [ item 4 ]**
**[ item 5][ item 6][ item 7]**
**[ item 8][ item 9]**

しかし、より高い解像度では、すべて正常に動作し、次のように表示されます。

**[ item 1 ] [ item 2 ] [ item 3 ] [ item 4 ][ item 5 ] [ item 6 ] [ item 7 ] [ item 8 ]** ect...

私はグーグルで検索しましたが、これを修正する方法がわかりません。たぶん、コードで何か間違ったことをしました。私のコードを確認してください。これを修正するために何を変更すればよいか教えていただけるかどうか教えてください。

nav.top-meni { float: left; margin: 0; padding: 0; top: 5px; width: 104%;}

   #mainlevelmainnav,#mainlevelmainnav ul {
        width: 104%;
        float: left;
        list-style: none outside none;
        line-height: 1em;
        background: transparent;
        font-weight: 600;
        margin: 0;
        padding: 0;
    }

    #mainlevelmainnav li {
        float: left;
        background: -moz-linear-gradient(center top, #EBEBEC 0px, #F1F1F1 56%, #E1E1E1 62%,
            #E2E3E4 100%) repeat scroll 0 0 transparent;
        padding: 0px;
    }

    #mainlevelmainnav li a {
        white-space: nowrap;
        display: block;
        float: left;
        color: #1A1A1A;
        text-decoration: none;
        font: 15px 'droid_regular', arial, serif;
        letter-spacing: -1px;
        height: 25px;
        padding: 11px 15px 3px;
        border-left: 1px solid #FFFFFF;
        border-right: 1px solid #C3C3C3;
        text-shadow: 0 1px 0 #FFFFFF;
    }

    #mainlevelmainnav li ul {
        position: absolute;
        height: auto;
        width: 11em;
        font-weight: 400;
        background: #36f;
        border: #00C 1px solid;
        margin: 0;
    }

    #mainlevelmainnav li li {
        width: 11em;
    }

    #mainlevelmainnav li ul a {
        width: 11em;
        color: #fff;
        font-size: 0.9em;
        line-height: 1em;
        font-weight: 400;
    }

    #mainlevelmainnav li a:hover {
        display: block;
        float: left;
        color: #fac825;
        text-decoration: none;
        font: 15px 'droid_regular', sans-serif;
        letter-spacing: -1px;
        height: 25px;
        background: #1A1A1A;
        text-shadow: 0 1px 0 #000;
    }

    #mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul
        {
        left: -999em;
    }

    #mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover
      #mainlevelmainnav ul li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul
        {
        left: auto;
        z-index: 6000;
    }

    #mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover {
        background: #039 url(../images/soccerball.gif) 98% 50% no-repeat;
    }

<nav class="top-meni">
     <jdoc:include type="modules" name="menu-full" /> 
</nav>
4

1 に答える 1

0

あなたはおそらくこのようなことを試すことができます

#mainlevelmainnav li li, #mainlevelmainnav li ul a, #mainlevelmainnav li ul { max-width: 11em; width: 100%; }
#mainlevelmainnav,#mainlevelmainnav ul { max-width: 1600px; width: 104%; }

あなたはそれを完全にレスポンシブにしたいようですか？

于 2013-05-28T15:25:03.787 に答える