Question

我正在为客户建立一个网站，我无法解决的最后一个问题是菜单问题。我相信这可能对其他人有所帮助。

菜单中有三个div（父级是div）。这是代码，有点缩短：

<div id="header">
    <div id="logo"><img src='logo.png' /></div>
    <div id='languageSELECT'>LANGUAGE SELECT</div>
    <div id="Menu">
        <ul id="menu_noya">
            <li class="head_item">
                <a href="index.php?page=Women">{$language["MenuWomen"]}</a>
                <ul>
                    <li><span style='color:#352618;font-family:tahoma;font-size:11px;font-weight:bold;'>{$language["InMenuWomen"]}</span></li>
                    <li><a href='index.php?page=Women'><img src='/styles/Images/women1.jpeg' style='height:170px;width:120px;' /></a></li>
                    <li><a href='index.php?page=Women'><img src='/styles/Images/women2.jpeg' style='height:170px;width:120px;' /></a></li>
                    <li><a href='index.php?page=Women'><img src='/styles/Images/women3.jpeg' style='height:170px;width:120px;' /></a></li>
                    <li><a href='index.php?page=Women'><img src='/styles/Images/women4.jpeg' style='height:170px;width:120px;' /></a></li>
                </ul>
            </li>
            <li class="head_item">
                { like this 5 more times } ...
            </li>
        </ul>
    </div>
</div>

CSS：

#LanguageSelect
{
    float:right;
    width:150px;
    margin-top:65px;
    padding-right:10px;
}

#menu_noya, #menu_noya ul {
    list-style: none;
    z-index:1;
}

#menu_noya, #menu_noya * { 
    padding: 0; margin: 0;
}

#menu_noya li.head_item {
    float:left;
    width:142px;
    margin-left: -1px;
    text-align:center;
}

#menu_noya li.head_item a {
    display: block;
    color:#62E1E3;
    text-align:center;
    font-weight:lighter;
}

li.head_item ul { 
    position:absolute;
    display: none;
}

li.head_item:hover ul {
    margin-right:50px; 
    position:absolute;
    display: block; 
    width:150px;
    background-color:#ececec;
    border-right:8px solid #352618;
}

#header {
    background-color:#352618;
    height: 100px;
    width:100%;
    text-align: center;
    position: relative;
}

#logo
{
    float:left;
    width:250px;
    height:80px;
    margin-top:12px;
    margin-left:15px;
}

#Menu {
    font-size:16px;
    margin: 0 auto;
    padding-top:65px;
    display:inline-block;
}

问题是：

在分辨率较小的小型笔记本电脑（13英寸或11英寸）上，中间菜单会从标题div中删除，因此它不在标题中，最终位于标题下方。在iPad和iPhone上也是如此。
在某些PC和笔记本电脑上，菜单不在页面中间，因为logo和languageSELECT元素的宽度必须相同。菜单位于徽标和语言选择之间，但不在页面中间。

我尝试过@media次查询，但它非常“通用”，可以在某些设备上运行，但不能在其他设备上运行。这适用于特定设备，我可以做，但其他设备呢？

我想要的主要是使菜单100％的宽度给出。我们假设我的分辨率是1024px;如果我有250px的标识和150px的语言选择，那么剩下624px。我希望菜单能够传播100％的624px。

还有一个小问题：较小的文字在我的网站上看起来非常模糊，就像它没有消除锯齿一样。是否有一个好的字体看起来像Times New Roman适用于小字体？

使菜单div在中间展开并在较小的屏幕中工作

0 个答案: