Navigation Bar - Height/Spacing issue
I am trying to get Navigation Bar to look like this:
I couldnt get it work properly, how to fix it?
<ul class="subnav">
<li> <a href=""> Text One</a></li>
<li> <开发者_StackOverflowa href=""> Text Two</a></li>
<li> <a class="active" href=""> Text Three</a></li>
<li> <a href=""> Text Four</a></li>
</ul>
<style>
.subnav {
list-style:none;
border-bottom:1px solid #c7c4ba;
}
.subnav li{
display:inline;
font-size:14px;
margin-right:1px;
}
.subnav a:hover {
background-color:white;
color:black;
}
.subnav a {
background-color:#c7c4ba;
color:white;
text-decoration: none;
}
.subnav .active {
background-color:white;
color:#c61c25;
border:1px solid #c7c4ba;
}
</style>
Will this work for you? http://jsfiddle.net/ypZqK/1/ The effects you wanted are there but I don't know how else you want different events to appear.
CSS:
.subnav {
list-style:none;
border-bottom:1px solid #c7c4ba;
float:left;
}
.subnav li{
display:inline;
font-size:14px;
margin-right:1px;
float: left;
width: 100px;
height: 25px;
text-align: center;
border:1px solid #c7c4ba;
border-bottom: 0;
line-height: 25px;
background-color:#c7c4ba;
}
.subnav li:first-child{
margin-left: 25px;
}
.subnav a:hover {
background-color:white;
color:black;
}
.subnav a {
color:white;
text-decoration: none;
}
.subnav li.active {
background-color:white;
z-index:999;
}
.subnav li.active a{
color:#c61c25;
}
.clearBorder {
position: relative;
width: 100px;
bottom: 0;
background-color: white;
float: left;
height: 1px;
}
HTML:
<ul class="subnav">
<li> <a href=""> Text One</a></li>
<li> <a href=""> Text Two</a></li>
<li class="active"> <a href=""> Text Three <span class="clearBorder"</span></a></li>
<li> <a href=""> Text Four</a></li>
</ul>
Try this
<ul class="subnav">
<li><a href="">Text One</a></li>
<li><a href="">Text Two</a></li>
<li><a class="active" href="">Text Three</a></li>
<li><a href="">Text Four</a></li>
</ul>
<style>
.subnav {
list-style:none;
padding:4px;
border-bottom:1px solid #c7c4ba;
}
.subnav li{
display:inline;
font-size:14px;
}
.subnav a:hover {
background-color:white;
color:black;
}
.subnav a {
background-color:#cccccc;
color:white;
text-decoration: none;
padding:4px;
}
.subnav .active {
background-color:white;
color:#c61c25;
border-left:1px solid #c7c4ba;
border-right:1px solid #c7c4ba;
border-top:1px solid #c7c4ba;
border-bottom:1px solid #ffffff;
}
</style>
http://htmledit.squarefree.com/
精彩评论