Skip navigation
Currently Being Moderated

Question regarding Drop Down Menu options

Apr 29, 2012 9:16 AM

Tags: #cs5 #dreamweaver #css

Hi,

 

I have already got a horizontal navigational bar. I am now trying to add a drop down meny to this whilst keep the same style which I have been using so far. Below is my code for my navigation menu

 

nav {

          padding-top: 150px;

}

ul {

    padding:0;

    margin:0;

}

nav ul {

    list-style: none;

    margin-bottom: 15px;

    font-weight: bold;

    font-size:20px;

}

nav ul li {

          float: left;

          -webkit-transition-duration:.1s;

          -webkit-transition-property:margin-top;

          -webkit-transition-timing-function:ease-in-out;

          -o-transition-duration:.1s;

          -o-transition-property:margin-top;

          -o-transition-timing-function:ease-in-out;

          -moz-transition-duration:.1s;

          -moz-transition-property:margin-top;

          -moz-transition-timing-function:ease-in-out;

          transition-duration:.1s;

          transition-property:margin-top;

          transition-timing-function:ease-in-out;

}

 

 

nav ul a {

    display: block;

    width:140px;

    padding: 10px;

    text-align:center;

    text-decoration: none;

    color: #fff;

    border: 1px solid #618A37;

    margin: 5px 0px;

          -moz-border-radius:6px;

          -webkit-border-radius:6px;

          border-radius:6px;

          -moz-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;

          -webkit-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;

          box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;

    text-shadow: rgba(0,0,0,0.8) 1px 1px 1px;

}

nav ul a:link, nav ul a:visited {

          background: rgba(255,255,255,0.2);

}

nav ul a:hover, nav ul a:active, nav ul a:focus {

          background: rgba(255,255,255,0.4);

}

 

Thanks,

 

Alexisonsmith

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 29, 2012 9:28 AM   in reply to alexisonsmith3

    Check out Spry Dropdown in Dreamweaver. You could insert a new Spry Horizontal Dropdown and copy/ paste your existing style to it under the Spry's CSS file.

     

    In Dreamweaver, Insert > Spry > Spry Menu Bar

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 29, 2012 9:32 AM   in reply to Sudarshan Thiagarajan

    Or if you want to use your existing code and build a custom menu, you can check out Superfish at http://archive.plugins.jquery.com/project/Superfish

     

    I've used this in one of my company's websites at www.forwardfocus.in

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 29, 2012 1:09 PM   in reply to alexisonsmith3

    Right.  Your #container is centered on screen by this CSS rule:

     

    #container {

              width: 840px;

              margin-top: 0px;

              margin-right: auto;

              margin-bottom: 0px;

              margin-left: auto; 

    }

     

     

    If not centered on screen, then what did you have in mind?

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 29, 2012 2:41 PM   in reply to alexisonsmith3

    If that's what you want, yes.

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points