-2

[この質問はすでに 1 回投稿しましたが、重要な回答が得られなかったため、再度投稿します。] HTML

<div class="menu" id="menu">
<ul>
    <li><a class="home" id="home" href="">Home</a></li>
        <li><a class="about" id="about" href="">About Us</a>
        <ul>
            <li><a href="">About Us</a></li>
            <li><a href="">About us1</a></li>
            <li><a href="">About us2</a></li>
            <li><a href="">About usn</a></li>
        </ul>
    </li>
    <li><a class="prod" id="prod" href="">Products</a>
        <ul>
            <li><a href="">Product1</a></li>
            <li><a href="">Product2</a></li>
            <li><a href="">Product3</a></li>
        </ul>
    </li>
    <li><a class="contact" id="contact" href="">Contact</a>
        <ul>
            <li><a href="">Contact1</a></li>
            <li><a href="">Contact2</a></li>
            <li><a href="">Contact3</a></li>
        </ul>
    </li>
    <li><a class="program" id="program" href="">Programmes</a>
        <ul>
            <li><a href="">Program1</a></li>
            <li><a href="">Program2</a></li>
        </ul>
    </li>
    <li><a class="gallery" id="gallery" href="">Galleries</a>
        <ul>
            <li><a href="">Photo Gallery</a></li>
            <li><a href="">Video Gallery</a></li>
        </ul>
    </li>
    <li><a class="gallery" id="gallery" href="">Downloads</a>
        <ul>
            <li><a href="">Download1</a></li>
            <li><a href="">Download2</a></li>
        </ul>
    </li>
</ul>

私のdivラッパーのCSS

div.wrapper 
{
    box-shadow: 0 0 30px 5px #999;
    -moz-box-shadow: 0 0 30px 5px #999;
    -webkit-box-shadow: 0 0 30px 5px #999;
    -msie-box-shadow: 0 0 30px 5px #999;
    -o-box-shadow: 0 0 30px 5px #999;
    border-radius: 10px 10px 10px 10px;
    -o-border-radius: 10px 10px 10px 10px;
    -msie-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    background-color: #E8E8E8;
    width: 1024px; 
    height: 1400px;
    margin: auto;
    position: relative;
}

ドロップダウン メニューの CSS

div.menu
{
    font-family: serif, Verdana, Geneva, Arial, helvetica, sans-serif;
    height: 45px;
    width: 1024px;
    background-color: #06472F;
    -msie-border-radius: 0px 0px 5px 5px;
    -o-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
    display: table-cell;
}

div.menu ul 
{
    font-size: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

div.menu ul li 
{
    display: block;
    position: relative;
    float: left;
    list-style: none;
}

div.menu ul li ul 
{
    display: none;
}

div.menu ul li a 
{
    border-radius: 2px;
    -msie-border-radius: 2px;
    -o-border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    display: block;
    text-decoration: none;
    color: #FFFFFF;
    border-top: 1px solid #FFFFFF;
    padding: 5px 15px 5px 15px;
    background: #06472F;
    margin-left: 1px;
    white-space: nowrap;
}

div.menu ul li a:hover 
{
    color: #FFFF00;
}

div.menu li:hover ul 
{
    display: block;
    position: absolute;
}

div.menu li:hover li 
{
    float: none;
    font-size: 25px;
}

div.menu li:hover li a:hover 
{
    background-color: #000000;
    color: #FFFF00;
}

今、Chrome を使用してズームアウトすると、33% に達すると、実際には次の行に移動します。CSSのみを使用してこれを防ぐにはどうすればよいですか?

サイズを変更しようとしましたが、メニューの最後に余分なギャップが残り、それは私が望んでいるものではありません。また、メニュー全体を別の div タグでラップしようとしましたが、うまくいきませんでした。また、「%」を使用してすべてのサイズを相対的にしようとしましたが、うまくいきませんでした。ヘルプ？

4

1 に答える 1