The code I'm working with is too lengthy to post in its entirety, so here is the JSFiddle link instead:
https://jsfiddle.net/c0ffee/pew9f0oc/1/
My specific issue pertains to this screenshot:
https://i.sstatic.net/swLqN.png
Upon clicking on the dropdown menu, the options are visible but inaccessible as they seem to be obscured by the text input field beneath it.
<form>
<div class="input-field m-b-30">
<input type="text" id="firstName" placeholder="First Name" name="name" required="">
<label for="fullName">Required</label>
</div>
<div class="input-field m-b-30">
<input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
<label for="phoneNumber">Required</label>
</div>
<div class="input-field m-b-30">
<input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
<label for="phoneNumber">Business Name</label>
</div>
<div class="input-field m-b-30">
<input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
<label for="phoneNumber">Phone Number</label>
</div>
<div class="input-field m-b-30">
<input type="email" id="emailAddress" placeholder="Email Address" name="email" required="">
<label for="emailAddress">Email</label>
</div>
<div class="input-field m-b-30">
<input type="text" id="subject" placeholder="I Would Like To Discuses " name="subject" required="">
<label for="subject">Subject</label>
</div>
<div class="input-field m-b-30">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="input-field textarea-field m-b-30">
<textarea id="message" placeholder="Message" name="message"></textarea>
</div>
</div>
<div class="input-field">
<button type="submit" class="template-btn">Send Message <i class="fas fa-arrow-right"></i></button>
</div>
</form>
Any suggestions on resolving this issue?