Как вы делаете Div пойти по другому меню Div / NAV, которое не исправлено? -- javascript поле с участием jquery поле с участием html поле с участием css пол Связанный проблема

How do you make a div go under another div/nav menu which is not fixed?


0
vote

проблема

русский

Я пытаюсь сделать Div, идут под очередной div, в котором ни один не фиксирован элементы.

Вот мой код:

 <Код> ul {    list-style-type: none;    margin: 0;    padding: 0;      background-color: #f3f3f3;  }    li {    }    li a, .dropbtn {    display: inline-block;    color: white;    text-align: center;    padding: 14px 16px;    text-decoration: none;  }    li a:hover, .dropdown:hover .dropbtn {    background-color: #4CAF50;  }    li.dropdown {    }    .dropdown-content {    display: none;    position: absolute;    background-color: #f9f9f9;    min-width: 160px;    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  }    .dropdown-content a {    color: black;    padding: 12px 16px;    text-decoration: none;    display: block;    text-align: left;  }    .dropdown-content a:hover {background-color: #4CAF50;}    .dropdown:hover .dropdown-content {    display: block;  }  body {margin: 0;}    ul.topnav {    list-style-type: none;    margin: 0;    padding: 0;    overflow: hidden;    background-color: #f3f3f3;  }    ul.topnav li {float: left;}    ul.topnav li a {    display: block;    color: black;    text-align: center;    padding: 14px 16px;    text-decoration: none;  }    ul.topnav li a:hover:not(.active) {background-color: #4CAF50;}    ul.topnav li a.active {background-color: #4CAF50;}    ul.topnav li.right {float: right;}    @media screen and (max-width: 600px){    ul.topnav li.right,    ul.topnav li {float: none;}  }  #white {    background-color: white;    width: 90%;    height: 1000px;    position: relative;    margin-left: auto;    margin-right: auto;  }  
 <Код> <ul class="topnav">    <li><a class="active" href="#home">Home</a></li>    <li><a href="#news">Creations</a></li>    <li><a href="#news">Photos</a></li>    <li class="dropdown">      <a class="dropbtn" href="#news">Events</a>      <div class="dropdown-content">        <a href="#1">DIY</a>        <a href="#2">Flea Market Flip</a>      </div>    </li>    <li><a href="#news">Recycle + Upcycle</a></li>    <li><a href="#news">Saving The Enviroment</a></li>    <li><a href="#news">Contact Me</a></li>  </ul>  <div id="white"></div>  

Мне нужно иметь возможность заставить моего выпадающего меню появиться над DIV с именем #white. Еще одна заметка, мои ссылки в настоящее время ведут никуда, поэтому они сейчас бесполезны.

Английский оригинал

I am trying to make a div go under another div in which neither are fixed elements.

Here is my code:

ul {    list-style-type: none;    margin: 0;    padding: 0;      background-color: #f3f3f3;  }    li {    }    li a, .dropbtn {    display: inline-block;    color: white;    text-align: center;    padding: 14px 16px;    text-decoration: none;  }    li a:hover, .dropdown:hover .dropbtn {    background-color: #4CAF50;  }    li.dropdown {    }    .dropdown-content {    display: none;    position: absolute;    background-color: #f9f9f9;    min-width: 160px;    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  }    .dropdown-content a {    color: black;    padding: 12px 16px;    text-decoration: none;    display: block;    text-align: left;  }    .dropdown-content a:hover {background-color: #4CAF50;}    .dropdown:hover .dropdown-content {    display: block;  }  body {margin: 0;}    ul.topnav {    list-style-type: none;    margin: 0;    padding: 0;    overflow: hidden;    background-color: #f3f3f3;  }    ul.topnav li {float: left;}    ul.topnav li a {    display: block;    color: black;    text-align: center;    padding: 14px 16px;    text-decoration: none;  }    ul.topnav li a:hover:not(.active) {background-color: #4CAF50;}    ul.topnav li a.active {background-color: #4CAF50;}    ul.topnav li.right {float: right;}    @media screen and (max-width: 600px){    ul.topnav li.right,    ul.topnav li {float: none;}  }  #white {    background-color: white;    width: 90%;    height: 1000px;    position: relative;    margin-left: auto;    margin-right: auto;  }
<ul class="topnav">    <li><a class="active" href="#home">Home</a></li>    <li><a href="#news">Creations</a></li>    <li><a href="#news">Photos</a></li>    <li class="dropdown">      <a class="dropbtn" href="#news">Events</a>      <div class="dropdown-content">        <a href="#1">DIY</a>        <a href="#2">Flea Market Flip</a>      </div>    </li>    <li><a href="#news">Recycle + Upcycle</a></li>    <li><a href="#news">Saving The Enviroment</a></li>    <li><a href="#news">Contact Me</a></li>  </ul>  <div id="white"></div>

I need to be able to make my drop down menu appear over the div named #white. Another note, my links currently lead nowhere, so they are useless right now.

</div
           
 
 

Список ответов

0
 
vote
vote
Лучший ответ
 

У вас есть свойство CSS <код> while3 в вашем <код> while4 и нужно удалить это, чтобы показать раскрывающееся меню. Также я добавил <код> while5 значений <код> while6 и <код> while7 так что меню перейти на div.

 <код> while8  

Вот пример Widdle . Надеюсь, это поможет вам.

 

You have css property overflow:hidden in your ul.topnav and need to remove that to show the drop-down menu. Also I added z-index values to ul.topnav and #white so that menu go over the div.

ul.topnav {   list-style-type: none;   margin: 0;   padding: 0;   width: 100%;   background-color: #f3f3f3;   z-index: 2;   display: inline-block;   position: relative; }   #white {     background-color: white;     width: 90%;     height: 1000px;     margin-left: auto;     margin-right: auto;     z-index: 1;     position: relative; } 

Here is a example fiddle. Hope this helps you.

</div
 
 

Связанный проблема

5  модальный всплывающий как Google  ( Modal pop up like google ) 
Как сделать модальное всплывающее окно, как Gmail (когда мы пытаемся загрузить EXE, который генерирует крышки прокрутки страницы) ...

1  UI-маршрутизатор в ионной структуре  ( Ui router in ionic framework issue ) 
У меня проблемы с тем, чтобы получить свои маршруты, чтобы соответствовать моим взглядам. У меня есть следующие маршруты: <код> .state('tab.account', { ur...

1  Как заменить адреса электронной почты с ссылками Mailto на веб-странице Live?  ( How to replace email addresses with mailto links in a live web page ) 
Представьте себе это: вы столкнулись с веб-страницей, который говорит: «Просто отправьте сообщение user@example.com», но чтобы на самом деле отправить электро...

0  Удалите подстроку из строки в jQuery [дублировать]  ( Remove a substring from a string in jquery ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

4  Каковы разница между $ (документом) .bind («готовая», функция) и $ (документ). Ready (функция (функция () {}))  ( What are the difference between document bindready function and docume ) 
Я хочу обновить от Verysjs версии 2.0.0 до 2.1.5 Вот код: <код> define(['jquery', 'test.js'], function ($, test) { var test = new $.test({ ...

1  Как проверить отметку Check Column в сетке?  ( How to check mark a check column in a grid ) 
У меня есть флажок Check Column на сетке, которая мне нужна для программически проверки. Вот как сценарий Check Column: <код> columns: { items:[ ...

5  Пользовательский стиль на раскрывающемся меню React-Buttrap  ( Custom style on react bootstraps dropdown menu component ) 
Я пытаюсь применить пользовательский стиль CSS к компоненту RACH BETSTRAP, но не может понять, как получить доступ к элементам, которые не являются явными в J...

3  Есть ли способ различить связь против мышиных взаимодействий в Windows 8 (HTML / JS)  ( Is there any way to distinguish touch vs mouse interactions in windows 8 html ) 
Я в настоящее время строю приложение, которое имеет много внимания на панорамирование, которое выглядит и чувствует себя красиво, когда касается и манипулируе...

0  Boxy Эта отправка не работает  ( Boxy this submit does not work ) 
У меня есть несколько форм в моем коде, и я хочу назначить подтверждающее поле, чтобы показать, прежде чем он будет отправлен. Следовательно, я использую Bo...

0  Разрежьте строку в JavaScript [Закрыто]  ( Cut the string in javascript ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> закрыт. Этот вопрос не соответствует Рекомендациям переполнения ...

1  Обновление поле PDF штрих-кода в IOS и устройстве Android  ( Updating a pdf barcode field in ios and android device ) 
Я создал одну корпус Acrobat, используя радиообъекты, текстовое поле, кнопку, флажок и штрих-код в Adobe Acrobat Pro. После этого я открыл эту форму в Adobe...

1  Код образец плагина PhoneGap VideoPlayer  ( Phonegap videoplayer plugin sample code ) 
Я пытаюсь реализовать видеозаписи в моем телефонном приложении. У меня есть идея реализовать этот плагин: https://github.com/dawsonloudon/videoPlayer Эт...

2  Как получить выделенные тексты?  ( How to get the highlighted texts ) 
Я пытаюсь получить выбранные тексты от пользователя (выделенный текст, который выделяет пользователь). У меня есть следующее: <код> function getSelectedTe...

-2  Как мне получить значение флажков ряд в таблице JavaScript  ( How do i get value of a checkboxes of a row in a table javascript ) 
Это может быть глупым вопросом, но мне нужно получить значения проверенных флажков определенной строки. <код> script5 Так что в основном я хочу, чтобы по...

0  Скачать изображение из результатов API  ( Download image from api results ) 
Я создаю приложение, которое использует онлайн API для рерантива изображений на основе ключевого слова для поиска. Я запускаю петлю Foreach для рендеринга 12 ...




© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.