Question

我正在撰写此页面，但我无法解决一些问题。第一个问题是如何防止导航链接在悬停上移动？其次是如何让导航链接更紧密？我一直试图解决这个问题，似乎错过了一些东西。谢谢！

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;

}

HTML5表是这样的：

<!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>

Answer 1

删除

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

为了让他们更接近，让他们浮起来。

导航链接继续在悬停时移动

1 个答案: