html nav 置顶居中,如何让我的nav栏始终在页面中居中使用CSS3？

而且我怎样才能让颜色伸展过去呢？ (我知道我需要更改列表项目的背景颜色，但似乎没有其他工作)。

这里是我的CSS代码：

#nav {font-family: journalregular;

width: 90%;

box-shadow: 0px 7px 22px -6px rgba(0,0,0,0.75);}

#nav ul {

list-style: none;

padding: 0;

margin: 0;

background:#ffffff;

}

#nav a {

font-weight: bold;

font-size: 250%;

color: black;

text-decoration: none;

cursor: default;

}

#nav li li a {

display: block;

font-weight: normal;

font-size: 180%;

font-weight: bold;

color: black;

padding: 10px 10px;

}

#nav li li a:hover {cursor:pointer;

background: pink;}

#nav li {

display: inline-table;

position: relative;

width: 10em;

text-align: center;

cursor: default;

background-color: #DEB887;

/*border: 1px solid #7d6340;

border-width: 0px 0px 1px 0px;*/

}

#nav li ul{

position: absolute;

top: 100%;

width:10em;

font-weight: normal;

padding: 0.5em 0 1em 0;

border: solid 1px #DEB887;

}

#nav li>ul {

top: auto;

left: auto;

display: none;

opacity: 0;

transition: display .5s;

}

#nav li li {

display: block;

float: none;

background-color: white;

border: 0;

}

#nav li:hover > ul{

display: block;

opacity: 1;

}

a{text-decoration: none;}

而我的HTML代码：

Geography
Ambience
- House
- 1
- 2
- 3
Pets
- 1
- 2
Food
- 1
- 2

显示您的网页代码。 –

2014-10-11 01:44:50

@Cattla对不起。我已经做了。 –

2014-10-11 01:49:26

http://jsfiddle.net/nn998nn0/1/这是你想要的吗？ –

2014-10-11 02:34:05

html nav 置顶居中,如何让我的nav栏始终在页面中居中使用CSS3？相关推荐

在html中如何使div在页面中居中显示
在html中如何使div在页面中居中显示最近无聊中又再温习了下html,发现好多东西都忘了.尝试着写了一个html网页,结果就连div如何在页面中居中显示都查了好久才弄出来.其实我不知道为什么这样可 ...
html元素在模块中心显示,DW怎么设置DIV模块在页面中居中 DW如何设置网页打开绝对居中？...
Dreamweaver(DW)中的div层怎么居中 Dreamweaver中div怎么页面居中? Dreamweaver中div怎么页面居中?我写的DIV都是靠左,怎么让它页面居中?在.header的 ...
RecyclerView滚动指定条目并在页面中居中
RecyclerView滚动指定条目并在页面中居中内容提要本次的需求是通过指定position来控制条目滚动,并且要滚动到指定到中间的位置. 下面先上图,看看是不是你要如下介绍主要的步骤带着问 ...
如何实现标签元素在HTML页面中居中显示
如何实现标签元素在HTML页面中居中显示在HTML页面设计中常常需要实现标签元素在HTML页面中居中显示,相关知识点较多也较杂乱,本文试图介绍一些比较基本与实用的相关知识. 使用标签的align属性 ...
html5导航栏悬浮置顶,（微信小程序）导航栏悬浮吸顶以及置顶的设置
前言最近在做小程序的项目,遇到一些问题放在这里,一来作为自己经验收集册,收集自己的项目遇到的问题或者做的东西:二来将自己遇到的问题经验分享出来前景提要吸顶功能页面设置在静态的首页,作为一个首页展 ...
html页面居中怎么设置,实现div标签在html页面中居中的几种方式
在制作网页的时候,我们会需要给div标签各种方式的居中布局,以下分享了几种常见的几种居中方式,以及居中的方法. 1.实现垂直居中当标签元素为文本或图片时我们可以直接在父元素css中设置text-al ...
html nav 置顶居中,CSS / HTML试图使nav ul元素居中
我只是在试图练习jsfiddle,我遇到了一个我无法解决的问题.所以希望你们中的一些人可以在这里帮助我一点.对于CSS的基础知识来说,这似乎是一个如此愚蠢的问题,但出于某种原因,这个问题让我有了. 基 ...
[置顶]白话贝叶斯理论及在足球比赛结果预测中的应用和C#实现
离去年"马尔可夫链进行彩票预测"已经一年了,同时我也计划了一个彩票数据框架的搭建,分析和预测的框架,会在今年逐步发表,拟定了一个目录,大家有什么样的意见和和问题,可以看看,留言我会 ...
jsp文字上下居中显示_如何让任务栏完全透明，图标居中
下面是我的任务栏: 可以看到是完全透明的,而且图标全部居中显示,如果您也想将任务栏变成这样,那就请继续往下看. 1.任务栏变透明方法在微软应用商店搜索"TranslucentTB" ...

html nav 置顶居中,如何让我的nav栏始终在页面中居中使用CSS3？

html nav 置顶居中,如何让我的nav栏始终在页面中居中使用CSS3？相关推荐

最新文章

热门文章