登录 | 注册 | FAQ
Anonymous

Navigation Bar-CSS

+ 发表回复

2 篇帖子 分页: 1 / 1


Navigation Bar-CSS

bhawna » 周一 12月 01, 2014 7:18 pm

My navigation bar is working file on full size of browser but when i am resizing the browser the menu item comes down..as the browser size becomes small menu simultaneously menu item coming down..I want it doesn't comes down even on resizing.please suggest something.
Below is my code:

My CSS Code
代码: 全选
#Hr-4 {
list-style:none;
margin:10px;
padding:0;
float:left;
margin-left:166px;
position:relative;
margin-right:100px;


}
#Hr-4 li {
margin:0;
padding:0;
float:left;
}
#Hr-4 li a {
white-space:nowrap;
display:inline;
float:left;
overflow:hidden;
margin:0;
width:auto;
height:auto;
padding:10px 10px;
text-decoration:none;
text-transform:capitalize;
text-align:center;
font-style:normal;
font-weight:bold;
font-size:25px;
border-right:1px dotted #1C1C1C;
color:#ECECEC;
font-family:'Comic Sans MS',cursive;
background:#2C2C2C;
background:-webkit-gradient(linear,left top,right bottom,from(#101010),color-stop(0.35 #2C2C2C),color-stop(0.73 #545252),color-stop(0.90 #3F3C3C),to(#2A2727));
background:-webkit-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:-moz-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:-o-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:-ms-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
}
#Hr-4 li:first-child a {
-moz-border-radius:8px 0 0 8px;
-webkit-border-radius:8px 0 0 8px;
border-radius:8px 0 0 8px;
}
#Hr-4 li:last-child a {
-moz-border-radius:0 8px 8px 0;
-webkit-border-radius:0 8px 8px 0;
border-radius:0 8px 8px 0;
}
#Hr-4  li a:hover,#Hr-4  li a:focus {
background:#2C2C2C;
color:#4A75F7;
cursor:pointer;
}



html code:

代码: 全选
ul id="Hr-4" style="overflow:hidden">
<li><a href="http://www.spacetravel.com" title="Home">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Social media</a></li>
<li><a href="#">Marketing</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Advertise</a></li>
</ul>
头像

bhawna

  • 帖子: 1
  • 注册: 周一 12月 01, 2014 7:12 pm

Re: Navigation Bar-CSS

XainPro » 周一 12月 08, 2014 7:04 am

that's how it work :0
头像

XainPro

  • 帖子: 3933
  • 注册: 周五 2月 17, 2012 8:10 pm


+ 发表回复

分页: 1 / 1