"Clicking on the dropdown menu will consistently result in it collapsing

When it comes to a DropDown menu, the typical expectation is that when an option is selected, the menu will collapse. However, in my situation, I do not want the dropdown menu to collapse if the user is attempting to log in and clicks on the Username and Password fields.

I recall that this feature worked previously, but it seems to be related to the CSS, which I have cleaned up since then. Is there a simple solution for achieving this?

P.S: For some reason, it appears that I am unable to share clickable links...

Answer №1

give this a try HTML

<div class="signup" >
<a href="#">LOGIN</a>  
</div>

<div class="login_form  ">
<form method="post" action="#">
<p>Email</p>
<p><input type="email" name="email" class="email" placeholder="Email"></p>
<p>Password</p>
<p><input type="password" name="password" class="password" placeholder="Password"></p>
<br>
<p><span><input type="checkbox" name="check" class="check" style="vertical-align:middle;">Remember me</span><span class="login_btn" ><a href="#">Login</a></span> </p>

</form>
</div><!-- login_form -->

CSS

.signup
{
background-color:rgb(255,255,255);
width:25%;
height:25px;
border-color:rgb(221,221,221);
border-width:1px;

-moz-border-radius:1px;

-webkit-border-radius:1px;

border-radius:1px;
border-style:solid;
text-align:center;
padding:9px 8px 0 5px;
margin-top:10px;

}

.signup a
{color:#444444;
font-size:0.9375em;
text-decoration:none;
}


.login_form
{   

width:50%;
    height:auto;

padding:10px 0 0 0;

position:absolute !important;


}

.login_form p
{line-height:150%;
font-size:0.875em;
color:#535353;
padding-left:5px;

}

.email, .password
{border:1px solid #D9D8D7;
width:96%;
}

.login_btn
{
display:block;


width:80%;
padding:3px 0 5px 0;
border-color:rgb(242,128,8);
border-width:1px;
border-style:solid;

text-align:center;
margin-bottom:2px;

}

.login_btn a
{color:#fff;
}

JS

$(".login_form").hide();

$(".signup, .login_form").click(function(e) {
    $(".login_form").show();
    e.stopPropagation();
    return true;

   });


  $(document).click(function(){  
  $('.login_form').hide(); //hide the form

  }); 

try out the functional fiddle here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for updating nested data in mongoose with 2 unique identifiers?

Is there anyone out there with experience in making a Node push function work on nested objects beyond just one level? I'm looking to delve deeper into a second id within the DB model. // Functional code for updating a user at one level with one id ...

Transferring data from jQuery Ajax to PHP

I'm facing a challenge in retrieving a value back to PHP that I can manipulate and save to the database. It appears that using the GET method with jQuery AJAX is not yielding the desired results. Below is the PHP code snippet where I attempt to captur ...

Modifying the header on an HTML page

Looking for assistance with code to have my site header appear after the page has scrolled past Figure 1 and change on reaching Figure 2. Any suggestions on how I should write this code? Your help is greatly appreciated! ...

Symfony: Enhancing array elements with updated bootstrap progress bar

I'm facing a challenging issue that I need help with. Currently, I have a command set up to send a large number of emails (around 300 or more) every 5 minutes using cron in order to distribute a newsletter. My goal is to keep track of how many emails ...

Configuring static files in Django for hosting a website in production mode

I have been attempting to serve my static files from the same production site in a different way. Here are the steps I took: First, I updated the settings.py file with the following: DEBUG = False ALLOWED_HOSTS = ['12.10.100.11', 'localhos ...

What is the reason for the find() method not displaying the most recent data from a MongoDB database in an Express.js application?

Upon calling the app.post('/form-submit', funtion(req, res)) method, my expectation is for it to first save the data using save(). This works fine, but then when I call the find() method, it shows all the data from the mongoDB database except for ...

What is the reason that my link to test.xls is functioning properly but the one to the .txt file is not working?

I am facing an issue with downloading files from a folder named Test. In this folder, I have various file types such as .xls, .txt, and .doc files. Within the html code, I have specified download links for these files: <p> <a href="../../Test/St ...

Create shortened class names

Is there a way to abbreviate class names in HTML and CSS files? For example, I currently have the class name: .profile-author-name-upper And I would like to change it to something shorter like: .p-a-n-u or .panu Any suggestions on how to achieve thi ...

What is the best way to bring Axios into the main.js file in a Vue project?

Recently, I encountered an issue with using axios in my Vue project. An error message stating that 'axios' is not defined popped up when I attempted to use axios.get() in my Home.vue file. I'm wondering if the problem lies within my configur ...

Enhance your images with a hover zoom effect while viewing an overlay on top

Is there a way to make an image still zoom in on hover even when it has an overlay using CSS? I am currently working with Bootstrap 5.2 Thank you in advance. .trip-card { position: relative; } .trip-card img { border-radius: 30px; } .overlay { ...

I am interested in incorporating array elements into a class selector

I need help adding array elements into a class selector. The image attached shows the current result, but I want the divs to be separated like this $(document).ready(function () { var arr = ['top', 'right', "Bottom", &q ...

I am looking to dynamically print countries from an array in my code based on the selected option

I'm in need of some simple code assistance. I want to display a list of countries that correspond to a selected letter, but I'm struggling to do so dynamically at the moment. For example, if I select the letter A from a dropdown menu, I want the ...

Select a CSS design with C# coding in ASP.net

I have defined two classes in my embedded CSS on the Default.aspx page. If necessary, I can move the code to an external CSS file. Is it possible to write C# code that allows me to select between these two styles for my table after clicking a button? I ha ...

Utilizing JavaScript for the removal or hiding of span elements with specific class attributes

I am currently working on a software project that involves compiling HTML fragments and then exporting them to Microsoft Word. My goal is to create a script that will cycle through these compiled fragments and remove specific tags that have a particular CS ...

The bootpag event seems to trigger multiple times upon execution following an Ajax function call

I have integrated the bootpag jQuery pagination plugin from bootpag into my .NET/jQuery project. Within my project, there is a filtering menu that triggers an Ajax call to update the page with filtered or paginated data when a user selects a filtering opti ...

Understanding special characters within a URL

Here is a URL example: postgres://someuser:pas#%w#@rd-some-db.cgosdsd8op.us-east-1.rds.amazonaws.com:5432 This URL is being parsed using the following code snippet: const url = require('url'); const { hostname: host, port, auth, path } = url.par ...

What is the best way to use selenium to extract all p-tags and their corresponding h2-tags?

I am looking to retrieve the title and content from an article: <h2><span>Title1</span></h2> <p>text I want</p> <p>text I want</p> <h2><span>Title2</span></h2> <p>text I want< ...

What is the best way to structure a nested JSON object to align with a nested HTML form layout?

Currently, I am working on a form that is structured using tabs, optional fieldsets, and various field elements in HTML. Below is a simplified representation of the structure: div.tab1 div.fieldset3 div.container308 div.container314 div.fieldset4 d ...

Using AngularJS with Spring MVC and @RequestParam

As a newcomer to AngularJS, I have a Spring controller that retrieves an object from the database based on its id. I want to pass this id using @RequestParam in AngularJS. However, when attempting to do so, I encountered the following error message: "Error ...

Is it possible to include a submenu within a md-tooltip?

I have set up an md-tooltip for a sidebar, but I would like to enhance it by enabling a submenu option. For instance, if there is a Contacts submenu under the Profile menu, I want to be able to access Contacts when hovering over the Menu Icon. The tooltip ...