www.webdeveloper.com
Results 1 to 8 of 8

Thread: adding second drodown to a exsisting drop down menu

Hybrid View

  1. #1
    Join Date
    Sep 2012
    Posts
    48

    adding second drodown to a exsisting drop down menu

    i have a drop down menu called Destination. under it i have a tab called North America. i would like to add a drop down to it and the others that follow.

    http://www.cjwebconsulting.com/joey/index.html

    Screen shot 2012-11-18 at 11.57.32 AM.jpg

  2. #2
    Join Date
    Oct 2012
    Posts
    78
    Do you have the stylesheet (CSS) that goes with the HTML? Please post it.

  3. #3
    Join Date
    Sep 2012
    Posts
    48
    body {
    font-family:arial,helvetica,sans-serif;
    font-size:19px;
    background-color:#FFF;
    overflow-y:scroll;
    }
    #container {
    width:784px;
    margin:auto;
    }
    #banner {
    width:780px;
    height:135px;
    }

    /* menu starts */

    #navigation {
    height:21px;
    padding:3px 0 10px 10px;
    background-color:#FFF;
    background-repeat:no-repeat;
    background-position:100% 1px;
    }
    #navigation ul {
    margin:0;
    padding:0;
    list-style:none;
    }
    #navigation ul li {
    position:relative;
    float:left;
    }
    #navigation li ul {
    display:none;
    }
    #navigation ul li a {
    display:block;
    line-height:26px;
    text-decoration:none;
    color:#000;
    border-top:1px solid #fff;
    padding:0 14px;
    background: #FFF;
    margin-left:1px;
    white-space:nowrap;
    }
    #navigation ul li a:hover {
    color:#FFF;
    background:#000;
    }
    #navigation li:hover ul {
    position:absolute;
    display:block;
    }
    #navigation li:hover li {
    float:none;
    font-size:18px;
    }
    #navigation li:hover a {
    background:#FFF;
    }
    #navigation li:hover li a:hover {
    background: #000;
    }


    /* menu ends */

    h2 {
    clear:both;
    padding:40px 0 0 0;
    margin:0;
    font-size:26px;
    text-align:center;
    }
    h3 {
    clear:both;
    padding:20px 0 10px 20px;
    margin:0;
    border-bottom:3px solid #333;
    font-size:24px;

    }
    .states {
    float:left;
    width:260px;
    padding:19px 0 0;
    margin:0;
    list-style-type:none;
    font-size:18px;
    }
    .states li {
    margin-bottom:17px;
    }
    .states a, #footer a {
    font-weight:bold;
    color:#009;
    }
    #comments-form {
    width:385px;
    padding:30px 20px 20px;
    margin:32px auto 0;
    border:1px solid #999;
    box-shadow:6px 6px 6px #688;
    }
    #comments-form div {
    clear:both;
    padding-bottom:5px;
    overflow:hidden;
    }
    #comments-form label {
    float:left;
    width:150px;
    font-size:16px;
    }
    #comments-form input {
    float:left;
    }
    #comments-form #sub {
    float:none;
    display:block;
    margin:auto;
    }
    #top {
    position:fixed;
    line-height:53px;
    padding:0 20px 0 10px;
    top:225px;
    left:0;
    font-size:19px;
    color:#000;
    text-align:center;
    text-decoration:none;
    background-color:#fff;
    border:5px solid #000;
    border-left:0;
    border-radius:0 26px 26px 0;
    box-shadow:6px 6px 6px #688;
    }
    #footer {
    padding:26px 0 17px;
    clear:both;
    font-size:11px;
    font-weight:bold;
    text-align:center;
    }

  4. #4
    Join Date
    Oct 2012
    Posts
    78
    Is this along the lines of what you want?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    
    <style type="text/css">
       body{padding:20px; font-size:14px; color:#000000; font-family:Arial, Helvetica, sans-serif;}
       h2 {font-weight:bold; color:#000099; margin:10px 0px; }
       p span {color:#006600; font-weight:bold; }
       a, a:link, a:visited {color:#0000FF;}
       textarea {width: 100%; padding: 10px; margin: 10px 0 15px 0; font-size: 13px; font-family: Consolas,monospace;}
       textarea.html {height: 300px;}
       p {margin: 0 0 10px 0;}
       code, pre {font-family: Consolas,monospace; color: green;}
       ol li {margin: 0 0 15px 0;}
    </style>
    </head>
    <body>
    <style type="text/css">#cssmenu ul,
    #cssmenu li,
    #cssmenu span,
    #cssmenu a {
      margin: 0;
      padding: 0;
      position: relative;
    }
    #cssmenu {
      height: 49px;
      border-radius: 5px 5px 0 0;
      -moz-border-radius: 5px 5px 0 0;
      -webkit-border-radius: 5px 5px 0 0;
      background: #141414;
      background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
      background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
      background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
      background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
      background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
      filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
      border-bottom: 2px solid #0fa1e0;
    }
    #cssmenu:after,
    #cssmenu ul:after {
      content: '';
      display: block;
      clear: both;
    }
    #cssmenu a {
      background: #141414;
      background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
      background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
      background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
      background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
      background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
      filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
      color: #ffffff;
      display: inline-block;
      font-family: Helvetica, Arial, Verdana, sans-serif;
      font-size: 12px;
      line-height: 49px;
      padding: 0 20px;
      text-decoration: none;
    }
    #cssmenu ul {
      list-style: none;
    }
    #cssmenu > ul {
      float: left;
    }
    #cssmenu > ul > li {
      float: left;
    }
    #cssmenu > ul > li:hover:after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      left: 50%;
      bottom: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #0fa1e0;
      margin-left: -10px;
    }
    #cssmenu > ul > li:first-child a {
      border-radius: 5px 0 0 0;
      -moz-border-radius: 5px 0 0 0;
      -webkit-border-radius: 5px 0 0 0;
    }
    #cssmenu > ul > li:last-child a {
      border-radius: 0 5px 0 0;
      -moz-border-radius: 0 5px 0 0;
      -webkit-border-radius: 0 5px 0 0;
    }
    #cssmenu > ul > li.active a {
      box-shadow: inset 0 0 3px #000000;
      -moz-box-shadow: inset 0 0 3px #000000;
      -webkit-box-shadow: inset 0 0 3px #000000;
      background: #070707;
      background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
      background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
      background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
      background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
      background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
      filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
    }
    #cssmenu > ul > li:hover > a {
      background: #070707;
      background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
      background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
      background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
      background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
      background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
      filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
      box-shadow: inset 0 0 3px #000000;
      -moz-box-shadow: inset 0 0 3px #000000;
      -webkit-box-shadow: inset 0 0 3px #000000;
    }
    #cssmenu .has-sub {
      z-index: 1;
    }
    #cssmenu .has-sub:hover > ul {
      display: block;
    }
    #cssmenu .has-sub ul {
      display: none;
      position: absolute;
      width: 200px;
      top: 100%;
      left: 0;
    }
    #cssmenu .has-sub ul li {
      *margin-bottom: -1px;
    }
    #cssmenu .has-sub ul li a {
      background: #0fa1e0;
      border-bottom: 1px dotted #6fc7ec;
      filter: none;
      font-size: 11px;
      display: block;
      line-height: 120%;
      padding: 10px;
    }
    #cssmenu .has-sub ul li:hover a {
      background: #0c7fb0;
    }
    #cssmenu .has-sub .has-sub:hover > ul {
      display: block;
    }
    #cssmenu .has-sub .has-sub ul {
      display: none;
      position: absolute;
      left: 100%;
      top: 0;
    }
    #cssmenu .has-sub .has-sub ul li a {
      background: #0c7fb0;
      border-bottom: 1px dotted #6db2d0;
    }
    #cssmenu .has-sub .has-sub ul li a:hover {
      background: #095c80;
    }
    </style>
    <div id='cssmenu'>
    <ul>
       <li><a href='#'><span>Home</span></a></li>
       <li class='has-sub '><a href='#'><span>Destination</span></a>
          <ul>
             <li class='has-sub '><a href='#'><span>South America</span></a>
                <ul>
                   <li><a href='#'><span>Canada</span></a></li>
                   <li><a href='#'><span>Canada</span></a></li>
                </ul>
             </li>
             <li class='has-sub '><a href='#'><span>Central America</span></a>
                <ul>
                   <li><a href='#'><span>Texas</span></a></li>
                   <li><a href='#'><span>Ohio</span></a></li>
                </ul>
             </li>
    		 <li class='has-sub '><a href='#'><span>South America</span></a>
                <ul>
                   <li><a href='#'><span>Texas</span></a></li>
                   <li><a href='#'><span>Ohio</span></a></li>
                </ul>
             </li>
    	  <li class='has-sub '><a href='#'><span>Europe</span></a>
                <ul>
                   <li><a href='#'><span>England</span></a></li>
                   <li><a href='#'><span>Spain</span></a></li>
                </ul>
             </li>
    		 <li class='has-sub '><a href='#'><span>Carribean</span></a>
                <ul>
                   <li><a href='#'><span>Jamica</span></a></li>
                   <li><a href='#'><span>Tropicano</span></a></li>
                </ul>
             </li>
    		 <li class='has-sub '><a href='#'><span>Africa</span></a>
                <ul>
                   <li><a href='#'><span>Uganda</span></a></li>
                   <li><a href='#'><span>South Africa</span></a></li>
    			   <li><a href='#'><span>Eygpt</span></a></li>
                </ul>
             </li>
    		 </ul>
       </li>
       <li><a href='#'><span>Resources</span></a></li>
       <li><a href='#'><span>Comments</span></a></li>
       <li><a href='#'><span>Contact</span></a></li>
    </ul>
    </div>
    <div style="clear:both; margin: 0 0 30px 0;">&nbsp;</div>
    </body>
    </html>

  5. #5
    Join Date
    Sep 2012
    Posts
    48
    Yes it is. For the drop downs, Can I put a black boarder and black text. People with vision impairments would find it easyer.

  6. #6
    Join Date
    Oct 2012
    Posts
    78
    Yeah sure just edit the colours in the css.

  7. #7
    Join Date
    Sep 2012
    Posts
    48
    Thanks very much. I have been fighting with this for about a month lol.

  8. #8
    Join Date
    Sep 2012
    Posts
    48
    I'm getting closer. I'm having trouble trying to change text color to white on hover, and changing the blue to what.

    http://www.cjwebconsulting.com/test/index.html

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles