Question

您好，我正在构建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>

Answer 1

你可能会尝试这样的事情

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

好像你想要它完全响应？

Css菜单分辨率

1 个答案: