[英]CSS Drop Down Menu - List elements are static
I may seem really silly or outright wrong in the way I code. 我的编码方式似乎很愚蠢或完全错误。 However, when I create a drop down menu in CSS the new li elements get pushed to the other side of the page and not in the container box.
但是,当我在CSS中创建下拉菜单时,新的li元素将被推送到页面的另一侧,而不是在容器框中。 How would I fix this?
我该如何解决?
Here is the code: 这是代码:
<nav>
<div class="wrapper">
<div class="brand">
<a href="index.html"><img class="UKLogo" src="images/logo.png" alt=""></a>
</div> <!-- brand -->
<div class="navigation">
<ul class="nav-ul">
<a href="index.html"><li> HOME </li></a>
<a href="about.html"><li> ABOUT </li></a>
<a href="#">
<li class="course-li">
COURSES
<ul class="drop-down">
<li class="list-item"> Driver CPC </li>
<li> First Aid </li>
<li> Other </li>
</ul>
</li>
<a href="contact.html"><li> CONTACT </li></a>
<!-- <a href="#"><li> TESTOMONIALS </li></a> -->
<!-- <a href="#"><li> FAQs </li></a> -->
</ul>
</div> <!-- Navigation -->
</div> <!-- Wrapper -->
</nav>
nav {
margin: 0px;
padding: 0px;
height: 75px;
background-color: #FFF;
}
.brand {
margin: auto;
width: 960px;
}
.company-name {
padding: 0px;
margin: 0px;
}
.UKLogo {
padding: 0px;
margin: 0px;
position: relative;
top: 11px;
}
.navigation ul li {
display: inline-block;
margin: 10px;
position: relative;
left: 380px;
top: -46px;
}
.navigation ul a {
color: black;
margin-left: 40px;
text-decoration: none;
font-family: Lato;
font-weight: 300;
}
.navigation ul a:hover {
color: #169ec5;
font-weight: 300;
}
.course-li:hover .drop-down {
left: 0px;
}
.drop-down {
position: absolute;
left: -5px;
z-index: 1;
background-color: white;
left: -9999px;
}
Thank you ever so much for looking and helping. 非常感谢您的帮助。 Always open to criticism whether its the way I code or anything else.
无论是我编码的方式还是其他方式,总是要受到批评。
Here is a JSFiddle https://jsfiddle.net/vj41qLts/ 这是一个JSFiddle https://jsfiddle.net/vj41qLts/
Many Thanks! 非常感谢!
You need to declare a position in the parent, for the child to reside in. An element with position: absolute;
需要声明父的位置,为孩子居住在同一个元素。
position: absolute;
will position itself to the first parent with position: relative;
会将自己定位于以下位置的第一父级
position: relative;
. 。 If there is no parent with
position: relative;
如果没有父母的
position: relative;
, it will use the browser window instead. ,它将改为使用浏览器窗口。
See fix example here: https://jsfiddle.net/vj41qLts/1/ 请参阅此处的修复示例: https : //jsfiddle.net/vj41qLts/1/
I think there are two thing you need to change: 我认为您需要更改两件事:
ul li
will select everything li in the navigation even the dropdown, ul>li
will only select the immediate child, instead of running down the nested elements. ul li
会选择导航中的所有li,甚至下拉菜单, ul>li
只会选择直接子级,而不是运行嵌套元素。 position:relative;
position:relative;
in your dropdown's parent. One of the first issues I see is the fact that your markup for your main links isn't setup correctly. 我看到的第一个问题是您对主链接的标记未正确设置。 Following a structure more link the below should give make it work the way you want it to:
遵循一个结构更多的链接,下面应该使它按您希望的方式工作:
<nav>
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li>
<a href="#">Courses<a>
<div>
<ul>
<li>A link</li>
<li>A link</li>
</ul>
</div>
</li>
</ul>
</nav>
Then use CSS or JS to control showing and hiding the dropdown of links. 然后使用CSS或JS控制显示和隐藏链接的下拉列表。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.