【发布时间】：2016-06-10 07:38:13
【问题描述】：
这就是我不悬停时的样子（就像我希望它一直看起来一样）：
这就是它看起来瘦的样子：
我设置了header 和navbar，但是当我尝试将navbar 设置为顶部的fixed 时，我得到了这种奇怪的效果。
标题、地址和导航栏中的字体由于某种原因我无法弄清楚。
代码如下：
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ^Reset style. DO NOT DELETE! */
/*-------------------------------------------------------------------------*/
body {
background-color: #254117;
color: white;
width: 100%;
/*max-width: 960px;*/
margin: 0 auto;
margin-top: 12em;
/* ADDED TO MAKE HEADER FIXED*/
}
#header {
/* ADDED TO MAKE HEADER FIXED*/
position: fixed;
/* ADDED TO MAKE HEADER FIXED*/
width: 100%;
/* ADDED TO MAKE HEADER FIXED*/
top: 0;
/* ADDED TO MAKE HEADER FIXED*/
height: 12em;
/* ADDED TO MAKE HEADER FIXED*/
background-color: #254117;
/* ADDED TO MAKE HEADER FIXED*/
}
/* ADDED TO MAKE HEADER FIXED*/
#logo {
font-size: 2em;
width: 60%;
display: inline;
float: left;
text-align: center;
font-family: cursive;
margin-top: 0.5em;
/*position: fixed;*/
/*top: 0;*/
}
#address {
width: 31%;
display: inline;
font-family: cursive;
font-size: 1.5em;
float: right;
/*text-align: right;*/
margin-bottom: 1em;
margin-right: 1em;
margin-top: 0.5em;
/*position: fixed;*/
/*top: 0;*/
}
/* ^LOGO AND ADDRESS STUFF */
/*-------------------------------------------------------------------------*/
nav {
width: 99%;
margin: 20px 0.5%;
clear: both;
/*position: fixed;*/
}
nav ul {
list-style: none;
/*overflow: hidden;*/
overflow: auto;
}
nav ul li {
float: left;
width: 16.6666%;
}
/*FFEE2E*/
nav ul li a {
text-align: center;
/*text-shadow: 2px 1px 2px ; include text shadow or no? */
font-family: cursive;
padding: 8px 0;
display: block;
width: 97.5%;
border-top: 4px solid #FFEE2E;
border-right: 4px solid #E5C000;
border-bottom: 4px solid #E5C000;
border-left: 4px solid #FFEE2E;
background-color: #FCD717;
font-size: 1.5em;
}
nav ul li a,
nav ul li a:focus,
nav ul li a:visited,
nav ul li a:hover,
nav ul li a:active {
text-decoration: none;
color: #0000EE;
}
nav ul li a:hover,
nav ul li a:active {
background-color: #FFE424;
border-top: 4px solid #E5C000;
border-right: 4px solid #FFE424;
border-bottom: 4px solid #FFE424;
border-left: 4px solid #E5C000;
border-radius: 0;
}
nav ul li:first-child a {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
nav > ul li:last-child a {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
/* ^NAVIGATION BAR - LEVEL 1 */
/*-------------------------------------------------------------------------*/
nav li > ul li {
display: block;
width: 99%;
}
nav li > ul {
display: none;
width: inherit;
}
nav li > ul li:first-child a {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
nav li > ul li:last-child a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
nav li > ul:last-child a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
nav li:hover > ul {
display: block;
}
nav li:hover > ul {
position: absolute;
display: block;
}<div id="header">
<div id="logo">Bonlee Grown Farm</div>
<div id="address">650 Al Davis Road
<br>
<p style="font-size: 0.1em">
<br>
</p>Bear Creek, NC 27514
<p style="font-size: 0.1em">
<br>
</p>(012)345-6789 | idontknow@gmail.com</div>
<nav>
<ul>
<li> <a href="BonleeGrownFarm2.html"> Home </a>
</li>
<li> <a href="OurStory.html"> Our Story </a>
</li>
<li>
<a href="WheretoFindUs.html"> Where to Find Us </a>
<ul>
<li> <a href="Market1.html"> Market1 </a>
</li>
<li> <a href="Market2.html"> Market2 </a>
</li>
<li> <a href="Market3.html"> Market3 </a>
</li>
<li> <a href="Market4.html"> Market4 </a>
</li>
</ul>
</li>
<li>
<a href="FromOurFarm.html"> From Our Farm </a>
<ul>
<li> <a href="Plant1.html"> Plant1 </a>
</li>
<li> <a href="Plant2.html"> Plant2 </a>
</li>
<li> <a href="Plant3.html"> Plant3 </a>
</li>
<li> <a href="Plant4.html"> Plant4 </a>
</li>
<li> <a href="Plant5.html"> Plant5 </a>
</li>
<li> <a href="Plant6.html"> Plant6 </a>
</li>
<li> <a href="Plant7.html"> Plant7 </a>
</li>
<li> <a href="Plant8.html"> Plant8 </a>
</li>
<li> <a href="Plant9.html"> Plant9 </a>
</li>
<li> <a href="Plant10.html"> Plant10 </a>
</li>
<li> <a href="Plant11.html"> Plant11 </a>
</li>
<li> <a href="Plant12.html"> Plant12 </a>
</li>
<li> <a href="Plant13.html"> Plant13 </a>
</li>
<li> <a href="Plant14.html"> Plant14 </a>
</li>
<li> <a href="Plant15.html"> Plant15 </a>
</li>
<li> <a href="Plant16.html"> Plant16 </a>
</li>
<li> <a href="Plant17.html"> Plant17 </a>
</li>
<li> <a href="Plant18.html"> Plant18 </a>
</li>
<li> <a href="Plant19.html"> Plant19 </a>
</li>
<li> <a href="Plant20.html"> Plant20 </a>
</li>
</ul>
</li>
<li>
<a href="FromOurKitchen.html"> From Our Kitchen </a>
<ul>
<li> <a href="Jam1.html"> Jam1 </a>
</li>
<li> <a href="Jam2.html"> Jam2 </a>
</li>
<li> <a href="Jam3.html"> Jam3 </a>
</li>
<li> <a href="Jam4.html"> Jam4 </a>
</li>
<li> <a href="Jam5.html"> Jam5 </a>
</li>
<li> <a href="Jam6.html"> Jam6 </a>
</li>
<li> <a href="Jam7.html"> Jam7 </a>
</li>
<li> <a href="Jam8.html"> Jam8 </a>
</li>
<li> <a href="Jam9.html"> Jam9 </a>
</li>
<li> <a href="Jam10.html"> Jam10 </a>
</li>
</ul>
</li>
<li> <a href="CarolinaBabe.html"> Carolina Babe </a>
</li>
</ul>
</nav>
</div>【问题讨论】：
-
你想要导航栏中标题的字体加粗吗？
-
看不到你的代码有任何问题，除非导航栏有滚动条，如果你想知道的话我已经修复了
-
创建代码笔网址供参考-codepen.io/nagasai/pen/ezJEEX
-
我不希望它们加粗，但是当我将鼠标悬停在“来自我们的农场”或“来自我们的厨房”上时，整个标题的字体会变细。我在浏览器插件中使用 sublime text 3 和视图。认为它可能只是 Sublime？
-
@dippas 我很想知道你是怎么得到滚动条的！