/ / उत्तरदायी वेबसाइट ड्रॉपडाउन फॉर्म मुद्दा - ज़र्ब-फाउंडेशन, ज़र्ब-फाउंडेशन -5

उत्तरदायी वेबसाइट ड्रॉपडाउन फॉर्म मुद्दा - ज़र्ब-फाउंडेशन, ज़र्ब-फाउंडेशन -5

मुझे नींव 5 ढांचे में एक बूंद पर एक फार्म के साथ एक समस्या है।

असल में मैं एक ड्रॉपडाउन मेनू में एक इनपुट फ़ील्ड और बटन असाइन कर रहा हूं, जो ठीक काम करता है।

लेकिन जैसा कि मैं पहली बार बैक बटन नहीं देख सकता जैसा कि मैं पहले ड्रॉपडाउन पर कर सकता हूं, मैं किसी भी कारण से नहीं देख सकता हूं। जब मूल कोड एक प्रतिकृति है।

दूसरा ड्रॉपडाउन देखने के बाद और ड्रॉपडाउन देखने के लिए मेनू पर वापस जाने के बाद इनपुट फ़ील्ड और बटन दिखाई दे रहे हैं ...

नीचे स्रोत कोड:

सीएसएस:

      .has-form-small {

top: 0rem;
left: 0rem;
min-width: 15rem; }
@media only screen and (max-width: 40em) {
.has-form {
min-width: 10rem;
top: 0 rem; }
.has-form .button {
height: 3rem; } }
</style>

HTML: ड्रॉपडाउन 1:

<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li><a href="#">Button</a></li>
<li class="has-dropdown">
<a href="#">Dropdown</a>
<ul class="dropdown">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</li>
</ul>
</section>

ड्रॉपडाउन 2:

    <section class="top-bar-section">
<!-- Right Nav Section-->
<strong class="show-for-small-only">
<ul class="right">
<li class="has-dropdown">
<a href="#">Dropdown2</a>
<ul class="dropdown">
<li class="has-form-small">
<div class="row collapse">
<div class="large-9 small-9 columns">
<input type="text" placeholder="Find Stuff">
</div>
<div class="large-3 small-3 columns">
<a href="#" class="alert button expand">Search</a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</strong>
</section>

उत्तर:

जवाब के लिए 0 № 1

अंत में ठीक करने के लिए प्रबंधित। ड्रॉप डाउन मेनू विकल्प को चालू नहीं करता है "

नीचे कोड:

सीएसएस:

    <style>
.has-form-small {
color: darkslategray;
position: absolute;
top: 0rem;
left: 0rem;
min-width: 26rem;
min-height: 2.7rem;}
@media only screen {
.has-form-small {
color: darkslategray;
min-width: 26rem;
min-height: 2.7rem;
top: 0rem; }
.has-form-small .button {
color: darkslategray;
width:  10rem;}}
</style>

HTML:

<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<strong class="hide-for-small-only">
<li class="has-form">
<div class="row collapse">
<div class="large-9 small-9 columns">
<input type="text" placeholder="Find Stuff">
</div>
<div class="large-3 small-3 columns">
<a href="#" class="alert button expand">Search</a>
</div>
</div>
</li>
</strong>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>

<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li><a>&nbsp</a></li>
<li>
<strong class="show-for-small-only">
<li class="has-form-small">
<div class="large-12 small-9 columns">
<input type="text" placeholder="Find Stuff">
</div>
<div class="large-3 small-3 columns">
<a href="#" class="alert button expand">Search</a>
</div>
</li>
</strong>
</li>
</ul>



<ul class="right">
<li><a href="#">Button</a></li>
<li class="has-dropdown">
<a href="#">Dropdown</a>
<ul class="dropdown">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</li>
</ul>

<!-- Left Nav Section -->
<ul class="left">

</ul>
</section>
</nav>

ऐसा करने के बेहतर तरीके हो सकते हैं (उदा। "& Nspb" के साथ खाली पंक्ति को हटाएं) लेकिन मुझे पृष्ठभूमि रंगों के साथ समस्याएं थीं, और यह केवल डेमो साइट माना जाता है।