0

您好，我正在构建 Joomla 模板。我会定期在其他分辨率中检查我的模板，看看它的外观如何。

我的问题是菜单。我%在所有容器中使用 precent 作为宽度。

当我设置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 回答