Skip to main content
K
Kevin E.
Inspiring
April 30, 2017
Answered

Drop down menu (vertical)

  • April 30, 2017
  • 1 reply
  • 2780 views

I needed to add a dropdown navigation menu to a website. I used a code that I found that I believe came from Nancy O and it worked well. However, I would like for it to be a vertical dropdown instead of horizontal. Do you know what I would change in the code? The site and code is below. Thanks.

http://new.adtsrc.org​

CSS Code:

/* BEGIN HORIZONTAL DROP-MENU */

#navbar{
position:relative;
width: 100%;
margin: 0 0 0 45px; /**adjust as needed**/
padding:0;
text-align:center;
}

#navbar li {
list-style: none;
font-size: 12px;
float: left;
text-align:center;
}

/**top level menu**/

#navbar li a, #navbar li a:visited {
display: block;
text-decoration: none;
margin-right: 12px; /* space between links */
color: #FFF;
width: 9em; /* adjust as needed or use auto */
padding: 8px;
font-weight:bold;
line-height: 1.50em;
background: #C33;/* for older browsers */
/**CSS gradients for various browsers**/
background: -moz-linear-gradient(#C33, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #C33));
background: -webkit-linear-gradient(#C33, #111);
background: -o-linear-gradient(#C33, #111);
background: -ms-linear-gradient(#C33, #111);
background: linear-gradient(#C33, #111);
/* gradient filters for IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C33333', endColorstr='#111111',GradientType=0 );
}

/**top menu style on mouse over**/

#navbar li:hover > a {
color: #FFF;
}

/**sub-menu**/

#navbar li ul {
display: none;
text-align:center;
margin:0;
padding:0 1em;
}

#navbar li:hover ul,
#navbar li.hover ul {
display: block;
position: absolute;
padding: 0;
}

#navbar li:hover li,
#navbar li.hover li {
float: left;}

/**drop-menu style**/

#navbar li:hover li a, #navbar li.hover li a {
color: #0D207D;
width: auto; /* adjust width as needed or use auto */
background: none;
filter:none:
}

/**drop-menu style on mouse over**/

#navbar li li a:hover {
color: #990000;
text-decoration:underline;
}

/* Clear floated elements at the end*/

#navbar:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

/**END HORIZONTAL DROP-MENUS STYLES**/

[an error occurred while processing this directive]

HTML Code:

<ul id="navbar">
<li><a href="#">ABOUT US &#9660;</a><ul>
<li><a href="#">Videos</a></li>
<li><a href="#">Newsletter</a></li></ul>
</li>
<li><a href="#">PRODUCTS &#9660;</a><ul>
<li><a href="#">Broken Glass</a></li>
<li><a href="#">Mosaic Tiles</a></li>
<li><a href="#">Adhesives</a></li>
<li><a href="#">Grout</a></li></ul>
</li>
<li><a href="#">ACCESSORIES &#9660;</a><ul>
<li><a href="#">Gloves</a></li>
<li><a href="#">Rubber Mallets</a></li>
<li><a href="#">Sponges</a></li>
<li><a href="#">Safety Glasses</a></li></ul>
</li>
<li><a href="#">CONTACT</a></li>
</ul> <!--end navbar-->

      This topic has been closed for replies.
      Correct answer osgood_

      It's up now.


      Frankly, I don't do websites very often...this is more of a favor for a client that I do mostly print and other marketing with. Since I don't do sites very often, it is almost like learning site development each time I do one. In this case, I hadn't used my Dreamweaver CC yet (my last site was CS4 or 5) so I am getting a lot of pleasant and not-so-pleasant surprises.

      Regarding bootstrap...I had never heard of it until I started looking through the menus and came across it. I tried using it to add drop down down menu buttons, but when I went to change the color of the buttons, it would not let me save the bootstrap file under the same name. I saved it under a different name, but then couldn't figure out how to connect it to the html page, even perusing my new copy of Dreamweaver CC for Dummies! :-)


      How efficient are you at copying and pasting? Below is your complete navigation menu using jQuery/css - its mobile friendly as well. You should be able to copy the html and replace it where you current navigation code is. Copy the css and paste it at the end of your css file and copy the block of jQuery <script></script> and paste it in your page directly before the closing </head> tag. Obviously the jQuery needs to be included on each page that the menu is on so it's best to make a .js file and link to it.

      <!DOCTYPE html>

      <html>

      <head>

      <meta charset="UTF-8" />

      <title>Drop Menu</title>

      <style>

      .main-navigation-wrapper {

      background-color: #BBB65B;

      }

      .main-navigation {

      margin: 0;

      padding: 25px 40px;

      display: flex;

      flex-wrap: wrap;

      justify-content: center;

      font-size: 20px;

      line-height: 30px;

      }

      .main-navigation li {

      margin: 0;

      padding: 0;

      list-style: none;

      position: relative;

      text-align: center;

      width: 16.66%;

      }

      .main-navigation a {

      text-decoration: none;

      color: #fff;

      display: block;

      text-align: center;

      }

      .main-navigation .drop-menu {

      position: absolute;

      top: 3em;

      left: 0;

      background-color: #BBB65B;

      margin: 0;

      padding: 0 0 10px 0;

      width: 100%;

      }

      .main-navigation .drop-menu li {

      width: 100%;

      font-size: 19px;

      line-height: 29px;

      }

      .main-navigation .drop-menu a {

      padding: 10px 15px;

      }

      .mobile-menu-icon {

      display: none;

      }

      @media screen and (max-width: 960px) {

      .main-navigation {

      display: none;

      }

      .mobile-menu-icon {

      display: block;

      text-align: right;

      color: #fff;

      padding: 25px 40px;

      font-size: 20px;

      }

      .main-navigation li {

      width: 100%;

      padding: 10px 0;

      }

      .main-navigation .drop-menu {

      position: static;

      }

      .main-navigation .drop-menu li {

      padding: 0;

      }

      </style>

      <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

      <script>

      $(document).ready(function(){

      //hide drop menu

      $('.drop-menu').hide();

      //show drop menu

      $('.main-navigation a').click(function(){

      $('.drop-menu').slideUp();                                    

      $(this).next('.drop-menu').slideToggle();

      });

      //hide drop menu on mouse leave

      $('.drop-menu').mouseleave(function(){

      $('.drop-menu').slideUp();                                    

      });

      // show mobile menu icon at 960px window width

      $('.mobile-menu-icon').css('cursor','pointer').click(function(){

      $('.main-navigation').slideToggle();

      });

      //realign main-naviagtion at 960px window width

      $(window).resize(function(){

      if ($(window).width() > 960) {

      $('.main-navigation').css('display', 'flex');

      }

      else if ($(window).width() < 960) {

      $('.main-navigation').css('display', 'none');

      }

      });

      });

      </script>

      </head>

      <body>

      <nav class="main-navigation-wrapper">

      <div class="mobile-menu-icon">MENU</div>

      <ul class="main-navigation">

      <li><a href="#">WHO WE ARE<br /> &#9660;</a>

      <ul class="drop-menu">

      <li><a href="#">ADTSRC Board</a></li>

      <li><a href="#">ADTSRC Staff</a></li>

      </ul>

      </li>

      <li><a href="#">WHAT WE DO<br /> &#9660;</a>

      <ul class="drop-menu">

      <li><a href="#">Subject 1</a></li>

      <li><a href="#">Subject 2</a></li>

      <li><a href="#">Subject 3</a></li>

      <li><a href="#">Subject 4</a></li></ul>

      </li>

      <li><a href="#">HOW TO HELP<br /> &#9660;</a>

      <ul class="drop-menu">

      <li><a href="#">Financial Suport</a></li>

      <li><a href="#">Volunteer</a></li>

      <li><a href="#">Community Partnerships</a></li>

      </ul>

      </li>

      <li><a href="#">NEWS AND EVENTS</a></li>

      <li><a href="#">CAREERS</a></li>

      <li><a href="#">CONTACT US</a></li>

      </ul> <!--end main-navigation-->

      </nav>

      <!-- end main-navigation-wrapper -->

      </body>

      </html>

      1 reply

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      April 30, 2017

      Fix your HTML & CSS errors first.  Then we can discuss layout issues.

      Showing results for http://new.adtsrc.org/ - Nu Html Checker

      W3C CSS Validator results for http://new.adtsrc.org/ (CSS level 3)

      Nancy

      Nancy O'Shea— Product User & Community Expert
      K
      Kevin E.Author
      Inspiring
      April 30, 2017

      Done...except I can't figure out what the parse error is for 129

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      April 30, 2017

      Look at your code.  What's missing?

      .container .left_article {

      padding-left: 5%;

      padding-right: 1%;

      text-align: justify;

      line-height: 24px;

      margin-top: 30px;

      margin-bottom: 15px;

      color: #B3B3B3;

      margin-left:

      }

      HINT:  there's no value.

      Nancy

      Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices