【发布时间】：2015-05-04 13:57:43
【问题描述】：
我正在重新设计一个网站，并在 CSS3 中创建了一个导航栏。我想将该栏永久固定到页面顶部，以便在滚动时它始终位于您面前的顶部。这是到目前为止的代码：
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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:'';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/*---------- BODY --------------------------------*/
body {
text-align: center;
background: #e0e0e0;
padding-bottom: 200px;
}
a {
text-decoration: none;
}
/*---------- Wrapper --------------------*/
nav {
width: 100%;
height: 80px;
background: #222;
}
ul {
text-align: right;
}
ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
line-height:80px;
padding: 0 10px;
height: 80px;
color: #777;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px;
/* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
-moz-box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul li:hover a {
color: white;
}
ul li:hover .dropdownContain {
top: 65px;
}
ul li:hover .underline {
border-bottom-color: #777;
}
ul li:hover .dropOut {
opacity: 1;
margin-top: 8px;
}
我还想知道如何在 CSS3 中将导航栏中的链接固定为粗体？我尝试使用 font-weight 但这似乎不起作用，所以我不得不进入 HTML 并单独加粗每个链接。对导航栏的任何其他建议将不胜感激，但不是预期的。
这是 HTML 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="nav.css">
</head>
<body>
<nav>
<ul>
<li><a href="#"><strong>Home</strong></a></li>
<li><a href="#"><strong>About</strong></a></li>
<li class="drop">
<a href="#"><strong>Contact</strong></a>
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li><strong>FAQs</strong></li>
</ul>
</div>
</div>
</li>
<li><a href="#"><strong>Custom Drums</strong></a></li>
<li class="drop">
<a href="#"><strong>Drum Shows</strong></a>
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li><strong>PA Show</strong></li>
</ul>
</div>
</div>
</li>
<li class="drop">
<a href="#"><strong>Parts</strong></a>
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li><strong>Snare</strong></li>
<li><strong>Bass and Tom</strong></li>
<li><strong>Heads</strong></li>
</ul>
</div>
</div>
</li>
<li><a href="#"><strong>Services</strong></a></li>
<li><a href="#">Links</a></li>
</ul>
</nav>
</body>
</html>
【问题讨论】：
-
问题不够清楚。你能发布一个小提琴或至少一个截图
-
给它一个
position:fixed;top:0;left:0; -
请也发布您的导航栏 HTML