PDA

View Full Version : Pasting Script for Horizontal Menu with Horizontal Submenus in doc



NewWebDesigner
Oct 16th, 2008, 11:11 PM
Hi

I have been working on getting navigation for my website to work. The client decided they wanted horizontal menu with a horizontal submenu like at&t wireless. I have been searching google and the web to see how to do this. I am working with Dreamweaver cs3, I know very little coding and by little I mean little. I found this one thread http://www.webmasterworld.com/css/3681555.htmand I got to look the way I want to by using the suggestion and editing the code. But how do I place this into my existing flie? Or is this not the best way to do a horizontal menu with a horizontal submenu? Any suggestions would be a large help. Thanks in adavance!

Also I am not sure if this makes a difference but I want it in a ap div tag to show up over a image in another ap dive tag.

Here is the code that I want placed into my existing html doc.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Dropdown Menu</title>

<style type="text/css">
/*START OF TOP DROP DOWN navigation MENU*/
* {
margin:0;
padding:0;
}

body {
font-size:100%;
}

.wrapper {
height:1.4em;
width:100%;
border-bottom:1.4em white;
}
/*########################
START First Level of Menu
*/
#nav {
margin:0 auto;
text-align:left;
list-style: none;
width:auto;
font-size: 0.8em;
font-family:Arial, Helvetica, sans-serif;
}

#nav li {
float: left;
background-color: transparent;
padding: 0px 5px 0px 5px;
width:auto;
border-right-style: solid;
border-right-color: #365794;
border-right-width: 1px;
}
#nav li:hover, #nav li.sfhover, #navsmall li:hover {
color:#000;
}

#nav a {
color:#FFFFFF;
display: block;
text-align:left;
text-decoration: none;
padding: 0.2em 0;
}

#nav a:focus,#nav a:hover,#nav a:active {
width:auto;
color:#929871;
}
/*
END First Level of Menu
#######################*/

/*########################
START Second Level of Menu
*/
#nav ul{
list-style: none;
position: absolute;
left: -999em;
}

#nav li:hover ul {
position: absolute;
left:0;
top:auto;
margin-left:50px;
}

#nav ul li {
background: white;
}

#nav li li {
float:left;
width:auto;
border-right-color: #2D487B;
border-right-style: solid;
border-right-width: 1px;
}

#nav li ul li a {
color:#20345A;
text-align:center;
text-decoration:none;
padding: 0.2em 0;
}

#nav li li:hover {
border:0;
border-right-style: solid;
border-right-color: #2D487B;
border-right-width: 1px;
}

#nav li ul a:hover{
text-decoration:underline;
color:#000;
}
.twoline, .twoline a {
width:300px !important;
}
.first {
background:transparent !important;
}
.last {
background:transparent !important;
}

/*END OF TOP DROP DOWN navigation MENU*/
</style>

</head>

<body>
<div class="wrapper">
<ul id="nav">
<li class="first"><a href="#">Home</a>
</li>
<li><a href="#">About Us</a></li>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
<li><a href="#">Item 1.4</a></li>
<li><a href="#">Item 1.5</a></li>
</ul>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Item 2.1</a> </li>
<li><a href="#">Item 2.2</a></li>
<li><a href="#">Item 2.3</a></li>
</ul>
<li><a href="#">Partnership Progam</a></li>
<ul>
<li><a href="#">Item 3.1</a> </li>
<li><a href="#">Item 3.2</a></li>
</ul>
<li><a href="#">Customer Support</a></li>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
<li><a href="#">Item 1.4</a></li>
<li><a href="#">Item 1.5</a></li>
<li><a href="#">Item 1.6</a></li>
</ul>
<li class="last"><a href="#">Contact Us</a></li>
</ul>
</div>
</body>

</html>

NewWebDesigner
Oct 16th, 2008, 11:50 PM
Anyone, please help I really need this completed ASAP and I am completely stumped!!!