6 Replies Latest reply: Apr 29, 2012 2:41 PM by Nancy O. RSS

    Question regarding Drop Down Menu options

    alexisonsmith3

      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

        • 1. Re: Question regarding Drop Down Menu options
          sudarshan.t CommunityMVP

          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

          • 2. Re: Question regarding Drop Down Menu options
            sudarshan.t CommunityMVP

            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

            • 3. Re: Question regarding Drop Down Menu options
              alexisonsmith3 Community Member

              I am trying to preview my website in Chrome however it seems that the website is only taking up the central portion of the page and leaving two gaps either side. Below is my code:

              @charset "utf-8";

              /* CSS Document */

               

               

              article, aside, figure, footer, header, nav, section {

                  display: block;

              }

              body {

                        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                        color: #000;

                        background-color: #CFF;

                        margin: 0px;

                        padding: 0px;

              }

              #container {

                        width: 840px;

                        margin-top: 0px;

                        margin-right: auto;

                        margin-bottom: 0px;

                        margin-left: auto;

              }

              #Logo {

                        background-image: url(pictures/Logo_2.png);

                        background-repeat: no-repeat;

                        height: 80px;

                        width: 100%;

              }

              #Logo hgroup {

                        position: absolute;

                        top: -500px;

              }

              nav {

                        padding-top: 100px;

              }

              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: 2px 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);

              }

              #maincontent {

                        margin-top: 40px;

                        padding-top: 10px;

                        padding-right: 0px;

                        padding-bottom: 10px;

                        padding-left: 0px;

              }

              #vision {

                        font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;

                        font-size:32px;

                        font-weight:bold;

                        line-height:1.2;

                        background-image:url(../images/lrg_hero.jpg);

                        background-repeat:no-repeat;

                        width: 409px;

                        height:60px;

                        padding:60px 370px 0 40px;

                        margin-bottom:20px;

              }

              .pod {

                        background: #cff;

                        padding: 5px;

                        width: 244px;

                        float:left;

                        margin-right: 13px;

              }

              .podContent {

                        margin-top:10px;

                        width: 244px;

                        height:181px;

                        overflow:hidden;

              }

              .pod h1 {

                        background: #CCC;

                        color: #000;

                        padding:5px;

                        background-position:95%;

                        font-size:16px;

                        font-weight:normal;

                        margin: 0 0 13px 0;

              }

              a.block {

                        text-decoration:none;

                        display:block;

              }

              footer {

                        padding: 10px 0;

                        clear:both;

                        color: #fff;

              }

              footer p {

                        margin:0 0 5px 0;

              }

              #phone {

                        font-weight:bold;

                        color: #000;

              }

              #facebookTwitter {

                        float:right;

                        margin-right:25px;

              }

               

              Can you see something wrong?

               

              Thanks

              • 4. Re: Question regarding Drop Down Menu options
                Nancy O. CommunityMVP

                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/

                • 5. Re: Question regarding Drop Down Menu options
                  alexisonsmith3 Community Member

                  how would I keep it to the left and keep the right free.Would I just change margin-left to 0px?

                  • 6. Re: Question regarding Drop Down Menu options
                    Nancy O. CommunityMVP

                    If that's what you want, yes.

                     

                     

                    Nancy O.