0

こんにちは、私は html とスタック オーバーフローの両方に慣れていないので、この質問が既に行われている場合はご容赦ください。オーバーフローとクリアのプロパティを試しましたが、うまくいかないようです。誰かが私を正しい方向に向けることができれば、私はそれを大いに感謝します.

私の問題は、ドロップダウン メニューを使用して、ブラウザ ウィンドウのサイズを変更したときに、リスト要素が他の要素の下に押し出されないようにしたいことです (オーバーフローを非表示にして切り捨てたい)。オーバーフローを設定しようとしました：リボン要素に隠されています。これにより、その問題は解決されますが、ドロップダウン要素もオーバーフローと見なされ、ホバー時に表示されなくなるため、別の問題が作成されます。

これはフィドルへのリンクです。

http://jsfiddle.net/HVCuc/

コードは次のとおりです。

<DOCTYPE !html>

<style>

    .image
    {
        position: absolute;
        top:50px;
        left:8px;
        z-index: 3;
    }


    .bannerback
    {
    top: 0px;
    left: 0px;
    postion: absolute;
    z-index: -1; 
    margin: 0;
    overflow: hidden;
    }

    .ribbon
    {
    position: absolute;
    left: 5px;
    top: 45px;
    height:81px;
    width: 100%;
    background: rgba(215,83,0,0.85); 
    }

    .dropdown
    {
    position: relative;
    width: 100%;
    }   

    menu ul ul{
    display: none;
    }

    menu ul li:hover > ul{
    display:block;
    }

    menu ul li:hover > a{
    color: rgb(215,83,0);
    }

    menu ul {
    background: rgba(215,83,0,0); 
    border-radius: 0px;  
    list-style: none;
    position: absolute;
    display: table;
    top:0px;
    z-index: 4;
    overflow: hidden;
    }

    menu ul li {
    overflow: hidden;
    }   

    menu ul:after {
        content: ""; clear: both; display: block;
    }

    menu ul li {
    float: left;
    }

    menu ul li:hover {
    background: black;
    }

    menu ul li a:hover{
    color: rgb(215,83,0);
    }

    menu ul li a {
        display: block;
        padding: 25px 80px;
        color: black; 
        text-decoration: none;
        font-weight: bold;
        font-size: 26px;
        background: rgba(215,83,0,0);
        font-family:"Trebuchet MS", Helvetica, sans-serif;
    }

    menu ul ul {
    border-radius: 0px; 
    padding: 0;
    position: absolute;
    top: 100%;
    background: rgba(215,83,0,0.85);
    }

    menu ul ul li {
    float: none; 
    position: relative;
    }

</style>


<body bgcolor = "black">

<div class = "bannerback">
<img src="file:///C:/Users/JesseAulsebrook/Desktop/Yearbook/Banner.png" width="2000" height="200">
</div> 

<div class = "image">
<img src="file:///C:/Users/JesseAulsebrook/Desktop/Yearbook/TurtleLogo.png" width="78" height ="75">
</div> 

<div class = "ribbon">

<menu>
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">RST & Society</a>

        <ul>
            <li><a href="#">RST</a></li>
            <li><a href="#">Society</a></li>
        </ul>

    </li>

    <li><a href="#">Wings</a>

        <ul>
            <li><a href="#">Ground Floor West</a></li>
            <li><a href="#">Ground Floor East</a></li>
            <li><a href="#">First Floor West</a></li>
            <li><a href="#">First Floor East</a></li>
            <li><a href="#">Second Floor West</a></li>
            <li><a href="#">Second Floor East</a></li>
            <li><a href="#">Third Floor West</a></li>
            <li><a href="#">Third Floor East</a></li>
            <li><a href="#">Fourth Floor West</a></li>
            <li><a href="#">Fourth Floor East</a></li>
        </ul>

    </li>

    <li><a href="#">Events</a></li>
    <li><a href="#">Photos</a></li>
    </ul>

</menu>

</div>

</body>





</html>
4

1 に答える 1

1

あなたの問題は、リボンに設定した 100% の幅だと思います。1000px などの固定値に設定してみてください。問題は、100% (この場合はブラウザーのサイズ) に設定していることです。ブラウザーのサイズを変更すると、すべての要素が壊れてしまうのです! リボンの幅もリサイズ中！

css Box Model and Positioningに関するいくつかの簡単なガイドを読むことをお勧めします。

于 2013-08-03T07:02:27.137 に答える