•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 391,902 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,591 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 7011 | Replies: 0 | Solved
 |
•
•
Join Date: Jan 2006
Location: Land of Hope & Glory
Posts: 88
Reputation: 
Rep Power: 3
Solved Threads: 0
Junior Poster in Training
CSS Horizontal Drop-down Menu ??? 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>
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>
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
Linear Mode
- Create a cross-browser compatible, single-level, drop-down menu (Web Design Tutorials)
- DHTML & Javascript menu - trouble with z-index (JavaScript / DHTML / AJAX)
- opera problems with hover menu (JavaScript / DHTML / AJAX)
- CSS browser compatibility ??? (HTML and CSS)
- daniweb on my start menu (Windows NT / 2000 / XP / 2003)
- For some reason program installations cannot create new start menu shortcuts... (Windows NT / 2000 / XP / 2003)
- Safe Menu's ? (HTML and CSS)
- Help with dynamic menu (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: CSS Layout Coding ???
- Next Thread: CSS compatibility and Menu appearance ???
