0
我想让我的导航栏直接在页面中间。所以当我向下滚动时,我的内容的其余部分从下面出现。有人可以请帮助,并解释如何将我的背景图像定位到固定位置,以便滚动时背景不会移动,并在分辨率上失去质量。如何水平和垂直居中导航栏?
.menu-wrap {
width: 750px;
margin: 0 auto;
list-style: none;
}
/* DROPDOWN */
.ulMenu {
padding: 0;
margin: 0;
}
.navMenu ul {
padding: 0;
margin: 0;
line-height: 30px;
}
navMenu {
padding: 0;
margin: 0;
}
.navMenu li {
list-style-type: none;
padding: 0;
margin: 0;
float: left;
position: relative;
}
.navMenu ul li a {
text-align: center;
padding: 10px;
width: 150px;
height: 30px;
display: block;
color: white;
background-color: rgba(233, 233, 233, 0.5);
text-decoration: none;
border-radius: 0px;
font-family: 'Raleway', sans-serif;
font-size: 20px;
}
.navMenu ul ul {
position: absolute;
visibility: hidden;
}
.navMenu ul li:hover ul {
visibility: visible;
}
.ulMenu .arrow {
font-size: 10px;
}
.navMenu ul li:hover ul li a:hover {
background-color: rgba(93, 93, 93, 0.5);
}
.navMenu li:hover {
background-color: none;
}
.navMenu a:hover {
color: blue;
}
.navMenu ul li ul li {
padding: 2px 0 0 0;
}
.navMenu ul li {
padding: 0 2px 0 0;
}
/* DROPDOWN ENDED */
html {
background-image: url("indexImg.jpg");
background-size: cover;
}
<div class="menu-wrap">
<nav class="navMenu">
<ul class="ulMenu">
<li><a href="index.html">Home</a>
</li>
<li>
<a href="products.html">Products<span class="arrow">▼</span></a>
<ul>
<li><a href="#">#</a>
</li>
<li><a href="#">#</a>
</li>
</ul>
</li>
<li><a href="contact.html">Contact Us</a>
</li>
<li><a href="aboutUs.html">About </a>
</li>
</ul>
</nav>
</div>
创建例如上的jsfiddle – 2015-04-02 08:43:01
你是什么意思 – user3774020 2015-04-02 08:44:27
创建例如你的问题 – 2015-04-02 08:47:36