下面是我的一些代码的JSFiddle链接。我试图在不使用引导程序或其他插件种类的情况下实现外观纯净的html / css下拉菜单。但是，我似乎无法使“ Creative”下拉元素显示在导航栏下方，而是直接显示在行内，并且我尝试更改代码的其他部分以使其正常工作，但我似乎无法在不影响导航栏其余部分的情况下做到这一点。
请让别人看看它，以便将鼠标悬停在“创意”上时，它的子级列表元素会显示在其下方。最好没有样式填充和边距。
https://jsfiddle.net/nytnfvmq/
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Udemy Project</title>
<link type="text/css" href="styles.css" rel="stylesheet">
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<!--<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>-->
</head>
<body>
<nav>
<ul>
<li>
<a href="">Home</a>
</li>
<li>
<a href="">Development</a>
</li>
<li>
<a href="">Creative</a>
<ul>
<li>
<a href="">Film</a>
</li>
<li>
<a href="">Design</a>
</li>
<li>
<a href="">Music</a>
</li>
</ul>
</li>
<li>
<a href="">Information</a>
</li>
<li>
<a href="">Contact Me</a>
</li>
</ul>
</nav>
<div id="banner">
<img src="images/banner.png" alt="Banner image did not load." ;>
</div>
</body>
</html>
CSS：* {边距：0；填充：0; }
body {
margin: 0;
padding: 0;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
nav {
width: 100%;
height: 40px;
margin: 0 auto;
background-color: #ffffff;
box-shadow: 0px 2px 5px #6E6E6E;
position: fixed;
}
nav ul {
width: 1200px;
margin: 0 auto;
position: relative;
list-style: none;
color: #00b6ed;
}
nav ul li a {
width: 20%;
display: inline;
text-align: center;
float: left;
padding-top: 11px;
padding-bottom: 11px;
color: #00b6ed;
text-decoration: none;
}
nav ul li a:hover {
background-color: #00b6ed;
color: #ffffff;
}
nav ul li ul {
display: none;
position: relative;
}
nav ul li:hover ul {
display: block;
position: relative;
}
#banner {
width: 100%;
height: 400px;
background-color: #00b6ed;
float: left;
text-align: center;
}
#banner img {
margin: 0 auto;
background-color: #00b6ed;
}
nav ul li ul li a {
background-color: red;
color: green;
}
您有几处错误。不要浮动并为锚标签分配宽度。而是浮动列表项。您还需要先添加position: relative到li，然后再添position: absolute; left: 0; top: 100%;加到子级ul。我认为应该这样做。
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
nav {
width: 100%;
height: 40px;
margin: 0 auto;
background-color: #ffffff;
box-shadow: 0px 2px 5px #6E6E6E;
position: fixed;
}
nav ul {
width: 1200px;
margin: 0 auto;
position: relative;
list-style: none;
color: #00b6ed;
}
nav ul li {
width: 20%;
float: left;
position: relative;
}
nav ul li a {
display: block;
text-align: center;
padding-top: 11px;
padding-bottom: 11px;
color: #00b6ed;
text-decoration: none;
}
nav ul li a:hover {
background-color: #00b6ed;
color: #ffffff;
}
nav ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
}
nav ul li:hover ul {
display: block;
position: relative;
}
#banner {
width: 100%;
height: 400px;
background-color: #00b6ed;
float: left;
text-align: center;
}
#banner img {
margin: 0 auto;
background-color: #00b6ed;
}
nav ul li ul li {
float: none;
}
nav ul li ul li a {
background-color: red;
color: green;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Udemy Project</title>
<link type="text/css" href="styles.css" rel="stylesheet">
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<!--<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>-->
</head>
<body>
<nav>
<ul>
<li>
<a href="">Home</a>
</li>
<li>
<a href="">Development</a>
</li>
<li>
<a href="">Creative</a>
<ul>
<li>
<a href="">Film</a>
</li>
<li>
<a href="">Design</a>
</li>
<li>
<a href="">Music</a>
</li>
</ul>
</li>
<li>
<a href="">Information</a>
</li>
<li>
<a href="">Contact Me</a>
</li>
</ul>
</nav>
<div id="banner">
<img src="images/banner.png" alt="Banner image did not load." ;>
</div>
</body>
</html>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句