The toggle button is unresponsive and the menu fails to slide down smoothly

When the quiz menu is clicked, it slides down to reveal four divs within a single div. Here is the fiddle link for reference: fiddle link.

Below is the HTML code:

Toggle button for quizzes:

<ul>
  <li id="togglebtn"class="quizli"><a href="#">Quizzes</a></li>
  </ul>

 <div id="quizmenu" class="bubble">

                        <div id="subdiv1" class="subdiv">
                            <h5><img src="image/earth.png" alt="earth">WorldGK</h5>
                                <a>gffdfd</a>
                                <a>gfdddd</a>
                                <a>gfddddd</a>
                        </div>
                        <div id="subdiv2"class="subdiv">
                            <h5><img src="image/computer.png" alt="earth">Computer</h5>
                                <a>gfdddddd</a>
                                <a>gfddddddd</a>
                                <a>gfddddddd</a>
                        </div>
                        <div id="subdiv3" class="subdiv">
                            <h5><img src="image/dictionary.png" alt="earth">English</h5>
                                <a>gfgdfdfdfd</a>
                                <a>gfdfdfd</a>
                                <a>gfdfdfdfdd</a>
                        </div>
                        <div id="subdiv4" class="subdiv">
                            <h5><img src="image/code.png"     alt="earth">Programming</h5>
                                <a>C#</a>
                                <a>gfgfdgfdgfgfd</a>
                                <a>gfdffgfgf</a>
                        </div>
                        <div id="subdiv5" class="subdiv">
                            <h5><img src="image/inter2.png" alt="earth">Interview</h5> 
                                <a>ggdfgfdgfd</a>
                                <a>gfgfdgfdgfgfd</a>
                                <a>gfdffgfgf</a>
                        </div>
                </div>

The CSS style can be found below:

Answer №1

.scrollup :hover needs to be written as .scrollup:hover

Answer №2

The opacity is currently set to 1, but you may want to consider changing it to 0.5 for the normal state and then back to 1 on hover.

Give this a try:

.scrollup {
  height:50px;
  width:50px;
  right:50px;
  bottom:50px;
  position:fixed;
  opacity: 0.5;
  filter: alpha(opacity=50);
  -webkit-transition: all .3s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
  background: url('http://s29.postimg.org/59qiyrlab/freeiconmaker_1.png?noCache=1447752779');
  background-repeat:no-repeat;
      background-size:contain
}

.scrollup:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
}

I've included some additional transitions to make the change smoother.

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

The Kendo window does not trigger the resize event when it is restored after being minimized

According to the Telerik documentation, the Kendo window restore function should trigger a resize event. While this works as expected when the window is maximized and then restored, it does not call the resize event when the window is minimized and then ...

What is the best way to standardize data using normalizr?

After receiving the User object: { "id": "123", "username": "TestUser", "group": { "id": "324", "name": "My Group" } } I am interested in executing: normalize(user); Is it possible to achieve this result? I want to separate th ...

What is the most effective way to implement pagination for search results in Reactjs?

I am currently working on a MERN stack application where I have successfully implemented the search query and pagination in Node.js. However, I faced a challenge when trying to integrate both functionalities in React.js. The search query is functioning pro ...

Bring in Another Websites Division with $("div_content").load("page.html");

I need help with integrating the following code into my app: $('#div_content').load('page.html'); The goal is to fetch announcements from my school's website and display them on the app. However, I'm unsure of how to specifi ...

Mongoose: strange outcomes observed when trying to delete the final element from an array

Update: I made a change in my approach by filtering the array directly and saving it instead of using updateOne and $pull. Surprisingly, this fixed the issue of html elements getting removed. However, the same problem persists when deleting the last item i ...

Firebase Operation Not Supported Error in next.js (auth/operation-not-supported-in-this-environment)

After successfully deploying a Next.js app hosted on Vercel with Firebase authentication that functions properly for users, I encountered a mysterious error during the "npm run build" phase: FirebaseError: Firebase: Error (auth/operation-not-supported-in ...

Saving HTML code entered in a textarea field does not work with the database

Recently, I encountered an issue on my website related to storing news posts in HTML format. My initial approach was to write the posts in HTML for better presentation and then transfer this code into a Textarea element. The plan was to save this input in ...

Utilize the 'response.download' method to retrieve unique data not typically expected for a given request

Each time I try to download a file, the response I get is different. The file is generated correctly every time: user,first_name,last_name,active,completed_training 4,Foo,Bas,YES,YES 5,Ble,Loco,NO,NO 9,gui2,md,NO,NO 3137,foo,baz,NO,NO However, the respons ...

"Troubleshooting: Why is the external JavaScript not loading on my WordPress

I've been working on my first WordPress theme and I ran into an issue while trying to load external JavaScript. Instead of loading on the page, it's loading in the wp-admin area. Here is a snippet from my functions.php file: wp_enqueue_script(& ...

Downloading files is restricted to only .txt, .log, and .svg formats, while encountering issues with downloading .xlsx, .xls, .gif

I'm currently working on a project in Struts 2.5 where users can download files they upload using AJAX. So far, it's successfully functioning for .txt, .log, .rtf, and .svg file types. However, there seems to be an issue with downloading files l ...

Tailwind's implementation of CSS Grid allows for the creation of a grid structure where specific cells can be selectively populated

I am currently using Tailwindcss with my Next.js application to showcase multiple images retrieved from a Supabase database in a grid layout. However, I am facing a problem where the images are being displayed in rows instead of columns within the grid whe ...

Is it necessary for a TypeScript Library's repository to include the JavaScript version?

Is it necessary to include a JavaScript version of the library along with the Typescript repository for consumers? Or is it best to let consumers handle the compilation process themselves? Or should I consider another approach altogether? ...

Is the Nopcommerce theme being upgraded from version 2.3 to 3.0?

I am new to nopCommerce and facing a challenge. I need to upgrade a nopCommerce 2.2 site to version 3.0, but only the theme. I already have two sites designed, and I want to apply the 3.0 theme to the 2.2 site. If it were just a simple HTML page, copying ...

Ways to mandate adjusting an option in <select> tag

Using the code $('select').change(function(){alert('changed');});, I am able to trigger an alert every time the option is changed. However, I also need to trigger the alert when the default option, which is the first one in the list, is ...

PHP email script encounters error message despite receiving a network response code of 200

I found this PHP code online and it seems to be correct, but I keep encountering an error message every time I attempt to send a test email. However, the network message indicates that the email was sent successfully. Please refer to the provided images an ...

Generate JSON with a distinct structure

My goal is to send a JSON via POST request to an API in the following format: "answer" => { "name"=>"Test", "email"=>"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d49584e497d49584e49135e52">[email  ...

It is no longer recommended to use getPreventDefault(). Instead, defaultPrevented should be used

Is there a way to automatically print the receipt page when loaded in Firefox? While attempting to do so, Firefox displays the following error: Use of getPreventDefault() is deprecated. Please use defaultPrevented instead. Error source line: src.getPrev ...

Arranging Divs with Right Float Alignment

I am running into issues trying to align and float certain divs properly. Currently, I have two divs with images that are displaying correctly, and now I need to add two more divs with images that behave in the same way. Even though I attempted to use th ...

Setting the maximum height for a div element

Struggling to understand how a div can occupy the entire height of a container. In this particular scenario, I am aiming for the "photo" div to take up the full height, with the yellow and green content appearing on the right side of the photo. Below is th ...

Having issues with the Page inspector and viewing in browser feature in VS2012?

I'm a beginner in the world of website development and I'm facing issues with viewing my webpage on a browser. Every time I attempt to open the page inspector or choose "view in browser," I encounter the following error messages: Page Inspector ...