css| Navigation
CSS Code
The following is a reference fragment:
/* Common Styling * *
/* Set up the overall width of the menu Div, the font and the margins * *
. menu {
Font-family:arial, Sans-serif;
width:750px;
margin:0;
margin:50px 0;
}
/* Remove the bullets and set the margin and padding to zero for the unordered list * *
. menu UL {
padding:0;
margin:0;
List-style-type:none;
}
/* Floating list, so you can have items on one line, and their relative positioning allows the following list to appear in the correct position.
. menu ul Li {
Float:left;
position:relative;
}
/* Style The links to is 104px wide by 30px high with a and right border 1px solid.
Set the background color and the font size. */
. menu ul li A,. Menu ul Li a:visited {
Display:block;
Text-align:center;
Text-decoration:none;
width:104px;
height:30px;
Color: #000;
border:1px solid #fff;
border-width:1px 1px 0 0;
Background: #c9c9a7;
line-height:30px;
font-size:11px;
}
* Make the dropdown ul invisible * *
. menu UL Li ul
Display:none;
}
/* Specific to non IE browsers * *
/* Set the background and foreground color of the main menu Li on hover * *
. Menu ul Li:hover a {
Color: #fff;
Background: #b3ab79;
}
* Make the Sub menu UL visible and position it beneath the main Menu list item * *
. Menu UL Li:hover ul {
Display:block;
Position:absolute;
top:31px;
left:0;
width:105px;
}
/* Style The background and foreground color of the submenu links */
. menu UL Li:hover ul li a {
Display:block;
Background: #faeec7;
Color: #000;
}
/* Style The background and forground colors of the links on hover * *
. menu UL Li:hover ul li a:hover {
Background: #dfc184;
Color: #000;
}
For IE6
The following is a reference fragment:
/* Styling specific to Internet Explorer IE5.5 and IE6. Yet to the IF IE7 handles Li:hover * *
/* Get rid of any default table style */
Table {
Border-collapse:collapse;
margin:0;
padding:0;
}
/* Ignore the link used by ' other browsers ' *
. menu ul li A.hide,. Menu ul Li A:visited.hide {
Display:none;
}
/* Set the background and foreground color of the main menu link on hover * *
. menu ul li a:hover {
Color: #fff;
Background: #b3ab79;
}
* Make the Sub menu UL visible and position it beneath the main Menu list item * *
. menu ul Li A:hover ul
Display:block;
Position:absolute;
top:32px;
left:0;
width:105px;
}
/* Style The background and foreground color of the submenu links */
. menu ul Li A:hover ul li a {
Background: #faeec7;
Color: #000;
}
/* Style The background and forground colors of the links on hover * *
. menu ul Li A:hover ul li a:hover {
Background: #dfc184;
Color: #000;
}
XHTML code
The following is a reference fragment:
<div class= "Menu" >
<ul>
<li><a class= "Hide" href= ". /menu/index.html ">DEMOS</a>
<!--[If LTE IE 6]>
<a href= ". /menu/index.html ">demos
<table><tr><td>
<! [endif]-->
<ul>
<li><a href= ". /menu/zero_dollars.html "title=" The Zero Dollar Ads page ">zero dollars</a></li>
<li><a href= ". /menu/embed.html "title=" wrapping text around images ">wrapping text</a></li>
<li><a href= ". /menu/form.html "title=" Styling Forms ">styled form</a></li>
<li><a href= ". /menu/nodots.html "title=" removing Active/focus borders ">active focus</a></li>
<li><a href= ". /menu/shadow_boxing.html "title=" Multi-position drop Shadow ">shadow boxing</a></li>
<li><a href= ". /menu/old_master.html "title=" Image Map for detailed information ">image map</a></li>
<li><a href= ". /menu/bodies.html "title=" fun with background images ">fun backgrounds</a></li>
<li><a href= ". /menu/fade_scroll.html "title=" fade-out scrolling ">fade scrolling</a></li>
<li><a href= ". /menu/em_images.html "title=" em size images compared ">em sized images</a></li>
</ul>
<!--[If LTE IE 6]>
</td></tr></table>
</a>
<! [endif]-->
</li>
<li><a class= "Hide" href= "index.html" >MENUS</a>
<!--[If LTE IE 6]>
<a href= "index.html" >menus
<table><tr><td>
<! [endif]-->
<ul>
<li><a href= "spies.html" title= "a coded list of spies" >spies menu</a></li>
<li><a href= "vertical.html" title= "A horizontal vertical menu" >vertical menu</a></li>
<li><a href= "expand.html" title= "An enlarging unordered list" >enlarging
<li><a href= "enlarge.html" title= "a unordered list with link images" >link images</a></li>
<li><a href= "cross.html" title= "Non-rectangular links" >non-rectangular</a></li>
<li><a href= "jigsaw.html" title= "Jigsaw Links" >jigsaw
<li><a href= "circles.html" title= "Circular links" >circular
</ul>
<!--[If LTE IE 6]>
</td></tr></table>
</a>
<! [endif]-->
</li>
<li><a class= "Hide" href= ". /layouts/index.html ">LAYOUTS</a>
<!--[If LTE IE 6]>
<a href= ". /layouts/index.html ">layouts
<table><tr><td>
<! [endif]-->
<ul>
<li><a href= ". /layouts/bodyfix.html "title=" Cross browser fixed layout ">fixed 1</a></li>
<li><a href= ". /layouts/body2.html "title=" Cross browser fixed layout ">fixed 2</a></li>
<li><a href= ". /layouts/body4.html "title=" Cross browser fixed layout ">fixed 3</a></li>
<li><a href= ". /layouts/body5.html "title=" Cross browser fixed layout ">fixed 4</a></li>
<li><a href= ". /layouts/minimum.html "title=" A Simple minimum width layout ">minimum width</a></li>
</ul>
<!--[If LTE IE 6]>
</td></tr></table>
</a>
<! [endif]-->
</li>
<li><a class= "Hide" href= ". /boxes/index.html ">BOXES</a>
<!--[If LTE IE 6]>
<a href= ". /boxes/index.html ">boxes
<table><tr><td>
<! [endif]-->
<ul>
<li><a href= "spies.html" title= "a coded list of spies" >spies menu</a></li>
<li><a href= "vertical.html" title= "A horizontal vertical menu" >vertical menu</a></li>
<li><a href= "expand.html" title= "An enlarging unordered list" >enlarging
<li><a href= "enlarge.html" title= "a unordered list with link images" >link images</a></li>
<li><a href= "cross.html" title= "Non-rectangular links" >non-rectangular</a></li>
<li><a href= "jigsaw.html" title= "Jigsaw Links" >jigsaw
<li><a href= "circles.html" title= "Circular links" >circular
</ul>
<!--[If LTE IE 6]>
</td></tr></table>
</a>
<! [endif]-->
</li>
<li><a class= "Hide" href= ". /mozilla/index.html ">MOZILLA</a>
<!--[If LTE IE 6]>
<a href= ". /mozilla/index.html ">mozilla
<table><tr><td>
<! [endif]-->
<ul>
<li><a href= ". /mozilla/dropdown.html "title=" A drop down menu ">drop down menu</a></li>
<li><a href= ". /mozilla/cascade.html "title=" A cascading menu ">cascading menu</a></li>
<li><a href= ". /mozilla/content.html "title=" Using content: ">content:</a></li>
<li><a href= ". /mozilla/moxbox.html "title=": hover applied to a div ">mozzie box</a></li>
<li><a href= ". /mozilla/rainbow.html "title=" I can build a Rainbow ">rainbow box</a></li>
<li><a href= ". /mozilla/snooker.html "title=" snooker cue ">snooker cue</a></li>
<li><a href= ". /mozilla/target.html "title=" target practise ">target practise</a></li>
<li><a href= ". /mozilla/splittext.html "title=" Two tone headings ">two tone headings</a></li>
<li><a href= ". /mozilla/shadow_text.html "title=" shadow text ">shadow text</a></li>
</ul>
<!--[If LTE IE 6]>
</td></tr></table>
</a>
<! [endif]-->
</li>
<li><a class= "Hide" href= ". /ie/index.html ">EXPLORER</a>
<!--[If LTE IE 6]>
<a href= ". /ie/index.html ">explorer
<table><tr><td>
<! [endif]-->
<ul>
<li><a href= ". /ie/exampleone.html "title=" Example One ">example one</a></li>
<li><a href= ". /ie/weft.html "title=" weft fonts ">weft fonts</a></li>
<li><a href= ". /ie/exampletwo.html "title=" Vertical align ">vertical align</a></li>
</ul>
<!--[If LTE IE 6]>
</td></tr></table>
</a>
<! [endif]-->
</li>
</ul>
<div class= "Clear" > </div>
</div>
