下拉菜单移动内容

我的问题很简单，但我不知道我做了什么坏..下拉菜单移动内容

我网站上的下拉菜单中移动content.I've尝试了z-index的绝对和相对位置，但它并没有worked.Maybe我搞砸了的东西，但现在我不知道是什么

感谢您的帮助和电贺

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。渲染器的工作原理是浏览器做了一些额外的工作来理解它。 –

以及''我不确定它是否在做你期望的事情。这行是创建一个变量src与字符串'“js/bootstrap.min.js”'可能你想要'' –

在你的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

谢谢你的帮助:)我'我在代码中添加了这些行，但现在在菜单中只有一个位置，只是第一个位置，另外三个似乎消失了。 – Atomix

我刚刚在这里添加了这行：https：//jsfiddle.net/zm3owjuv/ –

是的，它的工作：D再次感谢你的队友！ – Atomix

下拉菜单移动内容

回答

相关问题