Below is the style to add style to the Unordered List shown in Example 1
The above menu uses the Suckerfish menu model developed by
Patrick Griffiths and Dan Webb.
It was developed in 2003, but is now one of the most widely used menus
on the web.
The Suckerfish menu model simply uses an on-mouse-over (hover)
event on a <li> tag to block/hide the inline elements.
It then uses an on mouse-out (hover) event to return to its original
'inline' display state.
In this model style is critical
The outside <ul> tag style removes margin, padding, list-style (bullets).
Each of the highest level <li> tags has a "position relative" and
"float left" attribute to change items to Horizontal.
The nested <UL> are hidden on load and the <li> are positioned 20
pixels below the <UL> tags.
The anchor/hyperlink <a> tags are modified to remove their underline,
and to show highlighting when the mouse hovers over them.
Each of the <a> tags now has the class "topMenu".
Notice, the code below produces the list at the top of the page. But!
the menu doesn't work unless you have a CSS Level 2 compliant browser.
The problem with the Suckerfish menu model is that it does not work with IE.
Internet Explorer does not follow the CSS Level 2 standard for the
hover pseudo-class.
Therefore, in order to have the menu work in the 80% of browsers that
use IE, it is necessary to add a small script to change the unrecognized
hover pseudo-class to a recognizable user defined class cover.
The next objective is to modify the code to work with non-CSS Level 2 browsers.
<html>
<head>
<title>menu</title>
<style type="text/css">
ul { /* Style for all <ul> tags */
margin: 0; /* margin removes indentation */
padding: 0; /* margin removes indentation (non-ie)*/
list-style: none; /* removes bullets (non-ie) */
background-color:Blue; /* Optional: remove for transparent effect */
}
li { /* Style for all <li> items */
float: left; /* changes items to Horizontal */
position: relative; /* keep the <li> from bunching to right */
width: 125px; /* this is the width of each menu item */
}
/* Selects for all <ul> elements somewhere inside a <li> element */
li ul { /* Style for second-level lists */
display: none; /* hidden on load */
position: absolute; /* keep location absolute*/
top: 20px; /* keep 20 px from top */
left: 0; /* removes indentation to left */
}
/* IE 6.0 and lower don't understand the CSS child selector ">" */
li>ul { /* NN/IE COMPATIBILITY FIX:*/
top: auto; /* to override top and left in browsers other */
left: auto; /* than IE,which will position to the top right */
} /* of the containing li, rather than bottom left */
/* BELOW IS THE MAGIC */
/* style for <ul> tag where pseudo-class is somewhere inside an <li> element */
/* This works in CSS Level 2 compliant browsers (non-IE) */
li:hover ul{ /* lists nested under hovered list items */
display: block; /* hidden on load (hover is CSS Level 2 only) */
}
/* style for <ul> tag where new class "cover" is attribute of <li> element */
/* This works in CSS Level 1 compliant browsers with the help of some javascript*/
li.cover ul { /* lists nested under hovered list items */
display: block; /* hidden by default */
}
/* Selects topMenu class somewhere inside an <a> element */
A.topMenu { /* Style for link tags */
text-decoration:none; /* no underline */
color:white; /* text color */
}/* modification for hover event */
A.topMenu:hover { /* Style for link tags */
background-color:orange; /* background color */
color:green; /* text color */
}
</style>
</head>
<body>
<ul>
<li>First
<ul>
<li><a href="#" class="topMenu">aaaaaaaa</a></li>
<li><a href="#" class="topMenu">bbbbbbbb</a></li>
<li><a href="#" class="topMenu">cccccccc</a></li>
<li><a href="#" class="topMenu">dddddddd</a></li>
</ul>
</li>
<li>Second
<ul>
<li><a href="" class="topMenu">eeeeeeee</a></li>
<li><a href="" class="topMenu">ffffffff</a></li>
<li><a href="" class="topMenu">gggggggg</a></li>
</ul>
</li>
<li>Third
<ul>
<li><a href="" class="topMenu">hhhhhhhh</a></li>
<li><a href="" class="topMenu">iiiiiiii</a></li>
<li><a href="" class="topMenu">jjjjjjjj</a></li>
<li><a href="" class="topMenu">kkkkkkkk</a></li>
<li><a href="" class="topMenu">llllllll</a></li>
</ul>
</li>
</ul>
<div>
<p>
content here...
</p>
</div>
</body>
</html>