CSS - Vertical Dropdown Menu

Hey guys.
I need the CSS for a vertical menu much like the one on the
Adobe Homepage under 'Products and
Solutions' where more data is revealed when the title is scrolled
over.
If anybody has links to a tutorial or even have one of these
menus I could possibly have a look at it would be much appreciated.
Cheers in advance.

Hello,
This is a nice CSS dropdown menu tutorial:
http://projectseven.com/tutorials/navigation/auto_hide/index.htm
And another:
http://www.tjkdesign.com/articles/dropdown/
example of menu:
http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp
Take care,
Tim
"ForensicBop" <[email protected]> wrote in
message
news:g54p5j$nke$[email protected]..
> Hey guys.
>
> I need the CSS for a vertical menu much like the one on
the Adobe homepage
> under 'Products and Solutions' where more data is
revealed when the title
> is
> scrolled over.
>
> If anybody has links to a tutorial or even have one of
these menus I could
> possibly have a look at it would be much appreciated.
>
> Cheers in advance.
>

Similar Messages

Creating a vertical dropdown menu that displays inline

I would like to change how my dropdown menu displays. First I'd like for it to dropdown directly underneath its menu item and in the process move the other links down. And remain visible until it is clicked again, thereby shifting other links back up.
Here is what I am trying to accomplish:
Main menu:
main link 1
main link 2
main link 3
main link 4
Then when user clicks on a link:
main link 1
   sub item
   sub item
   sub item
main link 2
main link 3
main link 4
And for it to remain displayed like the above until clicked again.
So in essence it could even look like this as a user is navigating:
main link 1
   sub item
   sub item
   sub item
main link 2
   sub item
   sub item
   sub item
main link 3
   sub item
   sub item
   sub item
main link 4
   sub item
   sub item
   sub item
And then each submenu disappear as its main link is clicked again.
Hope this makes sense and hope someone can help.
Thanks!
P.S. Im using Dreamweaver CS6

Bare bones example: (needs styling with css) (if you want a bit more of a smooth animation use - $(this).find('.sub_menu').slideToggle(); instead of $(this).find('.sub_menu').toggle(); in the jQuery script below highlighted in red
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Drop Down Menu</title>
<style type="text/css">
ul {
margin:0;
padding:0;
list-style-type:none;
/* hide sub menu */
.sub_menu {
display: none;
    /* indent sub menu */
.sub_menu li {
padding-left: 10px;
        </style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.menu').click(function() {
$(this).find('.sub_menu').toggle();
</script>
</head>
<body>
<ul id="navigation">

<li class="menu"><a href="#">Menu 1</a>
<ul class="sub_menu">
<li><a href="#">Sub Navigation 1</a></li>
<li><a href="#">Sub Navigation 2</a></li>
<li><a href="#">Sub Navigation 3</a></li>
</ul>

</li>
<li class="menu"><a href="#">Menu 2</a>
<ul class="sub_menu">
<li><a href="#">Sub Navigation 1</a></li>
<li><a href="#">Sub Navigation 2</a></li>
<li><a href="#">Sub Navigation 3</a></li>
</ul>

    </li>
<li class="menu"><a href="#">Menu 3</a>
<ul class="sub_menu">
<li><a href="#">Sub Navigation 1</a></li>
<li><a href="#">Sub Navigation 2</a></li>
<li><a href="#">Sub Navigation 3</a></li>
</ul>
    </li>
</ul>
</body>
</html>

CSS (Responsive) Horizontal Dropdown Menu (Alignment)

I am styling a Responsive CSS Horizontal Dropdown Menu (for hours now), and can not get the main menu headings (Directory, Resources, etc) to align left (even) with the logo and content divs. I would also like the submenu headings (Learning & Games) and items (Catch the Bullet, Snoopydoo, etc) to align left (even) with the logo and content divs. - Like I am trying to do with the main headings. --I am trying to get the logo, main menubar heading, and menubar subheading to all align the same left.
(Optional) I am considering on not having the gray menuboard span the whole screen when opened. Not sure if this would look good, but even more unsure how to keep it in the 90% container the menubar is located in.
Here is the site for code:
http://dothopper.com/index.html
Thanks for any help.

Another great tip. Never cease to amaze. Thanks . I uploaded the new CSS with red border and looked at somewhat. It seems very helpful, but like this navbar, I'm gonna have to spend some time with. I think this may help me to figure the problem. This is a really GREAT trick, thanks. If you appen to look at my site, and see anything relevant to getting the element to shift left, let me know.
BTW, crammed some more learning recently (Mostly Dreamweaver, little HTML STructure, and JQuery). Going to try to not use as many divs, (use HTML tags and class selectors). Trying to use captions in my HTML and CSS for organization and understanding. Making copies of all my CSS, JS, and HTML. Set my areas (divs) up as 'section,aside,article,and footer'?--Tried adding metatag info (I think I missed 1 part of the metatag (they wanted a value?). Not sure if my metatagging is correct? Let me know of any advice what I'm doing right/wrong so far.
I taught myself to design using divs like tables somehwat. With the correct way of design (not using alot of divs)..how would I handle this?...
My old page (method), I had several,divs: 3- (content75%) and 3- (image25%) all housed within a div (approx 900px). Content was left, and images right. Total DIV that housed them was 75% of 1232px page? (I think)..The div that housed them was approx 900px (.75x1232). Content approx 675px and image approx 225px wide.
I inseted 480px wide images in that 25% image div and it showed it nicely as approx 225px wide on desktop, and when responsive on mobile, nice full size at 480px. (I think I am/was avoiding having to use alternative images--for each platform-- this way?)
With the correct way of designing (less divs), how would I handle this scenario above? IF I inserted a 480px image into a approx 900px div with no other divs, it would fill the div with a 480px image. IT would then throw my wole design off. I think I'm just missing some HTML/CSS knowledge. Hope this question makes some kind of sense?

Best way to do a dropdown menu?

i've been exploring using a spry tooltip and collapsible
panel, not sure what is best and easiest to have a vertical
dropdown menu that opens when your mouse runs over a tab and closes
when your mouse goes off the tab, but remains open while you are
scrolling though the menus under the tab and opens and closes in
the same location regardless of where your mouse runs over the tab.
example of what i want:
Anthropologie.com
(the "new", "clothes", "loungewear", etc. at the top of the page)
how do i do this?

>i don't understand how to use these links.
Click on them. Read and study the page(s) they take you to.
>>what to i do with the code? how do i know where it
goes?
Sounds like you may be getting ahead of yourself. Start with
the basics. IOW
learn HTML & CSS. Here's a good start:
http://www.peachpit.com/bookstore/product.asp?isbn=0321430840&rl=1
http://www.sitepoint.com/books/design1/?SID=b8ccb8757daf84bf0b3b2ae4414031a2
http://www.sitepoint.com/books/html1/
>>what do you mean the project seven is paid for?
Most of P7's stuff are commercial extensions, meaning you
need a credit card
or PayPal account.
>>how do i get it for free?
You CAN'T get the commercial extensions for free but P7
offers some great
free tutorials so you can build your own.
Walt
"aestruth" <[email protected]> wrote in
message
news:gp5u6g$6sh$[email protected]..
>i don't understand how to use these links. what to i do
with the code? how
>do i know where it goes? and what do you mean the project
seven is paid
>for? how do i get it for free?

Dropdown menu on my site is not working correctly anymore

I use a CSS-based dropdown menu that has a 1 pixel white frame. In FF3.6 and in IE, Safari, Chrome it is working as dedired, but in FF4 the menu disappears as soon as I hover on the white frame. This normally only happens if I leave the area of the menu.

Problem still exists with safemode on a freshly installed 4.0b11. The installation was done in parallel to 3.6.12.
I have two sites with exactly the same css menu. The one written in xhtml 1.0 works correct, but the one written in html 4.01 has the problem. Both sites validate with no errors also for css.
When I move the mouse over the dropdown menu on my site the menu disappears when I'm exactly over the white frame.

Long Vertical CSS dropdown menu goes off screen

Greetings,
I developed a dropdown menu using Spry (Adobe Dreamweaver). It is a vertical menu with multiple sub-menus. Some lists are very long and the menu goes below and off the page.
I found a great example of what I want my menu to do: http://coins.shop.ebay.com/
On the side, it says "Browse By:" and there is a vertical menu. If I shrink the page up vertically a little and watch the sub-menus pop out, I notice they get pushed up if the parent is close to the bottom of the screen, which ensures that none of the options go off the page, they get pushed up.
How can this be done?
Thanks

Have a look here http://pleysier.com.au/mike/
Maybe this is for you.
For the accordion I have used jQuery UI Accordion for Widget Browser which can be found here http://emea-events.wip4.adobe.com/cfusion/exchange/index.cfm?event=ext ensionDetail&loc=en_us&extid=2028523
If you are using DWCS4 or 5, then you can easily incorporate the widget, if not then it is a matter of copying and pasting the code.
Gramps

IE 7 - CSS Issues with Spry dropdown Menu *HELP*

I am using a spry horizontal dropdown menu generated in DW. The menus look consistant in all other browsers except ie7 - When the drop down menu occurs they all appear to the right and not directly under its menu item.. Looked around in the Css and i cant seem to find the right rule to make the change in ie7 only... was planning on using a css conditional statement to shift them left.. But im not having any luck.. HELP!
Thanks so much in advance!

Sorry.. Here is the link.. Thanks so much for your willingness to help!
http://soldesign.us/_working/WEBSITE_BoulderPlasticSurgery/index.html

CSS Dropdown Menu Issue in Contribute

Hello everyone,
My name is Boris and I have these question related to the
Adobe Contribute.
I'm working on a client web site where there is a CSS drop
down menu that works in all the browsers. Which works perfectly in
all the browsers without use of JavaScript. However, the issue
comes when you use Contribute and it simply shows the entire drop
down menu all incorrectly and overall design gets all wrong because
of that. I was wondering if anyone had similar problem and has a
solution for it or if there is a way to make code hidden just to
Contribute?? I would very much welcome any help with this issue.
Thank you everyone and have a great weekend. :-)

I've figured it.
Just so anyone else who is experiencing this knows - i
changed all the
margin-left properties to just 'left' and made the position
relative. For
some reason Contribute didn't recognise the margin-left
property at all.
Strange. It now displays exactly the same in dreamweaver,
contribute, ie,
firefox...etc.
Thanks for your post Lime.
"lime" <[email protected]> wrote in message
news:e26u9n$jqr$[email protected]..
> "James D" <[email protected]> wrote in
message
> news:e26b7m$rv8$[email protected]..
>> Hi there,
>>
>> I have a template page which is based purely in CSS
and I need that
>> template
>> to be used by my client in Contribute, the only
problem is that when page
>> is
>> previewed in Contribute the layers are all on top of
each other in one
>> line
>> making it impossible for client to update. In
Dreamweaver the preview is
>> fine.
>>
>> I dont have access to the code at the moment as i am
away from the
>> office,
>> but has anyone experienced a similar thing before or
is there a common
>> explanation like contribute cannot handle pure css?
>>
>> Thanks
>>
>>
>
> Yeah, I've seen Contribute present CSS layers in an odd
way as well - not
> as bad as yours sounds though. I'm also not sure how to
help... anyone
> else?
>
> --
> Helen, lime, et al.
>

Dropdown Menu CSS Style

Hi!
I am trying to create a dropdown menu in Dreamweaver. I have watched several tutorials and read many how-to guides and my html looks fine, but editing the style is really throwing me off. I am a beginner to Dreamweaver, so I am unsure of the properties I need to make this right. The code below, when I hover over the first button the dropdown menu goes behind the other two buttons. I need the dropmenu to go off to the side of the buttons and down. If not that, I can align the buttons to go horizontal, so they aren't being covered. I hope that makes sense.
Thank you in advance!!
-M
HTML
<div class="dropdown" id="dropdown" style="text-align: left;">
<ul>
        <li><a href="#">Americas</a>
           <ul>
                   <li><a href="#">Connecticut</a></li>
                    <li><a href="#">Ohio</a></li>
                    <li><a href="#">Vermont</a></li>
                    <li><a href="#">California</a></li>
                    <li><a href="#">Canada</a></li>
                    <li><a href="#">Brazil</a></li>
           </ul>
        </li>
</ul>
<ul>
       <li><a href="#">China</a>
             <ul>
                     <li><a href="#">China</a></li>
               </ul>
        </li>
</ul>
<ul>
        <li><a href="#">Europe</a>
            <ul>
               <li><a href="#">France</a></li>
               <li><a href="#">UK</a></li>
            </ul>
        </li>
</ul>
</div>
STYLE
#dropdown {
margin: 0;
width: 150px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
#dropdown ul {
margin: 0;
padding: 0;
line-height: 30px;
#dropdown li {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
#dropdown ul li a {
text-align: center;
height: 30px;
width: 150px;
display: block;
color: #000;
text-decoration: none;
border: 1px solid #000;
text-shadow: 1px 1px 1px #000;
background: #CCC;
#dropdown ul ul {
position:absolute;
visibility:hidden;
top:32px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
#dropdown ul li:hover ul {
visibility:visible;
position:absolute;
   #dropdown li:hover {
background: #7D92C6;
float: left;
    #dropdown ul li:hover ul li a:hover {
    color:#000;
    background:#7D92C6;
#dropdown a:hover {
color:#000;
background: #7D92C6;
.clearFloat {
    clear:both;
    margin:0;
    padding:0;

Are you doing this as an execise in learning or is it for a real website. I ask because if the latter why not just use a tested and proven commercial product and be done with it? I have used the PVII (http://www.projectseven.com) products for years and can't recommend them highly enough.

Why won't cells autopopulate when using numbers on the ipad? Anyone have a fix? Have also created a dropdown menu, but that does not translate from excel to numbers either.

Why won't cells autopopulate when using numbers on the ipad as they will in excel? Anyone have a fix? I have also created a dropdown menu in excel, but that does not translate from excel to numbers either.

Glad you got it sorted out.
Diane123456 wrote:
> Thanks Vix, Joe, and Mad Dog for responding, the site is
in
> development so it's behind a password, which I probably
could share
> but MD is right, it was a margin issue. I didn't think I
needed to
> set a margin but I had to put a left margin of 2em on it
for the
> numbers to display on IE7 or IE6
>
> This is actually a rather common issue with CSS layouts
(it is not an
> issue with designs using tables) - there are several
posts for ULs
> which you may be interested in - see
>
>
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postId=
> 1981&productId=1&loc=en_US
>
> -- and once I got the numbers to show I ran into the
same problem as
> the commenters on the above thread, which noticed that
the vertical
> alignment doesn't work well with IE, and which noted
that apparently
> IE has a stutter because it just kept repeating "1" "1"
"1" -- so I
> finally went with a hanging indent and just put the
numbers in there
> manually - fortunately it's not a long list.... if you
have a fix
> for the stutter, or know of another place to get help
with CSS layout
> browser quirks please share -- if I find another one
I'll share also
>
> thanks again, Diane

Horizontal dropdown menubar - Vertical dropdown menubar

Hi,
I would need help to turn a horizontal dropdown menubar to a vertical dropdown menubar. I am not experienced with CSS so don't know how to change code correctly. I would like to get submenu going vertically beside main menu.
http://www.villalotus.net/TEST/test.htm
Thanks in advance!

Thank you Ken!
Unfortunately I didn't find help from tutorials. I manged to turn menu vertically but submenu goes on top of main menu.
/*main nav*/
nav {
          margin-left: auto;
          margin-right: auto;
ul {
          padding: 0;
          margin: 0;
nav ul {
          list-style: none;
          font-weight: bold;
          font-size: 20px;
          margin: 5px;
          width: 180px;
nav ul ul {
          display: none;
          margin: 0px;
          padding: 0px;
nav ul li {
           position: relative;
nav ul a {
          display: block;
          width: 160px;
          text-align: center;
          text-decoration: none;
          color: #fff;
          border: 1px solid #004c99;
          border-radius: 8px;
          margin-right: auto;
          margin-left: auto;
          padding-top: 5px;
          padding-right: 9px;
          padding-bottom: 5px;
          padding-left: 9px;
nav ul a:active       {
          background: rgba(255,255,255,0.4);
          color: #FFF;
nav ul li a:hover, ul a:focus {
          text-decoration: none;
          background-color: #6699cc;
          color: #FFFFFF;
nav ul a:link, nav ul a:visited {
          background: rgba(255,255,255,0.2);
          color: #FFFFFF;
nav ul li a {
          margin-top: 0px;
nav ul ul li {
            position: relative;
nav ul ul li a {
          color: #fff;
          margin: 0px;
nav ul ul li a:hover {
          background: #6699cc;
nav ul ul li a:active, ul ul li a:link , ul ul li a:visited{
          background-color: #3370AD;
nav ul li:hover {
          margin-top: 0px;
nav ul li:hover> ul{
          display: block;
          position: relative;
nav ul:after {
          content: "";
          clear: both;
          display: block;
Message was edited by: Karonaful

Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome

Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome. Works in IE. This is my first time trying to post a question - so please be kind. I am also not good with code and am finding css a real challenge after learning to design based on tables. I'm using CS5.
The "test" page with the slide show is: http://www.reardanwa.com/index-slides.html   The same page without the slide show is http://www.reardanwa.com/
I realize the images are not ideally sized - I'll fix those once I get the pages to function. Maybe I need a different slide show? I would prefer a widget that I can modify to required size & postition. Again - I'm not good at building with code from scratch.
The problem is the naviagation links that are directly next to the slide show do not work in Firefox of Chrome. They do work in IE.
I've read about using jQuery.noConflict(); code but can't figure out the correct way to use it in my case or whether that's even part of the solution. I know my code is not well organized as I have cobbled together from various sources in an attempt to format the page the way the client wants it. Also, FYI, I will eventually try to make the page work in Surreal CMS.
I've spent sevaral days over the last several weeks trying to solve sth slide show/navigation conflict - so any specific light you can shed will be much appreciated.
Thanks in advance.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reardan Area Chamber of Commerce</title>
<meta name="description" content="home page for Reardan Area Chamber of Commerce" />
<meta name="keywords" content="Reardan WA, chamber of commerce" </>
<script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.js" type="text/javascript"> </script>
<script type="text/xml">
</script>
<style type="text/css">
                              #slideshow {
                                  padding: 10px;
                                        margin:0;
                              #slideshow-caption{
                                        padding:0;
                                        margin:0;
                              #slideshow img, #slideshow div {
                                  padding: 10px;
                                  background-color: #EEE;
                                  margin: 0;
body {
          font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
          background: #004B8D;
          margin: 0;
          padding: 0;
          color: #000;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
          padding: 0;
          margin: 0;
h1, h2, h3, h4, h5, h6, p {
          margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
           /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
.left
position:absolute;
left:0px;
.center
margin:auto;
width:95%;
.box
          position:relative;
          left:-90px;
          width:950px;
          height:350px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
          z-index:1000;
.slide{
    position:absolute;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
          border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
          color: #42413C;
          text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
          color: #6E6C64;
          text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
          text-decoration: none;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
          width: 960px;
          min-height:900px;
          padding:5px 0px 0px 0px;
          background: #E8F8FF;
          margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
          background: #E8F8FF;
          padding:10px 5px 0px 5px;
.sidebar1 {
          float: left;
          width: 225px;
          margin: 60px;
          color: #FFFF0D;
          background: #595FFF;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
          padding: 5px 5px 0px 5px;
    border: 3px solid #F7F723;
    z-index:-1;
.sidebar2 {
          float: left;
          width: 275px;
          color: #FFFF0D;
          text-align: left;
          background: #595FFF;
          padding-bottom: 10px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border: 3px solid #F7F723;
    z-index:2;
.sidebar3 {
          float: left;
          width: 275px;
          color: #FFFF0D;
          text-align: left;
          background: #595FFF;
          padding-bottom: 10px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border: 3px solid #F7F723;
    z-index:3;
.content {
          padding: 0px 0px 0px 0px;
          width: 780px;
          float: left;
          background: #E8F8FF;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
          padding: 0px 15px 5px 10px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
          list-style: none; /* this removes the list marker */
          border-top: 0px solid #FFFF66; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
          margin-bottom: 50px; /* this creates the space between the navigation on the content below */
          font: Arial Black, Verdana, , Helvetica, sans-serif;
          font-size:1.3em;
          font-weight:bold;
          z-index:2;
ul.nav li {
          border-bottom: 0px solid #FFFF66; /* this creates the button separation */
          font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
          padding: 3px 0px 5px 0px;
          display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
          width: 185px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
          text-decoration: none;
          color: #FFFF0D;
          background: #595FFF;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
          background: #595FFF;
          font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
          color: #FFFFFF;
/* ~~ The footer ~~ */
.footer {
          padding: 10px 0;
          background: #595FFF;
          color: #FFFF0D;
          position: relative;/* this gives IE6 hasLayout to properly clear */
          clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
          float: right;
          margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
          float: left;
          margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
          clear:both;
          height:0;
          font-size: 1px;
          line-height: 0px;
-->
</style>
</head>
<body>
<div class="container">
<div class="header">
<a href="#"><img src="images/Chamber-Logo-2.gif" alt="Reardan Chamber Logo" width="187" height="163" hspace="10" vspace="5" align="top" /></a><img src="images/Reardan-Chamber-Title.gif" width="476" height="204" alt="Reardan Area Chamber of Commerce, Dedicated to Preserving and Enhancing Area Businesses" /><p></p>
<p style="color: #F00">This Site is under construction! Please pardon our dust as we create!</p>
</div>
<div class="sidebar1">
    <ul class="nav">
      <li><a href="about.html">About Us</a></li>
      <li><a href="history.html">Reardan History</a></li>
      <li><a href="activities.html">Activities</a></li>
      <li><a href="business.html">Business<br />
        Directory</a></li>
      <li><a href="about.html">Join the<br />
        Chamber</a></li>
       <li><a href="links.html">Links<br />
  <span style="font-size: 85%">Tourism</span><br />
      </a></li>
    </ul>
     </div>
<br />
<br />
<br />
<br />
<div class="box" +"slide">
<script type="text/javascript">
// BeginOAWidget_Instance_2559022: #slideshow
                           slideshowAddCaption=true;
$(window).load(function() {
$('#slideshow').cycle({
                    after:                              slideshowOnCycleAfter, //the function that is triggered after each transition
                    autostop:                              false,     // true to end slideshow after X transitions (where X == slide count)
                    fx:                                        'blindX',// name of transition effect
                    pause:                              false,     // true to enable pause on hover
                    randomizeEffects:          true, // valid when multiple effects are used; true to make the effect sequence random
                    speed:                              100, // speed of the transition (any valid fx speed value)
                    sync:                              true,     // true if in/out transitions should occur simultaneously
                    timeout:                    5000, // milliseconds between slide transitions (0 to disable auto advance)
                    fit:                              true,
                    height:                       '300px',
                    width:         '525px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)
function slideshowOnCycleAfter() {
          if (slideshowAddCaption==true){
                              $('#slideshow-caption').html(this.title);
// EndOAWidget_Instance_2559022
</script>
<div id="slideshow">
    
    <img src="images/100_1537.jpeg" width="600" height="450" title="caption for image1" /> <img src="images/Parade-2011-2.jpg" width="300" height="225" title="caption for image2" /> <img src="images/100_1495.jpeg" width="600" height="450" title="caption for image3" />
    <div title="sample title"> Images for slide show will need to be re-sized to fit box to avoid distortion</div>
    <img src="images/beach4.jpg" width="200" height="200" title="caption for image4" /> <img src="images/beach5.jpg" width="200" height="200" title="caption for image5" /> </div>

<div id="slideshow-caption"></div></div>
<div class="sidebar2" "anotherClass editable"><p align="center"><strong>Chamber News</strong><br />
Local News item
<br />
Another New item</p>
<p align="center">lots of news this week<br />
    <br />
    <br />
    <br />
</p>
</div>
<div class="sidebar3" "anotherClass editable"><p align="center"><strong>Upcoming Events</strong></p>
<div align="center">    <a href="activities.html" style="color: #FFFF0D">Community wide yard sales</a><br />
    <br />
    <br />
    <br />
    <br />
</div>
</div>
<div class="content"><br />
<br />
</div>
<div class="footer">
        <p align="center"><span style="font-size: small">Reardan Area Chamber of Commerce</span><br />
          <span style="font-size: x-small">[email protected] - 509.796.2102</span><br />
        </p>
        
</div></body>
</html>

If you DO want the slideshow overlaping the navigation try the below css:
.sidebar1 {
    float: left;
    width: 225px;
    margin: 60px 0px 60px 60px;
    color: #FFFF0D;
    background: #595FFF;
    border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    padding: 5px 5px 0px 5px;
    border: 3px solid #F7F723;
.box {
float: left;
margin-left:-60px;
width:700px;
height:350px;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;

Dropdown menu in APEX 4.0

Hi,
I am wondering how to create the Dropdown menu in APEX 4.0. Similar to the Oracle Application Express Homepage or the one gets created in any Websheet Application. I have tried to use the List but unable to place into the right position (Display Point) to get similar look and feel in Theme 2. Builder Blue.
Please let me know if there is a easy way along with the steps.
Thanks,
AS

The steps can be detailed as follows (I will make it specific to my theme -Application Builder- and you can replace what you want)
0) a) My Page template name is WithNicolettePlugin.
b) Put the Nicolette (Thanks alot for him) plugin on #REGION_POSITION_08# in Page Zero (Global page)
c) the settings of the plugin as follows:
- Template : WithNicolettePlugin
- Before HTML : <ul class="dhtmlMenuLG2"> - After HTML : </ul> - jQuery selector submenu : .dhtmlSubMenu2
- Tab set : main
- Include single subtab : yes
- Class first parent : ui-corner-left
- Class last parent : ui-corner-right
- File Prefix : #IMAGE_PREFIX#
the others are empty
1) link the following CSS's into the Header section of the Page Template of (Bluejay-22)
<link rel="stylesheet" href="/i/css/apex_builder.min.css?v=4.2.0.00.27" type="text/css" />
<link rel="stylesheet" href="/i/css/apex_ui.min.css?v=4.2.0.00.27" type="text/css" />
<link rel="stylesheet" href="/i/css/apex_ui_builder_home.css" type="text/css" />2) link the following Scripts into the Header section of the Page Template
<script type="text/javascript">
var apex_img_dir = "/i/", htmldb_Img_Dir = apex_img_dir;
</script>
<script src="/i/libraries/apex/minified/desktop_all.min.js?v=4.2.0.00.27" type="text/javascript"></script>
<script src="/i/libraries/apex/minified/legacy.min.js?v=4.2.0.00.27" type="text/javascript"></script>
<style> html {visibility:hidden;} </style>
<script type="text/javascript">
apex.security.framebreaker("D");
</script>
<script src="/i/libraries/apex/minified/widget.textarea.min.js?v=4.2.0.00.27" type="text/javascript"></script>
<script src="/i/libraries/apex/minified/builder.min.js?v=4.2.0.00.27" type="text/javascript"></script>3) Re-write the Body section to be as the following
<div id="page-header">
.... LOGO AND WELCOME HERE ......
   <div class="apex-top-bar-end">
       <div class="apex-top-bar">
            <div id="tabs" class="dhtmlMenuLG">
              #REGION_POSITION_08#   
            </div>
       </div>
   </div>
</div>
<div id="topbar">#REGION_POSITION_01##REGION_POSITION_04#</div>
<div id="messages">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div>
<div id="body">
    <table class="tbl-body" cellspacing="0" cellpadding="0" border="0" summary="">
    <tbody>
      <tr>
        <td class="tbl-main" width="100%">#REGION_POSITION_02##BOX_BODY#</td>
        <td class="tbl-sidebar">#REGION_POSITION_03#</td>
      </tr>
    </tbody>
    </table>
</div>4- Update the section of Standard Tab Attributes to have Current Tab as the following *(PLEASE, REMOVE THE MINUS BEFORE onmouseover)*
<li class="dhtmlSubMenuN" -onmouseover = "dhtml_CloseAllSubMenusL(this)" >
<a href="#TAB_LINK#" class="dhtmlSubMenuN"
     title="#TAB_LABEL#">
     "#TAB_LABEL#
</a>
</li>
{code}
and Non Current Standard Tab as the following
{code}
<li class="dhtmlSubMenuN" -onmouseover = "dhtml_CloseAllSubMenusL(this)" >
<a href="#TAB_LINK#" class="dhtmlSubMenuN"
      title="#TAB_LABEL#">
      "#TAB_LABEL#
</a>
</li>5- Update the section of Parent Tab Attributes to have Current Parent Tab as the following
<div id="#TAB_ID#" class="current">
    <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
    <a href="#" class="link_icon">
      <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"
           class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
   </a>
   <ul id="#TAB_NAME#" htmldb:listlevel="1" class="aTabs dhtmlSubMenu pulldown-tabs" style="display:none;">
       #TABS#
       <li class="last" dir="RTL"><span></span></li>
    </ul>
</div>and Non Current Parent Tab as the following
<div id="#TAB_ID#" class="non-current">
    <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
    <a href="#" class="link_icon">
      <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"
           class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
   </a>
   <ul id="#TAB_NAME#" htmldb:listlevel="1" class="aTabs dhtmlSubMenu pulldown-tabs" style="display:none;">
       #TABS#
       <li class="last" dir="RTL"><span></span></li>
    </ul>
</div>6- You will find a sample here in
Workspace : ralab
User : nicolette
Password : abc123
Application 33791 - TestDropDownAppBuilderTabs
If the post completes your solution mark it as correct and the question as answered, otherwise, mark it as helpful.
Best Regards
Mahmoud

How to get rid of the line encasing the left hand side of a vertical spry menu?

Hi,
I have created a vertical spry menu bar. It all works but there is a line like this [ encasing the left hand side of the menu. Does anyone know how to get rid of this?
Thanks!

Line 73 in your Spry css calls for a border
ul.MenuBarVertical{
border: 1px solid #ccc;
Either remove the rule or change the #ccc to #fff

Help with vertical spry menu bar submenu displaying incorrectly!

I’m new to Dreamweaver and am learning as I go. I am having a problem with the vertical spry menu bar submenu in the Live View. When I scroll over the spry menu bar option that has a submenu, the submenu appears in the upper right hand corner of my screen. (My menu bar is going down the left hand side.) However, when I preview it in Internet Explorer it looks fine after I allow the Java Script to run or the Active X controls, which my browser usually automatically blocks. (The browser just displays a small message along the top and I click on it to allow it.) To get it to do this much, I had to play around with the CSS for the spry menu bar a little bit.
Before, when I clicked on the Live View option, a small message ran along the top in Dreamweaver saying it couldn’t find the Flash Plugin and asked me to download the most recent FlashPlayer, which I did twice. It continued to say that and then I just closed that message that kept popping up, but I think that has something to do with the problem. I then researched that problem in the Spry Framework Help and Dreamweaver Help, but couldn’t find a solution that worked. (Someone had posted a link for downloading the Flash Player for Netscape Navigator, but that didn’t seem to do anything.)
Please also note that I am using one of Dreamweaver’s pre-built layouts. I don’t know if that makes a difference with this problem.
How do I fix this problem so that it displays correctly in the LiveView? And will the message that I get on my browser about allowing blocked content appear on other people’s computer when they open my website?

IE is a big problem child among browsers. Don't use it as your default browser.
For best results, build your site to display & perform well in the web standards browsers like Firefox, Chrome, Safari & Opera. If it works in one, it should work pretty much the same in all of them.
After you're satisfied with how your site looks in the good browsers, then test in IE. If needed, add hacks or conditional comments to make IE behave. There are many web sites that discuss known bugs in IE and how to work around them.
Lastly, the active X nag screens only appear locally. Once deployed on the remote server, you won't see them.
For better answers to your layout questions, we need to see your page. Can you post a URL?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

CSS - Vertical Dropdown Menu

Similar Messages

Maybe you are looking for