CODEWITHSUNDEEP
csshyperlinknav
floyd
floyd

Reputation: 131

Nav links keep moving on hover

I'm working on this page but am having trouble figuring a few things out. First question is how do I keep the navigation links from moving on a hover? Second is how do I get the navigation links closer together? I've been trying to figure this out and seem to be missing something. Thanks!!

header{
height: 80px;
color: #ffffff;

border: 3px solid #000000;
background-color: white;
background-repeat: no-repeat
}
header img {
float: left;
width: auto;
height: 230%;
}
nav ul{
list-style: none;



}
nav li {
display: inline;
padding: 5px;


}
nav a{
margin-left: 150px;

}
nav li a{
color: #92d050;
text-decoration: none;

padding: 5px;

}
nav a:hover {
font-weight: bold;
color: black;


}
nav a.current{
color: black;
}
#about{
float: left;
padding-top: 75px;
padding-left: .25em;
width: 300px;

}

the HTML5 sheet is this:

<!doctype html>


    <head>
       <meta charset="utf-8">
        <title>Hair by Sasha </title>
        <link rel="stylesheet" href="main.css">
        <link rel="stylesheet" href="main_print.css" media="print">
    </head>
    <body>
    <header>Hair by Sasha

    <a href="index.html" title="home"><img src="images/logo.jpg" alt="Hair by Sasha">   </a>
    <nav>
    <ul>
    <li><a href="index.html" class="current">Home</a></li>
    <li><a href="services.html" >Services</a></li>
    <li><a href="about.html" >About Us</a></li>
    <li><a href="contact.html" >Contact Us</a></li>
    </ul>
    </nav>
    </header>

Upvotes: 1

Views: 220

Answers (1)

Tushar
Tushar

Reputation: 4418

Remove

nav a:hover {
    font-weight: bold; /* this moving links remove it */
}

And to bring them closer give float to li.

Upvotes: 1

Related Questions