Question

请多多注意-我是所有这方面的新手，因此，如果您能用外行的话解释什么，我将不胜感激。

因此，我正在设计一个网站，除滚动下拉式导航栏外，其他所有功能都可以正常工作。我的意思是，它工作正常，唯一的问题是下拉框是屏幕的整个宽度，而不是它们下面元素的宽度。我已经确定问题是导航栏div的主要背景，即宽度：100％；为了填满整个屏幕宽度。

如果我删除宽度：100％；从主导航栏div开始，一切都按照我想要的方式工作，但是导航栏无法填满屏幕的宽度。因此，我可以使用不水平填充屏幕的导航栏来实现自己的方式，或者可以使用一个下拉菜单来覆盖整个宽度的完整导航栏...

毋庸置疑，我试图兼得两全，这是一个导航栏，其宽度为100％（以便缩小页面将使其保持在浏览器窗口的整个宽度），而下拉框的宽度为他们所在的元素。

下面有一个CodePen链接。这是HTML：

<body>
<div class="topnav">
<div class="topnav-logo">
<img class="logo" src="images/logo.png" height=5%>
</div>
<div class="topnav-blue">
<a href="index.html" class="active">HOME</a>
</div>
<div class="dropdown">
<button class="dropbtn">SERVICES 
  <i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
  <a href="#">Link1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>
</div> 
<a href="aform.html">APPLY</a>
<a href="about.html">ABOUT US</a>
<a href="#about">CONTACT</a>
</div>

<img class="banner" src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width=100%>
<h1>WELCOME</h1>
</body>

这是CSS：

body {
margin: 0;
font-family: verdana;
}

.topnav {
position: relative;
overflow: scroll;
width: 100%;
position: fixed;
top: 0;
background: #fff; ---> DELETING THIS FIXES THE DROPDOWN BG, BUT DOESN'T MAKE THE NAVBAR GO THE ENTIRE WIDTH
}

.topnav a {
float: left;
color: #000;
text-align: center;
padding: 30px 50px;
text-decoration: none;
font-size: 16px;
background-color: #fff;
}

.topnav-blue a {
float: left;
color: #000;
text-align: center;
padding: 30px 50px;
text-decoration: none;
font-size: 16px;
background-color: #fff;
}


.topnav a:hover {
background-color: #eee;
color: black;
}

.topnav-blue a:hover {
background-color: #16396f;
color: white;
}

.topnav-logo {
float: left;
padding: 19px;
background-color: #fff;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
border: none;
outline: none;
color: black;
background-color: #fff;
font-family: inherit; 
margin: 0;
color: #000;
text-align: center;
padding: 30px 50px;
text-decoration: none;
font-size: 16px;
}

.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #eee;
}

.dropdown-content {
display: none;
position: relative;
width: auto;
background-color: #fff;
z-index: 1;
}

.dropdown-content a {
float: none;
font-size: 12px;
color: black;
padding: 16px 10%;
text-decoration: none;
display: block;
text-align: center;
}  

.dropdown-content a:hover {
background-color: #eee;
}

.dropdown:hover .dropdown-content {
display: block;
}

h1 {
text-align: center;
}

https://codepen.io/anon/pen/ZwVMyZ

具有背景的可滚动下拉导航栏问题

0 个答案: