<< Vegas Web & Dreamweaver User Group public

Discussion Area

ask questions, discuss topics, solve problems

This is a public Discussion Area  publicRSS

Thread

    • Hi all New to the group
      Thread posted 12/19/08 by PFiction3
      348 Views, 2 Comments
      Title:
      Hi all New to the group
      Content:

      Hi all, I am an IT manager at a credit union in town and a intermidiate level user of dreamweaver and it's brotheren. I do have a problem that i could use help on. I built a strickly CSS based Horizontal menu with submenus. The code ofr HTML and CSS are below. The problem is I have a 1 pixel gap in the sub menus... the background does not fill all the way except when you hover over the item. Can't see where it needs fixin.

      Code Snippet:

    Comments

    • first look....IE7 doesn't show submenu...only menu without dropdown

    • here's the css code that corrects all stuff:

      @charset "utf-8";
      /* CSS Document */

      #nav_bar {
          background: #6666CC;
          border-top: 1px solid #003255;
          border-bottom: 1px solid #003255;
          width: 100%;
      }
      #nav_bar ul {
          margin: 0px;
          padding: 0px;
      }
      #nav_bar li {
          float:left;
          position:relative;
          list-style-type:none;
          display: block;
          border-right-width: 1px;
          border-right-style: solid;
          border-right-color: #003255;
      }


      /*#nav_bar li:first-child {
          border-left: 1px solid #003255;
      }*/
      #nav_bar li:hover {
          background: #003255;
      }
      #nav_bar a {
          text-decoration: none;
          color: #FFFFFF;
          display: block;
          padding: 5px 5px;
      }
      #nav_bar a:hover {
          color: #FFFF99;
          text-decoration: underline;
          background: #003255;
      }
      #nav_bar ul li:hover ul {
          display:block;
      }
      #nav_bar ul li ul {
          display: none;
          background: #6666CC;
          width: 9em;
          position: absolute;
          border-right-width: 1px;
          border-right-style: solid;
          border-right-color: #003255;   
      }
      #nav_bar ul li ul li {
          border-right: 1px solid #003255;
          border-bottom: 1px solid #003255;
          /*border-left: 1px solid #003255;*/
          width: 100%;
      }

      #nav_bar ul li ul li:first-child {
          border-top: 1px solid #003255;
      }

      Some of the lines in code has comments, so they are disabled, fot example code for:

      /*#nav_bar li:first-child {
          border-left: 1px solid #003255;
      }*/

      Now, I+m gonna solve IE7 problem