2 Replies Latest reply: Nov 18, 2013 11:51 AM by Nancy O. RSS

    How do I create a sub menu using my existing navigation bar?

    Noradc Community Member

      Hello.  I would like to know how to create a sub menu.  After having created the horizontal navigation bar, I decided that I would like to add more links usng the existing navigation bar.  In the navigation bar, I have the following...

      "Home" "Digital" "Drawing" "Painting" "About"

       

      When the mouse rolls over the "Painting" link, I would like to have listed vertically underneath it "Watercolor" and "Oil" as two additional links.  I would appreciate your assistance.  Thank you.

       

      My html and css code is as follows;

       

      html:

       

      <body>

      <div class="nav">
          <ul>
              <li class="active" id="active"><a href="index.html" target="_self">HOME</a></li>
             
           <li> <a href="digital.html" target="_self">DIGITAL</a></li>
             
            <li><a href="drawing.html" target="_self">DRAWING</a></li>
           
            <li><a href="painting.html" target="_self">PAINTING</a></li>
             
            <li><a href="about.html" target="_self">ABOUT</a></li>
          </ul>
      </div>

      </body>

       

       

      css:

       

      .nav {
          width: 960px;
          height: 43px;
          margin-top: 46px;
          font-size: 18.5px;
          z-index: 5;
          font-family: Arial, Helvetica, sans-serif;
          background-color: #000;
      }

       

      ul{
          list-style-type: none;
          text-align: right;
          padding-top: 10px;
          padding-bottom: 6px;
          padding-right: 0px;
      }

       


      li {
          display: inline;
      }

       


      a:link {
         
          color: #FFF;
          background-color: #000;
          text-align: center;
          padding-top: 8px;
          padding-right: 9.7px;
          padding-bottom: 8px;
          padding-left: 9.7px;
          margin-left: -2px;
          text-decoration: none;
          outline: 0;
          
      }

       

      a:visited {
          color: #FFF;
          background-color: #000;
          text-decoration: none 
      }

       


      a:hover {
          color: #000;
          background-color: #FFF;
          text-decoration: none;
             
      }

       

      .active a {
          display:inline;
          color: #000;
          background-color: #FFF;
          text-decoration: none;
      }