The <li> component is unresponsive when clicked

Is there a way to make this code from http://jsfiddle.net/wfhmtx8c/ work in jsfiddle?

#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
opacity: 0.8;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc; 
border-top: 1px solid #ccc; }
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff;
border-bottom: black; }
<ul id="nav">
<li><a href="#">Taal/Languague:</a></li>
<li><a href="#">Nederlands</a></li>
<li><a href="#">English</a></li>
</ul>

However, when I try to use the same code on my website at , it doesn't seem to work. Is the code really identical?

Answer â„–1

I must say, your webpage is functioning flawlessly for me. The color changes on hover are a nice touch, and the redirection upon clicking is working as expected.

However, I find that the opacity effect on text-containing elements is not quite visually appealing. My suggestion would be to revert the opacity back to 100%. Additionally, I noticed a spelling error in the language used. (: Best of luck!

Answer â„–2

The functionality appears to be effective, yet the design does not match that of the example on jsfiddle.

Update: The appearance is now satisfactory.

In addition, as another user pointed out, the transparency of the menu-bar could use some improvement. :)

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

I'm having trouble with my code not fitting all screen resolutions. I usually code on a Macbook, but recently switched to a Windows computer and now everything is out of whack

$(function(){ $("#Welcome").typed({ strings: ["PROGRAMMERS / NETWORKERS"], typeSpeed: 60 }); }); html { background-color: mintcream; background-size: 100%; } /* Home */ .homeheader button { background-color: #4CAF450; top: ...

Conflict between jQuery and dynamically changing page content

I've come across multiple discussions on SO regarding similar topics, but I haven't been able to successfully troubleshoot my code to achieve the desired functionality. I'm currently working on an application that involves dynamically chang ...

What is the best way to apply custom styles in reactJs to toggle the visibility of Google Maps?

There are three radio buttons that correspond to school, restaurant, and store. Clicking on each button should display nearby locations of the selected type. Displaying Google Map and nearby places individually works fine without any issues. class Propert ...

The design of the page is structured around Semantic-UI Grid, and unfortunately, the spacing between elements cannot

Currently, I'm in the process of developing a web application with the help of semantic-ui. The primary objective is to design a layout that comprises a sidebar along with a main content area. Initially, I assumed that utilizing grid would be the most ...

Timing issue with the animation callback

I have been experimenting with creating a bounce effect on my custom scroller by utilizing the translate3d method for scrolling. I managed to successfully implement it, but now I am facing an issue where if you continuously scroll out of bounds (try double ...

Tips for placing a searchbox on top of a carousel?

I need to create a search box that overlays on top of a carousel image. I currently have the search box positioned absolutely, but it's not responsive as it doesn't stay within the carousel as the width decreases. How can I make it responsive whi ...

Content creator: Enhancing HTML search functionality using parameters

Hey there, I'm facing an issue. I created a template on my Blogger site and I need to search for text with a specific label using this URL: www.my_blog.blogspot.com/search?q=label:Printers+SearchText This is the code I have: <form action=&ap ...

I am looking to switch from a hamburger menu to a cross icon when clicked

Hey there, I'm currently working on a Shopify website and trying to make the hamburger menu change to a cross when clicked. I've been experimenting with different methods, but unfortunately haven't had any success so far. I have two images â ...

Is there a way to dynamically modify a website's default viewport settings in a mobile browser?

When viewing a website in Landscape mode, everything looks good. However, switching to Portrait mode displays the message "Screen size not supported." I decided to test this on my desktop browser and discovered that adjusting the initial-scale:1 to initial ...

Issue with HTML not displaying href in Django version 1.5

Hey there, I'm running into a bit of trouble with Django 1.5. I'm trying to create a simple template but I can't seem to get a link (href tag) to display on my page. Here's the code I have so far: {% extends "forum_base.html" %} {% loa ...

Utilizing HTTPS for all links in the source code of Magento

Recently, I encountered a situation while installing a fresh version of Magento v1.7.0 on my VPS running nginx. After uploading the clean install to public_html, unzipping it, and attempting to run the install by entering my IP (xx.x.xxx.xxx:8086), I initi ...

Show the "Splash" picture, then switch to a newly uploaded image and show it for a set amount of time

I am in the process of developing an HTML/JavaScript page that will showcase a splash image (splash.jpg) until it gets replaced by another image file called latest.jpg. Once this latest.jpg is displayed, I want it to remain on the screen for 90 seconds bef ...

It is proving challenging to fully eliminate top and bottom padding in MUI TableCell in order to enable clickable whole cell content

I've been working on making the content of my table cells clickable for routing within my app, and I've made some progress in removing unclickable horizontal space by adjusting padding. However, I'm still facing issues with unclickable space ...

Trouble with clearTimeout function

//Account Creation - Register Button Event $('#registerCreateAccount').on('click', function() { var username = $('#registerUsername').val(); var email = $('#registerEmail').val(); var age = $('#regis ...

The animation isn't loading

I discovered a handy script that displays a waiting message when my form is submitted. I implemented jquery-ui to showcase this message in a dialog box, and it was successful. However, upon customizing the text and adding an animated gif background using C ...

ReactStrap: Issue with displaying an elongated dropdown menu within a table cell

I am facing an issue with a dropdown menu embedded inside a table: https://i.sstatic.net/iOusF.png The dropdown list is quite long with 16 items. However, when I try to scroll down to access the last items, the entire table scrolls down along with the d ...

Attempting to limit entry to a pathway when the loggedIn criterion is satisfied

I am currently facing a challenge with restricting access to the login page if the user is already logged in. I have been attempting to achieve this by checking for an existing token in the localStorage. Do you have any suggestions on how I can troublesh ...

What is the best way to save multiple HTML widgets in my HTML file using R and plot.ly?

I have recently started experimenting with plot.ly in R and I am fascinated by the ability to easily publish graphs directly in html using htmlwidgets. However, I have encountered a challenge when trying to save multiple widgets in the same html file. Curr ...

I am opting to choose children using JavaScript instead of jQuery due to limitations in my current project

Currently, I am utilizing jQuery to determine if there exists an li element within the #mainNavigation div that possesses the data-val attribute of "-1". This functionality is easily achievable with jQuery, however, I am in need of replicating the same b ...

Making the text gradually disappear at the bottom of a section using a see-through overlay, while ensuring the height remains within the boundaries of the section even

Trying to achieve a sleek fade-out effect at the end of a text section for a 'read more' indicator. I've been studying various tutorials, including this, and my current code is as follows: html <section> <p>Lorem ipsum dol ...