I need help changing a drop down menu on a template
Hi there
ive been using dreamwearver on and of for a few years now and just about get by, ive just bought a web site template and although ive managed to ajust most things,
the template had a drop down menu using CSS currently on the "about us" option a sub menu drops down, ive worked out how to add to this menu and change the words
but what i cant do is have this same drop down menu on another part or the menu system for example i would like another drop down menu on the "our menu" part
any help would be much appreciated
below is the source code
ive got some js codes to but im not sure if the menu system uses them
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/ui.totop.css" type="text/css" media="screen">
<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
<script src="js/superfish.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<script src="js/jquery.hoverIntent.js" type="text/javascript"></script>
<script src="js/tms-0.3.js" type="text/javascript"></script>
<script src="js/tms_presets.js" type="text/javascript"></script>
<script src="js/jquery.ui.totop.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_b annercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
</head>
<body id="page1">
<!--=========================================header======================================= ======-->
<header>
<div class="bg-1">
<div class="main">
<div class="container_24">
<div class="wrapper">
<article class="grid_24">
<h1><a href="index.html">Alexander</a></h1>
</article>
</div>
<article class="grid_24">
<nav>
<ul class="menu">
<li><a class="active" href="index.html">home<span></span></a></li>
<li><a href="menu.html">our menu<span></span></a></li>
<li><a href="about us.html">about us<span></span></a>
<ul>
<li><a href="#">history</a></li>
<li><a href="#">gallery</a>
<li><a href="#">weddings</a></li>
</ul>
</li>
<li><a href="reservation.html">Reservation<span></span></a></li>
<li><a href="contact us.html">contacts<span></span></a></li>
</ul>
<div class="clear"></div>
</nav>
<div class="clear"></div>
<div class="wrapper">
<div class="col-1 bg-2">
<div>
<h3>WELCOME TO<span>BALOOS</span></h3>
</div>
<div>
<div class="color-1">
<p>Situated in Henfield, Baloos is the creation of chef and restaurateur Chris and Amanda. Chris’ passion for food using the freshest, local and seasonal produce combined with Amanda’s friendly front-of-house charm and personal touch to make Baloos the perfect spot for lunch or evening meal. </p>
</div>
<a href="#" class="button-1"><span>read more</span></a>
</div>
</div>
<div class="col-2">
<div class="slider_bg">
<div class="slider">
<ul class="items">
<li><img src="images/slider_1.jpg" alt=""></li>
<li><img src="images/slider_2.jpg" alt=""></li>
<li><img src="images/slider_3.jpg" alt=""></li>
<li><img src="images/slider_4.jpg" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
</article>
<div class="clear"></div>
</div>
</div>
</div>
</header>
<!--==============================content================================-->
<section id="content">
<div class="bg-3">
<div class="bg-4">
<div class="main">
<div class="container_24">
<div class="wrapper">
<article class="grid_24">
<div class="wrapper border-1 margin-bot3">
<article class="grid_6 suffix_2 alpha">
<h4 class="indent-top margin-bot1">restaurant hours</h4>
<div class="color-3 lh-1 border-2">
<strong class="title-3 d-block margin-bot2">Bar </strong>
11:30-8:30 Sunday-Thursday<br>
11:30-9:00 Friday and Saturday
</div>
<div class="color-3 lh-1 border-2">
<strong class="title-3 d-block margin-bot2">Lunch</strong>
Tue.-Sat. 12:00-2pm<br>
No Lunch on Sunday
</div>
<div class="color-3 lh-1">
<strong class="title-3 d-block margin-bot2">Dinner</strong>
Tuesday-Saturday 6:00- 9:30<br>
Sunday 12:30-4pm
</div>
</article>
<article class="grid_16 omega indent-top1">
<div class="wrapper">
<figure class="img-indent-l">
<img src="images/page1_img1.jpg" alt="">
</figure>
<div class="extra-wrap">
<div class="title-1"> Welcome!</div>
<div class="color-4 lh"><span class="color-3">Moleacene anrit ma hasese rayuaumso natoqu eagnis</span><br>
dist mte dulmuese feugiata lesua kery ecencies phaledaty
fenanec sit amm easer ermeolor dapegetele mentum.
Baelursus eleifneanctor wisi et urna. Aliquam eravolutpatis
turpisntey yoleacene anritserauas ty miwert betyudes.</div>
<div class="title-2">chef</div>
<figure class="sign">
<img src="images/page1_img2.png" alt="">
</figure>
</div>
</div>
</article>
</div>
<div class="wrapper border-1 indent-top">
<article class="grid_7 suffix_1 alpha">
<h4 class="margin-bot4">about BALOOS</h4>
<strong class="color-3 size-1 reg">Moleacene anrit maha deyuas</strong>
<div class="margin-bot">Cum socis natoqu eagn dist mte dulm uese feugiata lesu kery lecenas stricies phaledatyfec sim easer erment.</div>
<a href="#" class="button-2"><span>read more</span></a>
</article>
<article class="grid_16 omega">
<h4 class="margin-bot"> OUR RECOMENDED dishes of the MONTH</h4>
<div class="wrapper margin-bot3">
<article class="grid_8 alpha">
<div class="wrapper">
<figure class="img-indent-2">
<img src="images/page1_img3.jpg" alt="">
</figure>
<div class="extra-wrap indent-top2">
<a href="#" class="color-6 link2">Grilled Fish</a><br>
kery lecenas stricies phaledatyfenanec sit amm easer erment. Ut ts dolor dapege telementum.
</div>
</div>
</article>
<article class="grid_8 omega">
<div class="wrapper">
<figure class="img-indent-2">
<img src="images/page1_img4.jpg" alt="">
</figure>
<div class="extra-wrap indent-top2">
<a href="#" class="color-6 link2">Chicken Quesadilla</a><br>
lesuada kercenas stricies phatyfenanec sit amm easer rment. Ut ts dolor dapege telementum.
</div>
</div>
</article>
</div>
<a href="#" class="button-3"><span>view all recipes</span></a>
</article>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==============================footer================================-->
<footer>
<div class="main">
<div class="container_24">
<div class="wrapper indent-bottom">
<article class="grid_14">
<nav>
<ul class="menu2">
<li><a class="active" href="index.html">home</a></li>
<li><a href="menu.html">our menu</a></li>
<li><a href="about us.html">about us</a></li>
<li><a href="reservation.html">Reservation</a></li>
<li><a href="contact us.html">contacts</a></li>
</ul>
</nav>
</article>
<article class="grid_10">
<div class="indent-top3">
<div class="border-3 prefix_1">
<div class="title-4">Find Us On Social Network:</div>
<p class="p0 size-2 color-7">Bayarsety kertya aset aplicaboes kerasaer </p>
<ul class="soc_list">
<li><a href="#"><img src="images/soc_1.png" alt=""></a></li>
<li><a href="#"><img src="images/soc_2.png" alt=""></a></li>
<li><a href="#"><img src="images/soc_3.png" alt=""></a></li>
<li><a href="#"><img src="images/soc_4.png" alt=""></a></li>
<li><a href="#"><img src="images/soc_5.png" alt=""></a></li>
</ul>
</div>
</div>
</article>
</div>
<div class="wrapper border-4">
<article class="grid_24 aligncenter down">
BALOOS © 2013 • <a href="Privacy.html" class="link2">Privacy policy</a> •
<span class="d-block"><!--{%FOOTER_LINK} --></span>
</article>
</div>
</div>
</div>
</footer>
<script type="text/javascript">
$(window).load(function(){
$('.slider')._TMS({
duration:800,
preset:'simpleFade',
pagination:true,//'.pagination',true,'<ul></ul>'
pagNums:false,
slideshow:7000,
</script>
</body>
</html>
HERE IS THE CCS CODE
@import url(http://fonts.googleapis.com/css?family=Amethysta);
@import url(http://fonts.googleapis.com/css?family=Mr+De+Haviland);
@import url(http://fonts.googleapis.com/css?family=Mr+Dafoe);
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}
/* Global properties ======================================================== */
html {width:100%;}
html, body {height:100%;}
body {
font-family:Arial, Helvetica, sans-serif;
color:#666666;
min-width:960px;
background:#efefef;
font-size:14px;
line-height:22px;
.main {
width:960px;
padding:0;
margin:0 auto;
position:relative;
a {color:#666666; outline:none; text-decoration:none;}
a:hover {text-decoration:none;}
.link {text-decoration:underline;}
.link2:hover {text-decoration:underline;}
.wrapper {width:100%; overflow:hidden;}
.extra-wrap {overflow:hidden;}
p {margin-bottom:22px;}
.p0 {margin-bottom:0;}
.p1 {margin-bottom:0;}
.d-in-block {display:inline-block;}
.d-block {display:block;}
.reg {text-transform:uppercase;}
.rel {position:relative;}
.fleft {float:left;}
.fright {float:right;}
.alignright {text-align:right;}
.aligncenter {text-align:center;}
.img-indent-l {float:left; margin:0px 39px 0px 0px;}
.img-indent-2 {float:left; margin:0px 32px 0px 0px;}
.img-indent-3 {float:left; margin:6px 32px 0px 0px;}
/*********************************boxes**********************************/
.indent {padding:0;}
.indent-left {padding-left:0;}
.indent-bottom {padding-bottom:25px;}
.indent-right {padding-right:0;}
.indent-top {padding-top:39px;}
.indent-top1 {padding-top:37px;}
.indent-top2 {padding-top:6px;}
.indent-top3 {padding-top:29px;}
.indent-top4 {padding-top:40px;}
.indent-top5 {padding-top:8px;}
.margin-top { margin-top:0;}
.margin-bot {margin-bottom:33px;}
.margin-bot1 {margin-bottom:26px;}
.margin-bot2 {margin-bottom:9px;}
.margin-bot3 {margin-bottom:29px;}
.margin-bot4 {margin-bottom:23px;}
.margin-bot5 {margin-bottom:19px;}
.margin-bot6 {margin-bottom:11px;}
.margin-bot7 {margin-bottom:42px;}
.margin-left {margin-left:0;}
.margin-right {margin-right:20px;}
.margin-right1 {margin-right:30px;}
/*********************************header*************************************/
header {
width:100%;
background:url(../images/header.jpg) center top no-repeat #282829;
h1 {
padding:32px 0 23px 299px;
h1 a {
display:block;
text-indent:-9999px;
background:url(../images/logo.png) no-repeat 0 0;
width:316px;
height:86px;
/***** menu *****/
header nav {
float:left;
background:url(../images/menu_r.png) right 38px no-repeat;
width:100%;
.menu {
float:left;
padding:9px 0 8px 84px;
position:relative;
z-index:20;
font-family: 'Amethysta', serif;
background:url(../images/menu_l.png) left 38px no-repeat;
.menu li {
float:left;
position:relative;
background:url(../images/menu2.png) left top no-repeat;
padding:27px 45px 24px 42px;
.menu li:first-child {
background:none;
padding-left:0;
.menu li a {
display:block;
font-size:16px;
line-height:20px;
color:#dbdada;
text-transform:uppercase;
z-index:20;
.menu li a span {
display:block;
width:18px;
height:9px;
background:url(../images/sub.png) left top no-repeat;
position:absolute;
top:-999px;
left:50%;
margin-left:-9px;
.menu li:first-child a span {
margin-left:-33px;
.menu li.sfHover {
position:relative;
z-index:10;
.menu li a.active span,
.menu > li > a:hover span,
.menu > li.sfHover > a span {
top:-9px;
.menu ul {
z-index:20;
letter-spacing:normal;
position: absolute;
top: -9999em;
width: 100px;
background:url(../images/menu4.gif) left top repeat;
border: none;
box-shadow:5px 5px 5px rgba(0,0,0, .26);
padding:6px 20px 10px;
.menu ul ul {
background-image:url(../images/menu5.gif);
.menu ul li {width: 100%;}
.menu li:hover {visibility: inherit; }
.menu li li {
margin:0;
border:none;
padding:9px 0 6px 0;
background:url(../images/menu6.png) left top repeat-x;
.menu li li li {
background-image:url(../images/menu7.png);
.menu li li:first-child {
background:none;
.menu li li a {
background:none;
display: block;
padding: 0 0 0 6px;
font-size: 14px;
line-height: 17px;
color: #fff;
.menu li li > a:hover,
.menu li li.sfHover > a {
color:#b16167;
.menu li:hover ul, .menu li.sfHover ul {
left: 22px;
top: 79px;
z-index: 999;
ul.menu li:hover li ul, ul.menu li.sfHover li ul {
top: -999em;
ul.menu li li:hover ul, ul.menu li li.sfHover ul {
left: 100px;
top: -6px;
z-index: 99;
ul.menu li li:hover li ul, ul.menu li li.sfHover li ul {
top: -999em;
/*********************************content*************************************/
#content {
width:100%;
background:url(../images/bg-1.jpg) center -464px no-repeat #020202;
padding:0;
#page1 #content {
margin-top:-194px;
.col-1 {
float:left;
width:360px;
.col-2 {
float:left;
width:590px;
.col-3 {
float:left;
width:300px;
.col-4 {
float:left;
width:280px;
.sign {
text-align:right;
padding:10px 40px 0 0;
.letter {
text-align:center;
font-family: 'Mr Dafoe', cursive;
font-size:70px;
line-height:84px;
color:#cbcbcb;
float:left;
width:60px;
margin-right:15px;
/******************* slider *************/
.slider_bg {
background:url(../images/slider_bg.jpg) left top no-repeat;
overflow:hidden;
width:590px;
height:429px;
overflow:hidden;
.slider {
width:534px;
height:429px;
position:relative;
background:url(../images/preloader.png) center center no-repeat;
.pagination {
position:absolute;
right:-37px;
top:21px;
overflow:hidden;
z-index:999;
.pagination li {
margin-top:3px
.pagination li:first-child {
margin-top:0;
.pagination li a {
display:block;
width:15px;
height:15px;
background:url(../images/pag_nav.png) left bottom no-repeat;
.pagination li a:hover,
.pagination .current a {
background-position:left top;
.pagination .current a {
cursor:default;
.items {display:none;}
/******************* slideshow *************/
#slideshow {
width:620px;
height:705px;
overflow:hidden;
background:none !important;
#slideshow>div {
width:620px;
height:705px;
background:none !important;
#prev {
float:left;
#next {
float:left;
#nav {
overflow:hidden;
padding:0px 15px 0;
float:right;
#nav li {
float:left;
font-size:13px;
line-height:16px;
text-align:center;
margin-left:1px;
display:block !important;
#nav li:first-child {
margin-left:0;
#nav li a {
color:#666666;
display:block;
width:14px;
height:16px;
overflow:hidden;
#nav .activeSlide a,
#nav li a:hover {
color:#fff;
.nav_wrap {
overflow:hidden;
position:absolute;
width:200px;
height:30px;
right:97px;
top:-33px;
#next,
#prev {
text-indent:-9999px;
float:right;
overflow:hidden;
display:block;
width:10px;
height:18px;
#next {
background:url(../images/next.png) left top no-repeat;
#prev {
background:url(../images/prev.png) left top no-repeat;
#next:hover ,
#prev:hover {
background-position:right top;
/*********************************bg's*************************************/
.bg-1 {
background:url(../images/light.png) center top no-repeat;
.bg-2 {
background:url(../images/bg-2.jpg) left top no-repeat;
height:429px;
overflow:hidden;
text-align:center;
.bg-2>div {
padding:80px 15px 0 0;
.bg-2>div+div {
font-size:13px;
line-height:20px;
padding:27px 45px 0 50px;
.bg-3 {
background:url(../images/bg-4.png) left top repeat-x;
.bg-4 {
background:url(../images/bg-5.png) left bottom repeat-x;
padding:70px 0 35px;
#page1 .bg-4 {
padding:225px 0 35px;
.bg-5 {
background:url(../images/bg-7.png) center top no-repeat;
.bg-6 {
background:url(../images/bg-8.gif) center top repeat-x;
.border-1 {
background:url(../images/border-1.png) left top repeat-x;
.border-2 {
border-bottom:1px dotted #313131;
padding:0 0 18px;
margin:0 0 15px;
#page3 .border-2 {
padding:0 0 23px;
margin:0 0 14px;
#page4 .border-2 {
padding:0 0 35px;
margin:0 0 37px;
.border-3 {
background:url(../images/border-2.png) left top repeat-y;
padding:5px 0 4px;
.border-4 {
background:url(../images/border-3.png) left top repeat-x;
/*********************************buttons*************************************/
.button-1 {
display:inline-block;
font-size:18px;
line-height:22px;
color:#f9dfdf;
font-family: 'Amethysta', serif;
text-transform:uppercase;
background:url(../images/button1_l.png) left 5px no-repeat;
padding:0 0 0 23px;
.button-1 span {
display:block;
background:url(../images/button1_r.png) right 5px no-repeat;
padding:0 29px 0 4px;
.button-1:hover {
color:#1d1d1d;
.button-2 {
display:inline-block;
text-transform:uppercase;
font-family: 'Amethysta', serif;
font-size:14px;
line-height:17px;
color:#fff;
background:url(../images/button-2.gif) left bottom repeat-x;
height:41px;
overflow:hidden;
border:1px solid #343434;
.button-2 span {
display:block;
padding:13px 16px 11px 14px;
.button-2:hover {
background-position:left top;
.button-3 {
text-align:right;
text-transform:uppercase;
display:block;
background:url(../images/button-2.gif) left bottom repeat-x;
height:41px;
border:1px solid #323232;
font-size:16px;
line-height:20px;
color:#bfbfbf;
font-family: 'Amethysta', serif;
.button-3:hover {
background-position:left top;
.button-3 span {
background:url(../images/marker-1.png) left 11px no-repeat;
display:inline-block;
padding:11px 19px 0 18px;
/*********************************lists*************************************/
.dl-1 dt {
color:#fff;
.dl-1 dd {
overflow:hidden;
.dl-1 dd span {
display:block;
float:left;
width:100px;
.soc_list {
overflow:hidden;
padding:19px 0 0;
.soc_list li {
float:left;
margin-left:10px;
.soc_list li:first-child {
margin-left:0;
.soc_list li a {
display:block;
width:32px;
height:32px;
.ul-1 li {
font-size:14px;
line-height:20px;
font-family:Arial, Helvetica, sans-serif;
.ul-1 li a {
color:#b7b7b7;
.ul-1 li a:hover {
color:#fff;
/*********************************fonts*************************************/
h3 {
font-size:28px;
line-height:34px;
color:#fbecec;
font-family: 'Amethysta', serif;
font-weight:normal;
text-transform:uppercase;
background:url(../images/bg-3.png) left bottom no-repeat;
padding:0 0 33px 0;
h3 span {
display:block;
margin-top:-5px;
color:#f7d3d3;
h4 {
font-size:16px;
line-height:20px;
color:#dbdada;
font-family:'Amethysta', serif;
font-weight:normal;
text-transform:uppercase;
.title-1 {
color:#a0a0a0;
font-family:'Mr De Haviland', cursive;
font-size:72px;
line-height:87px;
margin:-8px 0 15px 0;
padding-left:5px;
.title-2 {
text-align:right;
padding:12px 90px 0 0;
color:#dddcdc;
font-family:'Amethysta', serif;
font-size:18px;
line-height:22px;
text-transform:uppercase;
.title-3 {
font-size:13px;
line-height:18px;
color:#fff;
.title-4 {
color:#464646;
font-family:'Amethysta', serif;
font-size:18px;
line-height:22px;
text-transform:uppercase;
margin-bottom:3px;
.lh {
line-height:23px;
.lh-1 {
line-height:20px;
.size-1 {
font-size:13px;
display:block;
.size-2 {
font-size:11px;
line-height:14px;
.color-1 {color:#e4d0d1;}
.color-2 {color:#dcb0b1;}
.color-3 {color:#b7b7b7;}
.color-4 {color:#7e7e7e;}
.color-5 {color:#b2b2b2;}
.color-6 {color:#fff;}
.color-7 {color:#919191;}
/******* form's ********/
/***** contact form *****/
#form1 fieldset {
border:none;
padding:0;
#form1 label {
display:block;
min-height:57px;
#form1 label.message {
height:232px;
.inp {
display:block;
width:320px;
height:40px;
padding:0 14px;
background:url(../images/inp-1.png) left top repeat;
overflow:hidden;
position:relative;
border:1px solid #343434
#form1 input {
width:320px;
padding:12px 0 12px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
height:16px;
color:#666;
border:none;
background:none;
outline:none;
#form1 .area .error { float:none;}
.text_a {
position:relative;
overflow:hidden;
display:block;
width:478px;
height:230px;
padding:0 14px;
background:url(../images/inp-1.png) left top repeat;
border:1px solid #343434
#form1 textarea {
height:216px;
margin:0;
width:478px;
padding:12px 0;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#666;
border:none;
background:none;
overflow:auto;
outline:none;
resize:none;
#form1 a {cursor:pointer;}
#form1 .success {display:none; margin-bottom:10px;}
#form1 .error,
#form1 .empty {
color:#f00;
font-size:11px;
line-height:18px;
display:none;
overflow:hidden;
#form1 .buttons-wrapper {text-align:right; padding-top:40px; position:relative;}
#form1 .buttons-wrapper a { margin-left:30px;}
#form2 fieldset {
border:none;
padding:0;
#form2 label {
display:block;
min-height:57px;
#form2 label.message {
height:232px;
.inp2 {
display:block;
width:318px;
height:40px;
padding:0 14px;
background:url(../images/inp-1.png) left top repeat;
overflow:hidden;
position:relative;
border:1px solid #343434
#form2 input {
width:318px;
padding:12px 0 12px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
height:16px;
color:#666;
border:none;
background:none;
outline:none;
#form2 .area .error { float:none;}
.text_a2 {
position:relative;
overflow:hidden;
display:block;
width:318px;
height:230px;
padding:0 14px;
background:url(../images/inp-1.png) left top repeat;
border:1px solid #343434
#form2 textarea {
height:206px;
margin:0;
width:318px;
padding:12px 0;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#666;
border:none;
background:none;
overflow:auto;
outline:none;
resize:none;
#form2 a {cursor:pointer;}
#form2 .success {display:none; margin-bottom:10px;}
#form2 .error,
#form2 .empty {
color:#f00;
font-size:11px;
line-height:18px;
display:none;
overflow:hidden;
#form2 .buttons-wrapper {text-align:right; padding-top:40px; position:relative;}
#form2 .buttons-wrapper a { margin-left:30px;}
.map {
width:350px;
height:365px;
margin:0 0 26px;
/*******
Hi -
While I am not familiar with the use of all the span tags I see,
You said "currently on the "about us" option a sub menu drops down, ive worked out how to add to this menu and change the words"
What is the problem doing the same thing under the other top level item?
Similar Messages
-
Need help formatting Spry drop down menu
FYI, I'm using CS3 on a Mac.
I'm working on a full CSS layout of a page in a site. OK, not
full CSS, I have a table controlling the text in the main content
area. I need a drop down menu for this page, so I inserted a spry
menu bar for the page navigation. *phew*! The learning curve on
that is killing me! :) Just trying to get the menu items spread out
("full justify") has take me forever. I'm still having some major
issues.
Can someone tell me which styles to adjust to fix the things
below? I think I have fixed most of it, but can't figure out these
items:
1. I want the sub menu items to have normal font weight (but
the main menu items should remain "bold"
2. I want the sub menu items' background to extend at least
past the end of the item. With some of the longer items, the
background is cut off.
3. I want the border back around the sub menu items. It was
there originally, but I some how removed it and can't get it back.
I don't want a border around the main menu items.
4.
Most importantly! The sub menu items don't line up
vertically in IE on my PC. They fall into several horizontal rows
that run off the side of the page - almost impossible to use!
5. Oh, and I almost forgot, the submenu is now showing up all
the way on the left side of the page. It should be directly below
the "Participating Farms" link.
This is the page:
http://www.nectfarmersmarket.org/farmse.html
Thank you!Can anyone tell me if this is the right place for this
thread?
Thanks, -
Need help please with drop down menu
AS2 I created a drop down menu for my portfolio. my setup is my site mc, within that mc it my portfolio and the drop down menu with five buttons. I want to link on of those button not to the root, but in the same area as the drop down menu/ this is how it is set up.
sceen1 and inside sceen1 is navebar with the drop down menu. Inside the menu are my buttons. I dont need it to link at the root(sceen1) I need to link one of the buttons to a frame in the navbar area. Sorry and I hope you can understand what I wrote.What code have you tried? Where do you have the code planted? If you plant all of the code in one place, such as the main timeline then it might be easier for you to manage targeting whichever objects you intend to.
-
Need help with javascript drop down menu
Hi,
I inherited a website that was already created. I do not know
what version of dreamweaver they created it in but I have
Dreamweaver MX 2004. I am trying to make changes to the drop down
menus. I have figured most everything else out about dreamweaver
but cant figure out how these menu's are made or can be modified. I
have gone into the main template and clicked on the menu section I
want to modify. All it shows it a link to javascript:; I have
searched everywhere for what this means or how to modify it but
can't find anything. Can someone tell me how to get to this info so
I can make changes. Thanks. My website is www.pfcal.org if that
helps.Oh boy. Templates are not for uploading. They have no effect
on the
server. They only change local files which must then be
uploaded to the
server. But - I'm troubled by this comment -
> It didnt give me an option to "save" though
When you made the changes did the template page get marked as
"dirty" (with
an asterisk beside the name)? Which DW are you using?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"sjg23" <[email protected]> wrote in message
news:[email protected]...
> Ok. thanks. I did that but nothing changed. Here is what
I have now:
>
> <div id="MMMenuContainer1112210633_0">
> <div id="MMMenu1112210633_0"
onmouseout="MM_menuStartTimeout(100);"
> onmouseover="MM_menuResetTimeout();">
> <a href="../message_director.cfm"
id="MMMenu1112210633_0_Item_0"
> class="MMMIFVStyleMMMenu1112210633_0"
>
onmouseover="MM_menuOverMenuItem('MMMenu1112210633_0');">
> Director's Message
> </a>
> <a href="../mission.cfm"
id="MMMenu1112210633_0_Item_1"
> class="MMMIVStyleMMMenu1112210633_0"
>
onmouseover="MM_menuOverMenuItem('MMMenu1112210633_0');">
> Our Mission
> </a>
> <a href="../history.cfm"
id="MMMenu1112210633_0_Item_2"
> class="MMMIVStyleMMMenu1112210633_0"
>
onmouseover="MM_menuOverMenuItem('MMMenu1112210633_0');">
> Our History
> </a>
> <a href="../leadership_transiton.cfm"
id="MMMenu1112210633_0_Item_3"
> class="MMMIVStyleMMMenu1112210633_0"
>
onmouseover="MM_menuOverMenuItem('MMMenu1112210633_0');">
> Leadership Transition
> </a>
> <a href="../pcl_organized.cfm"
id="MMMenu1112210633_0_Item_4"
> class="MMMIVStyleMMMenu1112210633_0"
>
onmouseover="MM_menuOverMenuItem('MMMenu1112210633_0');">
> How PCL is Organized
> </a>
> <a href="../board_directors.cfm"
id="MMMenu1112210633_0_Item_5"
> class="MMMIVStyleMMMenu1112210633_0"
>
onmouseover="MM_menuOverMenuItem('MMMenu1112210633_0');">
>
Board of Directors and Officers
> </a>
> <a href="VideoNGO.cfm" id="MMMenu1112210633_0_Item_6"
> class="MMMIVStyleMMMenu1112210633_0"
>
onmouseover="MM_menuOverMenuItem('MMMenu1112210633_0');">
> See our promotional video</a>
>
> </div>
> </div>
>
> I made this change in the html code of the page
"main.dwt" which is my
> main
> template. It didnt give me an option to "save" though so
it's like it
> doesnt
> recognize that I changed anything. I saved it anyway and
uploaded but no
> change
> on the web.
> -
Need Help with Spry Drop Down Menu
Greetings,
I'm a Dreamweaver beginner, and I'm currently working on a
redesign of our corporate website, and I would really like to
incorporate a drop down navigation system. So far, I've gotten
close to what I would like to have, except there are a few items I
just can't figure out. Here's what I have so far:
Click
Here
As you can see, whenever you hover over one of the links, a
sub menu appears. This is great and everything, except I would
really like to make two minor adjustments:
1) I would like to decrease the line-spacing between the main
menu and the submenus.
2) I would like to change the font color of the sub-menu for
better readability.
I created this menu using Dreamweaver's Spry Menu feature. To
get the desired results so far, I simply played around with the CSS
file. The only two things I can't figure out are the above. I tried
to change the font color of the submenus in the CSS file, but there
is no tag that allows you to do this. I found a "Help" document on
repositioning the location of the submenus but every time I try, I
don't get any noticeable results.
Any ideas on how to pull off what I'm looking to do? Any
replies would be greatly appreciated. Thanks!Bump
-
Need help placing my drop down menu from flash into Dreamweaver
I had this working once. I am ping one you smart ones can help me out wuth this. WHat am I doing wrong?
I have not used any CSS to code my website, have purely used tables in a html template.
Sorry to say, but you can't make drop-down menus without CSS code. Which begs the broader question, why are you afraid of learning CSS? It's much more efficient than tables and you can do so much more creative stuff with it.
Pure CSS Drop-Menus (with CSS gradients and transitions)
http://jsfiddle.net/NancyO/zN7fU/
Nancy O. -
Need help with a drop down menu from flash to Dreamweaver.
I had this working once. I am ping one you smart ones can help me out wuth this. WHat am I doing wrong?
Can you please give us a little more informationm about how it isn't working?
-
How can you change a drop down menu's selection in a case statement?
Hi,
I am trying to an array finding vi. This VI will take an existing xml file and after the user has selected his/her equipment, input, output, and frequency it will put all of those options into a string and search the xml file for that exact array name and display it on an output screen. The problem I am having is that my input and outputs selection needs to be a little different depending upon the equipment selected. I thought that I could use a case statement to change the input and output selectable options, but I have run into many snags with it. For one everytime I place a new Input and Output drop down menu in the case statement it wants to place a new one in the front panel (I only want one input and output not three I have two inputs and outputs hidden right now). I believe I am using the case statement wrong... Can anyone help change my input and output selectable options depending upon the equipment selected. Attached is my xml file, Array Find.vi (the original one), and Array Find_Test.vi (this is the one I am trying to modify).
Thanks,
dlovell
Solved!
Go to Solution.
Attachments:
Find Array.zip 126 KBHi dlovell,
There are 2 key things I'd recommend for the code - using property nodes to edit the strings in the combo boxes. Something like the following snippet:
Also, check your CPU in task manager when running the code. It will eat a whole core of your machine (25% quad core, 50% dual, 100% single) - that is because you are running the while loop and polling the control as fast as Windows will allow you to. Using Event Structures is a much more efficient way of working in this example.
Check out the MOD attached
Regards,
Peter D
Attachments:
MOD_Find Array.vi 28 KB -
I'm new to AS3, this script is from an xml drop down menu. I
need to change all the font to " Gil Sans Lite: I looked down the
string and only see a place to change fonts twice which I did. But
the original font remains in the 1st button, the drop downs were
changed. I also needed to align the buttona as my stage is bigger
looking for the x/y elements but I was so tired I must have missed
them. The seperate xml script only lets you change the text, amount
of menus and urls. Any help?Thanks for the info, as I said I'm new to AS3 so I would need
to know exactly where in the script I would insert this
(Also the font is on my mac so it would be the font folder/,
font name "Gil Sans Lite" ='NavItemFont'
package {
import flash.display.Sprite;
public class NavItemFont extends Sprite {
[Embed(source='C:/WINDOWS/Fonts/FRAMDCN.TTF',
fontName='NavItemFont', whats the unicode range?
unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+006 1-U+007A,U+007B-U+007E')]
public static var NavItemFont:Class;
and second it says" Render this out - so it is now
NavItemFont.swf" does that mean change the original fla name and
export it as NavItemFont.swf"?
Also " Then in another flash app - load the external swf as
an asset, and on-load register the font - which will make it
global. You can now change NavItemFont.swf externally and it will
change in your app everywhere. Can you explain?
thx -
PLEASE HELP!! Drop Down Menu Using Photoshop Images
I have hit a brick wall in trying to work this out, and it is
killing my productivity, I just need to get through this hurdle on
this site, and I can finish it.
Quick rundown on where I'm at:
I created the website to look how I wanted in Photoshop.
After I've gotten it looking how I want, I bring it into fireworks
and slice it up (I'm sure this step can be skipped, but thats how
I'm used to it), and then I export it into Dreamweaver.
All of that is working fine, except for this drop down menu.
All I'm wanting to happen is when they roll their mouse over "firm
profile" for example, for there then to be a drop down menu that
drops below it (no animation necessary) that has 2 additional
options they can select.
I have created what the page would look like after the drop
down menu would come up (in photoshop). I've tried doing swap
images and menu bars and some scripts from the net etc etc but
nothing works. It either tries to load the drop down menu WITHIN
the slice where it says "firm profile" instead of below it, or just
messes up completely.
In fireworks, I'm able to setup a swap image where when you
put your mouse over "firm profile" it asks which slice you want the
new swap image to come up in, which would work fine EXCEPT that
when you go to select one of the bottom submenu options, the
rollover disapears. If you do it where the whole slice is switched,
then that submenu appears when you rollover where it would be, even
if you haven't first rolled over "firm profile"
So to summerize: All I want is to be able to tell it when you
put your mouse over "FIRM PROFILE" that underneath it , a drop down
menu image that I have already created pops up, and you are able to
1) select the sub menu items (urls). I feel that this should not be
anywhere near this hard.
Please help.cdeatherage wrote:
I just realized--and Murray correct me where I stray--I may have intimated what you want to do is not very complicated. It will be a bit involved, actually. You are probably going to have to set up an id for each menu item so that you can apply the applicable image to the link state for each button. That is to say, your images for Menu Item 1 are going to be different than for Menu Item 2, so you are going to have to code individual link states for each button rather than rely on a global state. I think you can still do what you have designed, but you will likely have much frustration getting there if you are not comfortable writing code. Perhaps what might be easier for you is to use text in the html code for each menu item and then globally apply one background image for the a: state, another for the hover state, etc.
Hope I'm making sense.
Chris
Yes that does make sense - and is exactly the thought I was coming round to. -
Help with inserting drop down menu/pricing in Muse site
I know this is not a feature available directly in Muse, but are there other sites where I could get code to insert? View this website , the box on the right side where you can select from 3 dropdown menus and you get an updated price at the top. I don't care so much about the add to care function, I just want to have the dropdown/pricing.
The HTML code for a drop-down menu is as follows:
<select>
<option>Item 1: $9.95</option>
<option>Item 2: $19.95</option>
<option>Item 3: $29.95</option>
</select>
You can add this code by clicking Option-> Insert HTML...
Here is a good tutorial for drop-down menus.
http://www.echoecho.com/htmlforms11.htm
Hope this helps,
Julia -
Help to associate drop down menu choices with prices in another field
Hello. : (
I am not really a programmer.. but I have written code before.
(Certainly never written in JavaScript..)
I am working for some non-profit and they asked me to fix their PDF to associate prices with items..
I thought that this would be relatively simple in LiveCycle.. but not for me, anyway..
I have some fields called Description0, Description1, etc.. that are a DROP DOWN menu that lets you select some option.
I want the option to associate with a price field and update depending on the item selected in the drop down menu.
I am totally failing though, it would seem..
Any tips would be appreciated. : )
I wrote something like this:
function descriptionChange(newDescription){
switch(newDescription){
case "Lifepak CR Plus Charge Pak (one set of electrodes and one battery)":
this.resolveNode("UnitPrice.UnitPrice").rawValue = "80";
break;
case "Lifepak CR Plus Charge Pak (two sets of electrodes and one battery)":
this.resolveNode("UnitPrice.UnitPrice").rawValue = "107";
break;
case "Lifepak CR Plus Pedi Pad Starter Kit":
this.resolveNode("UnitPrice.UnitPrice").rawValue = "139";
break;
case "Lifepak CR Plus replacement pedi pads":
this.resolveNode("UnitPrice.UnitPrice").rawValue = "99";
break;
case "Philips HeartStart FRx Battery":
this.resolveNode("UnitPrice.UnitPrice").rawValue = "153";
break;
case "Philips HeartStart FRx Adult Pads (1 Set)":
this.resolveNode("UnitPrice.UnitPrice").rawValue = "50";
break;
case "Philips HeartStart FRx Infant/Child Key":
this.resolveNode("UnitPrice.UnitPrice").rawValue = "98";
break;
case "Zoll Type 123 Lithium Batteries, (10) lasts 5 years":
this.resolveNode("UnitPrice.UnitPrice").rawValue = "75";
break;
case "Zoll CPR-D Padz, five year year shelf-life":
this.resolveNode("UnitPrice.UnitPrice").rawValue = "169";
break;
case "Zoll Stat Pads II, Two (2) piece pads, 2 year shelf-life":
this.resolveNode("UnitPrice.UnitPrice").rawValue = "59";
break;
case "Cardiac Science G3 Plus Battery":
this.resolveNode("UnitPrice.UnitPrice").rawValue = "395";
break;
case "Cardiac Science G# plus Pads (1 set)":
this.resolveNode("UnitPrice.UnitPrice").rawValue = "49.95";
break;
case "Wall Cabinet":
this.resolveNode("UnitPrice.UnitPrice").rawValue = "200";
break;
case "AED Wall Sign-3D":
this.resolveNode("UnitPrice.UnitPrice").rawValue = "15";
break;
}//end switch
}//end function
and then for each Description0,1... I put in like this:
var newDescription = this.boundItem(xfa.event.newText);
DescriptionChange.descriptionChange(newDescription);
Help please? : )
Sorry if my question is too simple.. or I am just too much of a failure..Thank you!!!
That is a really nice trick. : )
I ended up referencing the values with JavaScript actually..
but I imagine it is effectively the same.
They are referenced like this if anyone is curious in the future...
UnitPrice.rawValue = Description.rawValue;
I also thought I might have a problem in the future if each price associated was not unique -- but that also doesn't matter... super great. : )
Thank you very much. -
Drop-down menu in Dreamweaver; template on top of template issue
Hello.
I've managed to create a drop-down menu in a dreamweaver
template by saving the .dwt file as an .html file, building the
menu, then resaving the file as the original .dwt. However, I have
another template that is based on this original template, and while
the drop-down menu appears when I preview the second template in my
browser, it refuses to apply to the pages upon which the second
template is based.
Is there a solution to this?You are completely hosed now.
When you save a template as HTML, you leave the Template
markup in the page.
When you then resave it as a template you duplicate that
markup. You will
never be able to use this properly now. And that is
especially true with
the AWFUL DW pop-up menus in it. You just must not use these
menus with
templates. Especially since there are much better ways that
don't have any
such restrictions -
Check the uberlink and McFly tutorials at PVII
http://www.projectseven.com/)
and the Navbar tutorial at Thierry's place (
http://www.tjkdesign.com)
Or to get it done fast, go here -
http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"xpanda" <[email protected]> wrote in
message
news:e9q2gf$oq4$[email protected]..
> Hello.
>
> I've managed to create a drop-down menu in a dreamweaver
template by
> saving
> the .dwt file as an .html file, building the menu, then
resaving the file
> as
> the original .dwt. However, I have another template that
is based on this
> original template, and while the drop-down menu appears
when I preview the
> second template in my browser, it refuses to apply to
the pages upon which
> the
> second template is based.
>
> Is there a solution to this?
> -
Help with IE drop down menu stretching across page, Chrome & Firefox work perfectly.
I have set up a spry menu in my page. file:///C:/Users/Kim/Documents/PQH_xhtml/index.html
Everything works great in Chrome and Firefox. Just not in IE. The only problem I am having is in IE the drop down menus stretch out all the way across the page.
I have tried changing the width, but it messes up Chrome and Firefox. Just need IE to shorten up the width of sub menus.
Any help is GREATLY appreciated!!!@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
background-color: #f9f8f6;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
font-style: oblique;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 14.28%;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 100%;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
float: none;
clear:left;
width: auto;
white-space: nowrap;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
border: thick ridge #3b87d5;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #33C;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF; -
Help with Horizontal Drop down menu
Can someone tell me what is wrong with my style sheets. The
drop down menus aren't showing up in IE6, but work fine in Firefox,
Safari and IE7. I am certain it is something simple.
http://www.naylaw.com
Need help please.Working for me on ie6
Maybe you are looking for
-
Hi experts, I did a acquisition with vendor through fixed assets add-on but I cannot see the particular invoice when I run the Purchase Analysis report(by Purchase Invoice)?So the report is inaccurate. Why the fixed assets add-on is not linked with S
-
Problem with stacked bar query
Hello, I tubbing a while on this already and probably the answer is right there. I have table with date,product,qty column and I want a stacked bar with the sum of quantity for each product for a certain period. so period is the label but how can I c
-
AVCHD output to 16:9 DVD has glitches
I have a Panasonic HMC150 camera and we shot some footage in 1080 60i. After editing the native files in Premiere Pro CS4 I opened Encore and tried numerous times to burn a 16:9 DVD. I tried using dynamic link and letting Encore do the encoding. I
-
My sleep/wake button has been broken for a while and my phone decides to turn off itself. I have plugged it up to the wall charger and the computer. But nothing has happened. I even held the home button down for a while. Is there anything I can do? O
-
Using MS SQL Server 6.5 with WLE4.2 (C++)
Hi, I'm developing an application using WLE4.2 (C++) under OS Windows NT4. The application is a C++ client accessing a C++ server, which in turn accesses a MS SQL 6.5 via XA Switch. But when I try to run the following command tmboot -yI get the follo