ドロップダウンメニューには、自分のサイト上</p> <p>ドロップダウンメニューがcontent.I'veが絶対的および相対的でZインデックスを試してみました移動...

私の問題は非常に簡単ですが、私は私が悪いやったかわからないコンテンツに移動します位置が、それは私が何かを台無しにしましたworked.Maybeませんでしたが、今私はドロップダウンメニューには、自分のサイト上</p> <p>ドロップダウンメニューがcontent.I'veが絶対的および相対的でZインデックスを試してみました移動...

助けてくれてありがとうとは挨拶のか分からない

body { 
 
    font-family: 'Segoe UI', sans-serif; 
 
} 
 
#logo { 
 
    margin-top: 15px; 
 
    margin-left: 10px; 
 
    float: left; 
 
    font-size: 30px; 
 
    color: white; 
 
} 
 
.menu>ul { 
 
    list-style-type: none; 
 
    width: 100%; 
 
    background-color: #333; 
 
    min-height: 130px; 
 
} 
 
#fest { 
 
    margin-left: 280px; 
 
} 
 
#pierwszy { 
 
    clear: both; 
 
} 
 
.element { 
 
    width: 120px; 
 
    height: auto; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 20px; 
 
} 
 
.menu>ul>li { 
 
    float: left; 
 
    margin-left: 30px; 
 
    margin-top: 30px; 
 
} 
 
.element:hover { 
 
    background-color: #555; 
 
    cursor: pointer; 
 
} 
 
.menu>#logo>p { 
 
    font-size: 40px; 
 
    color: white; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 
.menu>ul>li>ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    display: none; 
 
} 
 
.menu>ul>li:hover>ul { 
 
    display: block; 
 
} 
 
.menu>ul>li:hover>ul:hover>li:hover { 
 
    display: block; 
 
    background-color: #666; 
 
} 
 
.menu>ul>li>ul>li { 
 
    margin: 10px; 
 
} 
 
.jumbotron { 
 
    background-color: white; 
 
}

<!DOCTYPE HTML> 
 
<html lang="pl"> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title> 
 
    LOREN IPSUM DZIADU ! 
 
    </title> 
 
    <meta name="description" content="nananananana moje testy i zabawy" /> 
 
    <meta name="keywords" content="moje,nowe,zabawy,strony,html" /> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
 
    <link rel="stylesheet" href="style.css" type="text/css" /> 
 
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
 
    <link rel="stylesheet" href="css/bootstrap.css"> 
 
</head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
</head> 
 
<body> 
 

 
    <div id="topbar"> 
 

 
    <div id="logo"> 
 
     <a href="index.html"> 
 
     <img src="developer.png" width=220px height=90px;> 
 
     </a> 
 
    </div> 
 
    <nav class="menu"> 
 
     <!--<img src="pan.jpg" alt=" "!--> 
 
     <ul> 
 
     <li class="element"><a href="#">Something</a> 
 
      <ul> 
 
      <li>Something</li> 
 
      <li>Something</li> 
 
      <li>Something</li> 
 
      </ul> 
 
     </li> 
 

 
     <li class="element"><a href="#">Something</a> 
 
      <ul> 
 
      <li>Something</li> 
 
      <li>Something</li> 
 
      <li>Something</li> 
 

 
      </ul> 
 
      <li class="element">Something</li> 
 
      <li class="element">Something</li> 
 
     </ul> 
 

 
    </nav> 
 
    <br/> 
 
    <br/> 
 

 
    </div> 
 
    </div> 
 
    <article> 
 
    <img id="fest" src="fest.jpg" width=320px height=350px;> 
 
    </a> 
 
    <p>Proin vel luctus urna, a suscipit lectus. Quisque aliquam sollicitudin feugiat. In et venenatis nisl, at mattis arcu. Quisque dictum posuere dui eu luctus. Quisque dignissim ipsum orci, sed malesuada nibh posuere quis. Vestibulum venenatis hendrerit 
 
     enim a scelerisque. Integer fringilla diam et mauris viverra, eget ornare eros faucibus. Phasellus id ex vitae lacus porta pulvinar.</p> 
 
    </article> 
 
    <article> 
 
    <p>Mauris urna sapien, molestie quis vulputate et, interdum vitae massa. Suspendisse dolor velit, imperdiet eu bibendum vitae, finibus quis lorem. Morbi ultricies lorem quis dui hendrerit luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
     Duis scelerisque varius leo. Quisque malesuada tortor id risus posuere, sodales rutrum nunc tristique. Vivamus pulvinar id leo ut fringilla.</p> 
 
    </article> 
 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script> 
 
    src = "js/bootstrap.min.js" 
 
    </script> 
 
</body>

出典

2016-09-26 Atomix

あなたの問題に関連していないが、 'が' ''高さと幅はattrの正常であるべきであると彼らは引用符を必要とし、セミコロンが許可されていません。

私は非常にこの記事を読んで、あなたにお勧めしますpxは必要ありません。レンダリングは、ブラウザがそれを理解するために余分な作業をしたために機能します。 –

同様に ''これはあなたが期待していることをしているかわかりません。この行は、 '' js/bootstrap.min.js "という文字列で変数srcを作成しています。' '' –

あなたのCSSでは、現在のスタイルにこのスタイルを追加します。

.element { 
position: relative; 
} 
.menu>ul>li>ul { 
    position: absolute; 
    background-color: #555; 
    width: 100%; 
    left: 0; 
    top: 100%; 
    z-index: 1; 
}

キーは絶対位置です。絶対位置は他の要素を移動させません。ポジションアブソリュートを使用すると、任意のページ要素を、必要な場所に正確に配置することができます。これは、あなたの要素が他の要素の上に置かれることを覚えています。 z-indexでは、この要素のスタックを管理できます。

親の相対位置は、上および左のプロパティの参照先として役立ちます。 https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

出典

2016-09-26 22:57:58

ありがとうございました。私のコードにこれらの行を追加しましたが、今はメニューが1つだけのポジションです。最初のポジション、3つのポジションが何とか消えるようです。 – Atomix

私はちょうどここにこの行を追加：https://jsfiddle.net/zm3owjuv/ –

ええ、それは働いています：Dもう一度あなたが仲間に感謝！ – Atomix

ドロップダウンメニューには、自分のサイト上</p> <p>ドロップダウンメニューがcontent.I'veが絶対的および相対的でZインデックスを試してみました移動...

答えて

関連する問題