You are on page 1of 3

Free CSS Navigation Menu Designs

ExplodingBoy Website
ExampIe

O Link 1

O Link 2

O Link 3

O Longer Link Text

O Link 5

O Link 6

O Link 7



CSS Code

#tabsI ,
float:left;
width:100%;
background:#EFF4FA;
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
,
#tabsI ul ,
margin:0;
padding:10px 10px 0 50px;
list-style:none;
,
#tabsI li ,
display:inline;
margin:0;
padding:0;
,
#tabsI a ,
float:left;
background:url("tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
,
#tabsI a span ,
float:left;
display:block;
background:url("tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
,
/ Commented Backslash Hack hides rule from IE5-Mac \/
#tabsI a span ,float:none;,
/ End IE5-Mac hack /
#tabsI a:hover span ,
color:#FFF;
,
#tabsI a:hover ,
background-position:0% -42px;
,
#tabsI a:hover span ,
background-position:100% -42px;
,
%ML Code

div id="tabsI"
ul
lia href="#" title="Link 1"spanLink 1/span/a/li
lia href="#" title="Link 2"spanLink 2/span/a/li
lia href="#" title="Link 3"spanLink 3/span/a/li
lia href="#" title="Longer Link Text"spanLonger Link Text/span/a/li
lia href="#" title="Link 5"spanLink 5/span/a/li
lia href="#" title="Link 6"spanLink 6/span/a/li
lia href="#" title="Link 7"spanLink 7/span/a/li
/ul
/div
mages