jalaladdin Posted April 8, 2013 Share Posted April 8, 2013 (edited) top menu bar with browser's scroll bar movedhttp://aboonajmi.ir/...-01-27-18-22-57 Edited April 8, 2013 by jalal Link to comment Share on other sites More sharing options...
Ingolme Posted April 8, 2013 Share Posted April 8, 2013 Don't use position: fixed; Or absolute or relative either for that matter. Link to comment Share on other sites More sharing options...
jalaladdin Posted April 9, 2013 Author Share Posted April 9, 2013 if idon't use position= fixed , menu bar moved with browser's scroll bar please look at picture in this my pervious post Link to comment Share on other sites More sharing options...
Ingolme Posted April 9, 2013 Share Posted April 9, 2013 Yes, the menu bar moves with the scroll bar because in the CSS for its container the position property is set to "fixed" Link to comment Share on other sites More sharing options...
jalaladdin Posted April 9, 2013 Author Share Posted April 9, 2013 #nav {}#navl {position:fixed;width:980px;}#navr {height:40px; width: 980px; background:url(../images/mainmenu.png) 0 0 repeat-x; border-bottom: 2px solid #D1F82E; font-family: 'Lusitana', serif; border-left: 1px solid #BAB9B9; border-right: 1px solid #BAB9B9;}#nav {z-index:10; position:relative;}#nav-left { float:left; width:80%;}#nav-right { float:right; width:20%;}#nav ul {margin-left: 3px; padding:0; float:right;}#nav ul li {list-style:none;float:right;height:100%;position:relative; padding-right:1px; margin:0;}#nav ul li a { display:block;padding:0 15px 0 15px; margin:0; line-height:40px; color:#fff; text-decoration:none;font-size:14px;font-weight:normal; -moz-transition: color 0.3s ease 0s, background 0.3s ease 0s; -webkit-transition: 0.3s ease 0s; -o-transition: 0.3s ease 0s;}#nav ul li.active {}#nav ul li.active a {color:#fff; background: #0c6a87; height: 40px; line-height: 40px;}#nav ul li:hover {}#nav ul li a:hover{ background: #0c6a87; text-decoration:none; font-weight:normal; color:#fff; text-shadow: none; }#nav ul li ul {position:absolute;width:100%;left:-999em;border-top:0; margin:0; padding:0;}#nav ul li:hover ul, #menu ul li.sfHover ul {left:0;}#nav ul li ul li {padding:0;height:auto;width:180px; margin:0 auto; border:none; text-align: right; }#nav ul li ul li:hover ul {right:180px; top:0}#nav ul li:hover ul li a {text-shadow:none;}#nav ul li:hover ul li { background:none;}#nav ul li:hover ul li a, #nav ul li ul li a, #nav ul li.active ul li a{margin:0; padding:0 0 0 10px;height:24px;line-height:24px; background:#555;border-bottom:1px solid #3a3a3a;color:#d1d1d1; font-size:12px;font-weight:normal;text-shadow:none; -moz-border-radius: 0px; border-radius: 0px;}#nav ul li ul li a:hover, #nav ul li ul li.active a, #nav ul li.active ul li a:hover, #nav ul li.active ul li.active a {text-align: right; padding:0 0 0 10px;height:24px;line-height:24px;background:#343434;color:#fff; font-size:12px;text-shadow:none;}#nav ul li ul ul, #nav ul li:hover ul ul, #nav ul li:hover ul ul ul, #nav ul li:hover ul ul ul ul, #nav ul li.sfHover ul ul, #nav ul li.sfHover ul ul ul, #nav ul li.sfHover ul ul ul ul {left:-999em;}#nav ul li ul li ul li{padding:0;height:auto;width:180px; margin:0 auto; border:none; text-align:right;} how can i change this code Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now