Why are my links moving when they are clicked in CSS?

I am trying to display 3 links styled as a list in HTML, and I have used the following CSS code to position them next to each other:

li
{
    float:left;
    margin-right:15px;
    margin-top:40px;
}

However, when I click on one of the links, the other link on the right moves towards the clicked one. I am unsure why this is happening. How can I fix this issue?

Here is the code I have used:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
WebMD - Better information. Better Health.
</title>
<link rel="stylesheet" href="mainMd.css"/>
<img src="logo_trans.png" class="logo"/>
</head>
<body>
<header>
<ul class="categories">
<li class="links1" id="symp"><a href="">Symptoms</a></li>
<li class="links1" id="doc"><a href="">Doctors</a></li>
<li class="links1" id="health"><a href="">Health Care Reform</a></li>

</ul>
</header>
<section>
</section>
<aside>
</aside>
<footer>
</footer>

</body>

</html>

CSS:

html
{
    background-image:linear-gradient(to top, white, #F5F9FA);
    height:100%;
}
.logo
{
    padding-left:176px;
    padding-top:4px;
    float:left;
}
 li
{
    float:left;
    margin-right:15px;
    margin-top:40px;
    font-family:Candara;
    font-size:12px;
    color:#5895D4;
}

#symp
{
    list-style-image:url(walking.png);
    margin-left:55px;
}
#doc
{
    list-style-image:url(doc.png);
}
#health
{
    list-style-image:url(umb.png);
}
li a
{
    color:#5895D4;
    text-decoration:none;
}
li a:hover
{
    text-decoration:underline;
}
li a:active
{
}
li a:visited
{

}

Answer №1

At this moment, the CSS is targeting li instead of li a.

If your HTML layout resembles the following:

<li><a href=''>Item 1</li>
<li><a href=''>Item 2</li>

You can try using this CSS to focus on the links inside each li.

li a {
    float: left;
    margin-right: 15px;
    margin-top: 40px;
}

Your issue may be occurring because a::visited is distinct from li. Visit MDN's :visited page for more information.

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

What is the best way to manage images within input fields using React?

I'm currently working on a custom Reactstrap component. My goal is to have an image displayed within the input field, like this: https://i.sstatic.net/2QXEf.png However, what I am experiencing is not what I expected: https://i.sstatic.net/WbEeW.png ...

A technique for incorporating animation or a software stack with React

Looking for help with creating a unique movie section on my website featuring an entrance animation that is not a fade-in, but rather a smooth opening transition when clicking on the image card. I have attempted CSS transitions using width and height, but ...

Breaking up phrases into separate lines (Bootstrap 4 + Mobile)

On my website, I currently have a sentence that is fully displayed on the Desktop version. However, I am looking to modify it so that it breaks into 2-3 lines when viewed on Mobile using Bootstrap-4. For example, here is the text in question: Our large, ...

Using an image as an onclick trigger for a JavaScript function

I am working on a registration page as part of my university project where users can create an account and store their information in a MySQL database. One feature I'm implementing is the ability for users to select an avatar picture. Below is the co ...

I am having trouble displaying an image on a page within my Vuetify project

I've organized my directories in a similar structure as shown here All images are saved in the assets folder. On my HTML page, I'm using this tag: <img :src="imageLink"> where imageLink is a string defined like this: imageLink ...

The autocomplete feature in the hotel name field is designed to recognize HTML-encoded entities, thanks to the combination of

I keep encountering this issue. "King & Grove Hotel" is displaying as "King &amp; Grove Hotel" This problem arises while using jQuery autocomplete. ...

Issue with Bootstrap's form-inline element causing incorrect spacing in btn-group

I'm having an issue with Bootstrap components. When I try to input numbers, everything works fine as long as I don't use form-inline or a navbar. Check out my fiddle here: http://fiddle.jshell.net/6Lrhcezb/ https://i.sstatic.net/hzmlM.png The ...

Why isn't the angularjs directive setting a value for a specific scope?

This is an example of HTML code: <div ng-controller="main"> <div ng-show="showhide">welcome</div> <div my-directive>click</div> <div ng-click="submit()">submit</div> </div> Here ...

The HTML remains unchanged after making an AJAX request

I have a process where I update a database entry by clicking on a select dropdown. Once I confirm the selection, an AJAX POST request is sent to another view which implements the necessary changes in the database and then redirects back to the previous pag ...

Drag a dropdown menu to the bottom left corner and set it to full width on mobile using CSS

Check out this code snippet with CSS and HTML: CSS .flyout { position: absolute; top: 30px; right: 15px; background-color: #FFF; padding: 20px; border: 1px solid #eaeaea; z-index: 999; width: 400px; border-top: 3px solid #337AB7; disp ...

Using AngularJS to apply custom css to a tag within a directive for creating a Bootstrap sticky footer

Currently, I am in the process of developing my very first AngularJS application with Bootstrap as the responsive framework. In order to achieve a sticky footer, I usually utilize jQuery to determine the outerHeight of the footer and then apply that value ...

While typing in the box I am currently working on, another CSS box is shifting around

Whenever I try to add a paragraph to my box, the other one shifts. I've checked for any issues with margins or spacing, but nothing seems off from what I can tell. I have no clue how to resolve this. Here's how it appears before making any change ...

How to animate a left border shifting to the center using JavaScript

As I'm modifying my current div, I need to add a vertical line in the center of it. I've come across various solutions where a left border is added and then shifted using the left property by 50% (which effectively places it in the middle). Here ...

I need to see the image named tree.png

Could someone assist me in identifying the issue with this code that only displays the same image, tree.png, three times? var bankImages = ["troyano", "backup", "tree"]; jQuery.each( bankImages, function( i, val ) { $('#imagesCon ...

What is the method for choosing an Object that includes an Array within its constructor?

Is there a way to retrieve a specific argument in an Object constructor that is an Array and select an index within the array for a calculation (totaling all items for that customer). I have been attempting to access the price value in the Items Object an ...

How can the entire menu be closed in Bootstrap 5 when clicking on a link or outside of the page?

I'm currently utilizing BootStrap 5 for constructing my webpage. Within my page, I have a NavBar Menu containing various links. <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

Leveraging node.js within website development

I have successfully loaded and hosted HTML using Node.js. My website, which consists of only HTML, CSS, and some frontend JavaScript, is fully developed. I do not plan on adding any additional frontend elements to it. I now want to utilize a Node.js serv ...

When jQuery is used to move rows between tables, it can interfere with

When moving rows between tables, everything seems to work fine. However, once the row is moved to the other table, all JavaScript functions related to that row stop working, and the reason remains unknown. The JavaScript code is simple - it involves takin ...

Modifying the ID of a Joomla module title with identical IDs

I have three modules, all with the same id: <?php if ($this->countModules('user2')) : ?> <div id="user2-wrap"><div id="user2" class="container row clr"> <jdoc:include type="modules" name="user2" style="usergri ...

Issues encountered with the functionality of the AngularJS greetController Controller

Currently exploring AngularJS, I am following a tutorial and have hit a roadblock trying to get the greetController controller to function properly. Below is the HTML code: <!DOCTYPE html> <html> <head> <title>HTML.it</titl ...