Results 1 to 2 of 2

Thread: Dropdown Menu Always Down

  1. #1
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default Dropdown Menu Always Down

    I have a website that I am building. To the right I have the menu icon. I want to click on it and have the menu drop down. The problem that I am having is that the menu is always down. I want to click on it to dropdown, then click again to hide. Any help is appreciated. Thank you. The link...
    www.davidschure.com/demo
    The CSS
    Code:
    #cssmenu,
    #cssmenu ul,
    #cssmenu li,
    #cssmenu a {
      border: none;
      line-height: 1;
      margin: 0;
      padding: 0;
    }
    #cssmenu {
      position: fixed;
        top: 20px;
        right: 30px;
        height: 5px; 
        width:30px;
    	border-bottom: 17px double white; 
        border-top: 6px solid white; 
        content:"";
    }
    #cssmenu > ul {
      list-style: inside none;
      margin: 0;
      padding: 0;
    }
    #cssmenu > ul > li {
      list-style: inside none;
      float: left;
      display: inline-block;
      position: relative;
      margin: 0;
      padding: 0;
    }
    #cssmenu.align-center > ul {
      text-align: center;
    }
    #cssmenu.align-center > ul > li {
      float: none;
      margin-left: -3px;
    }
    #cssmenu.align-center ul ul {
      text-align: left;
    }
    #cssmenu.align-center > ul > li:first-child > a {
      border-radius: 0;
    }
    #cssmenu > ul > li > a {
      outline: none;
      display: block;
      position: relative;
      text-align: center;
      text-decoration: none;
      text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
      font-weight: 700;
      font-size: 13px;
      font-family: Arial, Helvetica, sans-serif;
      border-right: 1px solid #080808;
      color: #ffffff;
      padding: 12px 20px;
    }
    #cssmenu > ul > li:first-child > a {
      border-radius: 5px 0 0 5px;
    }
    #cssmenu > ul > li > a:after {
      content: "";
      position: absolute;
      border-right: 1px solid;
      top: -1px;
      bottom: -1px;
      right: -2px;
      z-index: 99;
      border-color: #3c3c3c;
    }
    #cssmenu ul li.has-sub:hover > a:after {
      top: 0;
      bottom: 0;
    }
    #cssmenu > ul > li.has-sub > a:before {
      content: "";
      position: absolute;
      top: 18px;
      right: 6px;
      border: 5px solid transparent;
      border-top: 5px solid #ffffff;
    }
    #cssmenu > ul > li.has-sub:hover > a:before {
      top: 19px;
    }
    #cssmenu > ul > li.has-sub:hover > a {
      padding-bottom: 14px;
      z-index: 999;
      border-color: #3f3f3f;
    }
    #cssmenu ul li.has-sub:hover > ul,
    #cssmenu ul li.has-sub:hover > div {
      display: block;
    }
    #cssmenu > ul > li.has-sub > a:hover,
    #cssmenu > ul > li.has-sub:hover > a {
      background: #3f3f3f;
      border-color: #3f3f3f;
    }
    #cssmenu ul li > ul,
    #cssmenu ul li > div {
      display: none;
      width: auto;
      position: absolute;
      top: 38px;
      background: #3f3f3f;
      border-radius: 0 0 5px 5px;
      z-index: 999;
      padding: 10px 0;
    }
    #cssmenu ul li > ul {
      width: 200px;
    }
    #cssmenu ul ul ul {
      position: absolute;
    }
    #cssmenu ul ul li:hover > ul {
      left: 100%;
      top: -10px;
      border-radius: 5px;
    }
    #cssmenu ul li > ul li {
      display: block;
      list-style: inside none;
      position: relative;
      margin: 0;
      padding: 0;
    }
    #cssmenu ul li > ul li a {
      outline: none;
      display: block;
      position: relative;
      font: 10pt Arial, Helvetica, sans-serif;
      color: #ffffff;
      text-decoration: none;
      text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
      margin: 0;
      padding: 8px 20px;
    }
    #cssmenu,
    #cssmenu ul ul > li:hover > a,
    #cssmenu ul ul li a:hover {
      background: #3c3c3c;
      background: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3c3c3c), color-stop(100%, #222222));
      background: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);
      background: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%);
      background: -ms-linear-gradient(top, #3c3c3c 0%, #222222 100%);
      background: linear-gradient(top, #3c3c3c 0%, #222222 100%);
    }
    #cssmenu > ul > li > a:hover {
      background: #080808;
      color: #ffffff;
    }
    #cssmenu ul ul a:hover {
      color: #ffffff;
    }
    #cssmenu > ul > li.has-sub > a:hover:before {
      border-top: 5px solid #ffffff;
    }
    The HTML
    HTML Code:
    <div id='cssmenu'>
    <ul>
       <li><a href='#'><span>Home</span></a></li>
       <li><a href='#'><span>About</span></a></li>
       <li><a href='#'><span>Portfolio</span></a></li>
       <li class='last'><a href='#'><span>Contact</span></a></li>
    </ul-->
    </div>

  2. #2
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default Problem solved.

    Quote Originally Posted by DS928 View Post
    I have a website that I am building. To the right I have the menu icon. I want to click on it and have the menu drop down. The problem that I am having is that the menu is always down. I want to click on it to dropdown, then click again to hide. Any help is appreciated. Thank you. The link...
    www.davidschure.com/demo
    The CSS
    Code:
    #cssmenu,
    #cssmenu ul,
    #cssmenu li,
    #cssmenu a {
      border: none;
      line-height: 1;
      margin: 0;
      padding: 0;
    }
    #cssmenu {
      position: fixed;
        top: 20px;
        right: 30px;
        height: 5px; 
        width:30px;
    	border-bottom: 17px double white; 
        border-top: 6px solid white; 
        content:"";
    }
    #cssmenu > ul {
      list-style: inside none;
      margin: 0;
      padding: 0;
    }
    #cssmenu > ul > li {
      list-style: inside none;
      float: left;
      display: inline-block;
      position: relative;
      margin: 0;
      padding: 0;
    }
    #cssmenu.align-center > ul {
      text-align: center;
    }
    #cssmenu.align-center > ul > li {
      float: none;
      margin-left: -3px;
    }
    #cssmenu.align-center ul ul {
      text-align: left;
    }
    #cssmenu.align-center > ul > li:first-child > a {
      border-radius: 0;
    }
    #cssmenu > ul > li > a {
      outline: none;
      display: block;
      position: relative;
      text-align: center;
      text-decoration: none;
      text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
      font-weight: 700;
      font-size: 13px;
      font-family: Arial, Helvetica, sans-serif;
      border-right: 1px solid #080808;
      color: #ffffff;
      padding: 12px 20px;
    }
    #cssmenu > ul > li:first-child > a {
      border-radius: 5px 0 0 5px;
    }
    #cssmenu > ul > li > a:after {
      content: "";
      position: absolute;
      border-right: 1px solid;
      top: -1px;
      bottom: -1px;
      right: -2px;
      z-index: 99;
      border-color: #3c3c3c;
    }
    #cssmenu ul li.has-sub:hover > a:after {
      top: 0;
      bottom: 0;
    }
    #cssmenu > ul > li.has-sub > a:before {
      content: "";
      position: absolute;
      top: 18px;
      right: 6px;
      border: 5px solid transparent;
      border-top: 5px solid #ffffff;
    }
    #cssmenu > ul > li.has-sub:hover > a:before {
      top: 19px;
    }
    #cssmenu > ul > li.has-sub:hover > a {
      padding-bottom: 14px;
      z-index: 999;
      border-color: #3f3f3f;
    }
    #cssmenu ul li.has-sub:hover > ul,
    #cssmenu ul li.has-sub:hover > div {
      display: block;
    }
    #cssmenu > ul > li.has-sub > a:hover,
    #cssmenu > ul > li.has-sub:hover > a {
      background: #3f3f3f;
      border-color: #3f3f3f;
    }
    #cssmenu ul li > ul,
    #cssmenu ul li > div {
      display: none;
      width: auto;
      position: absolute;
      top: 38px;
      background: #3f3f3f;
      border-radius: 0 0 5px 5px;
      z-index: 999;
      padding: 10px 0;
    }
    #cssmenu ul li > ul {
      width: 200px;
    }
    #cssmenu ul ul ul {
      position: absolute;
    }
    #cssmenu ul ul li:hover > ul {
      left: 100%;
      top: -10px;
      border-radius: 5px;
    }
    #cssmenu ul li > ul li {
      display: block;
      list-style: inside none;
      position: relative;
      margin: 0;
      padding: 0;
    }
    #cssmenu ul li > ul li a {
      outline: none;
      display: block;
      position: relative;
      font: 10pt Arial, Helvetica, sans-serif;
      color: #ffffff;
      text-decoration: none;
      text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
      margin: 0;
      padding: 8px 20px;
    }
    #cssmenu,
    #cssmenu ul ul > li:hover > a,
    #cssmenu ul ul li a:hover {
      background: #3c3c3c;
      background: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3c3c3c), color-stop(100%, #222222));
      background: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);
      background: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%);
      background: -ms-linear-gradient(top, #3c3c3c 0%, #222222 100%);
      background: linear-gradient(top, #3c3c3c 0%, #222222 100%);
    }
    #cssmenu > ul > li > a:hover {
      background: #080808;
      color: #ffffff;
    }
    #cssmenu ul ul a:hover {
      color: #ffffff;
    }
    #cssmenu > ul > li.has-sub > a:hover:before {
      border-top: 5px solid #ffffff;
    }
    The HTML
    HTML Code:
    <div id='cssmenu'>
    <ul>
       <li><a href='#'><span>Home</span></a></li>
       <li><a href='#'><span>About</span></a></li>
       <li><a href='#'><span>Portfolio</span></a></li>
       <li class='last'><a href='#'><span>Contact</span></a></li>
    </ul-->
    </div>

    This fixed it.
    HTML Code:
    <script>
    $(function(){
          $("#cssmenu").click(function(){
          $("#cssmenu > ul").slideToggle()
    })
    })
    </script>
    
    Also add to #cssmenu > ul {...} - margin-top:20px

  3. The Following User Says Thank You to DS928 For This Useful Post:

    kplusonline (08-25-2014)

Similar Threads

  1. Smooth Navigational Menu (v2.0) : vertical menu and dropdown list hidden
    By pepitr in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-17-2013, 08:04 PM
  2. chrome dropdown menu dropdown indicator
    By berdman in forum CSS
    Replies: 21
    Last Post: 03-02-2013, 09:37 AM
  3. Replies: 1
    Last Post: 02-23-2011, 06:54 PM
  4. Replies: 0
    Last Post: 10-01-2010, 11:07 PM
  5. dropdown tabs menu inside dropdown tabs menu
    By mcolton in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 07-04-2009, 12:40 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •