I wonder if anyone around could possibly help me ease up my stress that I've been having for the past 2 days in sorting out the CSS Horizontal drop-down menu.
I've somehow managed to get the Vertical Pop-up menu along with its submenus ("leftMenu" in my code) but the Horizontal drop-down menu ("topMenu" in my code) seems to be proving a real pain in the neck.
I want it EXACTLY same as it can be seen in this website:
http://www.phoenity.com/newtedge/horizontal_nav/ ("Inline" version). I tried coping & paste the code, but sadly all in vain, since the problem I encounter is to "fit" it in the space for "topMenu" (red bordered-line area).
This website shows the use of <table> however, I'm not quite comfortable using it, since I didn't use it to create my left menu, so would like my top menu to be made more or less with the same sort of coding as the left Menu.
ANY HELP WOULD BE GREATLY APPRECIATED since I couldn't possibly go further without getting myself out of this misery first.
The result I've achieved so far is seen in the attached file.
Following are the codes from my 2 files i.e. style.css & home.html
STYLE.CSS
/* CSS Document */
<html>
<head>
<style type="text/css">
/* Div */
div
{
text-align:center;
}
/* ......................... Banner ........................ */
div.banner{width:100%; height:4em; background:url('glass_row.jpg');}
/* ......................... Top Menu ........................ */
#topMenu
{
border:1px solid red;
background-color:transparent;
width:90%;
height:30px;
float:right;
}
#topMenu ul
{
list-style-type: none;
display: inline;
}
#topMenu ul li
{
display: inline;
position: relative;
}
#topMenu ul a
{
color: blue;
font-weight:bold;
text-decoration: none;
display: inline;
}
#topMenu ul a:hover
{
position:inherit;
color:white;
text-decoration:none;
background-color:#0000FF;
}
#topMenu ul li ul
{
list-style: none;
position: absolute;
left: 60px;
top: 0;
display: none;
width: 125px;
}
#topMenu ul li:hover ul {display: block;}
body { behavior: url(csshover.htc); }
/* NOT USING CURRENTLY
a.topMenu:link{color:#000000;}
a.topMenu:visited{color:black;}
a.topMenu:hover{background-color:#FF0000;}
*/
/* ......................... Left Menu ........................ */
#leftMenu
{
background-color:transparent;
text-align:center;
width:10%;
height:20em;
float:left;
}
/* Code for Left Menu itself */
#leftMenu ul
{
display:block;
width:80px;
margin:10px 10px 10px 10px;
padding:0;
font-weight:bold;
list-style:none;
}
#leftMenu ul a
{
color: #FFF;
text-decoration: none;
display: block;
padding: 5px 5px 5px 10px;
width: 60px;
background: #333;
}
#leftMenu ul a:hover
{
color: #4BD8FF;
text-decoration: none;
background: #3C3C3C;
}
#leftMenu ul li
{
border-bottom: 1px solid #FFF;
float: left;
position: relative;
}
#leftMenu ul li ul
{
list-style: none;
position: absolute;
left: 60px;
top: 0;
display: none;
width: 125px;
border-left: 1px solid #FFF;
}
#leftMenu ul li:hover ul li ul { display: none; }
#leftMenu ul li:hover ul { display: block; }
body { behavior: url(csshover.htc); }
/* Fix IE. Hide from IE Mac \*/
* html #leftMenu ul li {float:left; height:1%;}
* html #leftMenu ul li a {height:1%;}
/* End */
a.leftMenu:link{color:#000000;}
a.leftMenu:visited{color:black;}
a.leftMenu:hover{background-color:#FF0000;}
/* ......................... Content ............................ */
div.content
{
background-color:yellow;
width:90%;
height:25em;
float:right;
}
/* ......................... Bottom Menu ............................ */
div.bottomMenu
{
background-color:green;
width:100%;
float:left;
height:5%;
}
</style>
</head>
<body>
/* Anchor */
/*
a:link {color:#FF0000; text-decoration:none}
a:visited {color:#FF00FF}
a:hover {color:#FFFF00; font-size: monospace}
a:active {color:#00FFFF}
*/
/* Paragraph */
p
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:medium;
font-weight:normal;
color:#0000FF;
}
/* Headings */
h1
{
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:bold;
color:#FF0000;
text-decoration:underline
}
/* Pseudo elements */
p.firstLetter:first-letter {color:#33CC00; font-size:150%}
p.firstLine:first-line {color:#00FF00}
</body>
</html>
HOME.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Alcohol - Main Page</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style type="text/css">
</style>
</head>
<body background="background_champagne.gif">
<div class="banner">
</div>
<div id="topMenu">
<ul>
<li><a href="">Beer</a>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li><a href="">Wine</a>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li><a href="">Whiskey</a>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li><a href="">Spirit</a>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
</ul>
</div>
<div id="leftMenu">
<ul>
<li><a href="">Beer</a>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li><a href="">Wine</a>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li><a href="">Whiskey</a>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li><a href="">Beer</a>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
</ul>
</div>
<div class="content">
Content
</div>
<div class="bottomMenu">
Bottom Menu
</div>
</body>
</html>