2016-09-26 6 views
0

Моей проблемы довольно проста, но я не знаю, что я сделал плохо ..выпадающего меню перемещает содержимое

меню Выпадающего на моем сайте двигается content.I've попробовал Z-индекс с абсолютным и относительным положение, но это не worked.Maybe я уже ввинчивается что-то, но сейчас я не знаю, что

Спасибо за помощь и Greets

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>

+1

не связанные с вашим вопросом, но '' должен быть '' высота и ширина нормальные атр и они нужны кавычки, точка с запятой не допускаются и не нуждаются в px. Работает, потому что браузер сделал дополнительную работу, чтобы понять это. –

+0

, а также '' Я не уверен, что это делает то, что вы ожидали. Эта строка создает переменную src со строкой '' js/bootstrap.min.js ''вероятно, вы хотите' ' –

ответ

1

В вашем css добавьте эти стили в текущие.

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

Ключ в положении: absolute; Абсолютная позиция не перемещает другие элементы. С абсолютной позицией вы можете позиционировать любой элемент страницы точно там, где вы хотите, без резервного пространства. Этот ум, что ваш элемент может быть поверх других элементов. С помощью z-index вы можете управлять стеком этих элементов.

Роль позиции в родительском столбце поможет в качестве референта для свойств верхнего и левого.

Я настоятельно рекомендую вам прочитать эту статью: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

+0

Спасибо за помощь :) Я' ve добавил эти строки в мой код, но сейчас в меню есть только одна позиция, только первая, три других, похоже, как-то исчезают. – Atomix

+0

Я только что добавил сюда следующие строки: https://jsfiddle.net/zm3owjuv/ –

+0

Да, это работает: D Еще раз спасибо, товарищ! – Atomix

Смежные вопросы