让我的CSS菜单保持在屏幕上?

时间:2013-06-04 04:08:15

标签: html css3 css

http://facebook.com中,他们有一个导航栏类型的东西,它停留在页面的顶部,我怎么能用我的代码做到这一点。我有我的CSS高级菜单工作,除了那个问题。这里是我的jsfiddle的链接

Js fiddle

css的主要部分

#cssmenu ul { margin: 0; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu { height: 42px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4);}

现在,如果我没有弄错,如果不检查JsFiddle

,则必须使用此部分

7 个答案:

答案 0 :(得分:37)

将以下内容添加到菜单css:

#cssmenu {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}

基本上他们是这样做的。

答案 1 :(得分:5)

添加固定属性

 #cssmenu {
          position:fixed;
 }

答案 2 :(得分:3)

如果你使用:

,可以这样做
 position:fixed;

答案 3 :(得分:2)

只是一个想法,你不需要添加z-index: 1000;以便它浮动在页面上的所有项目上吗?

答案 4 :(得分:1)

使用此css将导航栏固定在顶部。

 #cssmenu {
   position:fixed;
   top: 0;
   margin:auto;
   left: 0;
   right: 0;
   width: 100%;
  }

此处演示:http://jsfiddle.net/SkuhZ/

答案 5 :(得分:1)

是的,您可以添加z-index: 1000;以使其浮动在所有内容之上。就像RLCJohn上面所说的那样。

答案 6 :(得分:0)

这3个人会做..

position: fixed;
top: 0;
width: auto;