Проблема прокручиваемого выпадающего меню с фоном - PullRequest
Новая
       10

Проблема прокручиваемого выпадающего меню с фоном

0 голосов
/ 18 февраля 2019

Просто на голову - я новичок во всем этом, поэтому я был бы признателен, если бы вы могли объяснить что-либо с точки зрения непрофессионала.

Итак, я создаю веб-сайт, и у меня довольномногое получилось, за исключением прокручиваемого выпадающего меню.Я имею в виду, что все работает нормально, единственная проблема в том, что выпадающие списки - это вся ширина экрана, а не только ширина элемента, под которым они находятся.Я определил, что проблема в том, что основной div-фон навигационной панели имеет ширину: 100%;чтобы заполнить всю ширину экрана.

Если я удаляю ширину: 100%;из основного div панели navbar все работает так, как я хочу, но тогда панель навигации не занимает всю ширину экрана.Так что я могу получить его так, как я хочу, с панелью навигации, которая не заполняет экран по горизонтали, или у меня может быть полная панель навигации с выпадающими списками, которые идут на всю ширину ...

Само собой разумеется, яя пытаюсь получить лучшее из обоих миров, то есть панель навигации с шириной 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

...