Web Analytics Made Easy -
StatCounter Adding a submenu can't get it to fall under the right header - CodingForum

Announcement

Collapse
No announcement yet.

Adding a submenu can't get it to fall under the right header

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Adding a submenu can't get it to fall under the right header

    Hi All! I will post this but shortly have to go hide from Hurricane Matthew so it may be Monday before I can get back.

    New to this but I have a site that I want to add a sub menu under the "About" main menu heading. There is already one main heading "Services" that has sub menus under it.

    I have successfully added the sub menu for About but my problem is when I hover over the About button the new sub menu shows up under the Services button. I want it to show up under About! I am sure this is a simple fix int eh main.css file but I am new like I said.

    Reviews should show up under About!

    Click image for larger version

Name:	example.jpg
Views:	1
Size:	42.5 KB
ID:	2283654

  • #2
    Without a source code, stylesheet, or an actual page to test/inspect, the only typical solution I can think of off the bat is checking the styling properties of the element that's responsible for the dropdowns in question. Odds are great that the positioning needs adjustment, or possibly the parent item in relative to the dropdown. Even though browsers are a bit more consistent nowadays, I would also check Firefox vs IE vs Edge vs Chrome to see if it's a browser specific anomaly.

    Comment


    • #3
      Here is the code file that I tried to alter.



      Code:
      .tinynav { display: none }
      
      /* LAYOUT */
      
      h1, h2, h3, #phone, #nav a, .da-link {
          
          font-family: 'PT Sans Caption', sans-serif;
          
      }
      
      
      
      body 
      {
          line-height: 1.6em;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 85%;
          color: #000;
          background-image: url(../images/bg.jpg);
          background-repeat: repeat-x;
          background-position: left -182px;
          background-color: #D3E6EC;
      }
      
      body#home
      {
          line-height: 1.6em;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 85%;
          color: #000;
          background-image: url(../images/bg.jpg);
          background-repeat: repeat-x;
          background-position: left top;
          background-color: #D3E6EC;
      }
      
      
      #wrap {
          width: 960px;
          margin-right: auto;
          margin-left: auto;
          position: relative;
      }
      
      #home #header {
          background-image: url(../images/home-header.jpg);
          background-repeat: no-repeat;
          background-position: center top;
          height: 511px;
      }
      
      
      #header {
          height: 315px;
      }
      
      
      #two #header {
          background-image: url(../images/header-about.jpg);
          background-repeat: no-repeat;
          background-position: center top;
      }
      
      
      #three #header {
          background-image: url(../images/header-news.jpg);
          background-repeat: no-repeat;
          background-position: center top;
      }
      
      #four #header {
          background-image: url(../images/header-services.jpg);
          background-repeat: no-repeat;
          background-position: center top;
      }
      
      #five #header {
          background-image: url(../images/header-gallery.jpg);
          background-repeat: no-repeat;
          background-position: center top;
      }
      
      #six #header {
          background-image: url(../images/header-capabilities.jpg);
          background-repeat: no-repeat;
          background-position: center top;
      }
      
      #seven #header {
          background-image: url(../images/header-estimate.jpg);
          background-repeat: no-repeat;
          background-position: center top;
      }
      
      #eight #header {
          background-image: url(../images/header-contact.jpg);
          background-repeat: no-repeat;
          background-position: center top;
      }
      
      
      #foursub #header {
          background-image: url(../images/header-services.jpg);
          background-repeat: no-repeat;
          background-position: center top;
      }
      
      
      #header-top {
          height: 100px;
      }
      #header-content {
          background-image: url(../images/topbar.png);
          background-repeat: no-repeat;
          background-position: left top;
          width: 969px;
          margin-right: auto;
          margin-left: auto;
          position: relative;
          z-index:10;
      }
      #header-content #phone {
          font-size: 25px;
          color: #1370A1;
          padding-top: 40px;
          float: left;
          display: inline;
          margin-right: 35px;
      }
      
      #header-content #phone a { color: #0070a1 }
      #logo {
          background-image:url(../images/Florida-Sun-Printing-logo.png);
          display:block;
          height:100px;
          width:552px;
          text-indent:-9999px;
          background-repeat: no-repeat;
          background-position: left top;
          float: left;
          margin-right: 20px;
      }    
      
      
      #home #banner {
          height: 340px;
          clear: both;
          margin-top: 4px;
      }
      
      #banner {
          height: 163px;
          clear: both;
      }
      
      
      
      #content {
          padding-bottom: 20px;
      
      }
      
      #main {
          width: 660px;
          display: inline;
          float: left;
          z-index: 10px;
      
          border-right-width: 1px;
          border-right-style: dotted;
          border-right-color: #333;
          padding-right: 30px;
      }
      #main p {
          margin-bottom: 10px;
      }
      #main a {
          text-decoration: underline;
          color: #903;
      }
      #main a:hover {
          text-decoration: none;
      }
      #main ul {
          padding-bottom: 20px;
      }
      .two-column-bulletin li
      {
          float: left;
          width: 300px;
          list-style-type: disc;
          margin-left: 15px;
       }
      .one-column-bulletin li {
          list-style-type: disc;
          margin-left: 15px;
      }
      
      #sidebar {
          width: 230px;
          margin-left: 720px;
      }
      #main .smallcopy {
          font-size: 80%;
          line-height: normal;
          font-style: italic;
          clear: both;
      }
      #footer {
          background-image: url(../images/bg-footer.jpg);
          background-repeat: repeat-x;
          background-position: left top;
          height: 360px;
          padding-top: 20px;
      }
      #footer #footer-content {
          width: 960px;
          margin-right: auto;
          margin-left: auto;
      }
      #footer-content .col {
          float: left;
          width: 300px;
          margin-right: 30px;
          padding-right: 30px;
          border-right-width: 1px;
          border-right-style: dotted;
          border-right-color: #999;
          color: #999;
          font-size: 90%;
          height: 280px;
      }
      #footer-content .last {
          padding: 0px;
          border-top-style: none;
          border-right-style: none;
          border-bottom-style: none;
          border-left-style: none;
          width: 230px;
          float: right;
          font-size: 90%;
      }
      #footer-content span {
          color: #EAC534;
      }
      #footer a {
          color: #333333;
          text-decoration: underline;
      }
      #footer a:hover {
          text-decoration: none;
      }
      
      #footer .mary, #footer .mary a {
          color: #333;
          font-size: 90%;
       }
      #footer-content .credits{
          color: #666;
          padding-top: 18px;
          font-size: 90%;
          padding-bottom: 12px;
          margin-top: 15px;
          line-height: 1.4em;
      }
      #footer-content .col a {
          color: #999;
      }
      
      /* HEADERS */
      
      
       
      h1 {
          margin-bottom: 10px;
          line-height: normal;
          font-size: 180%;
          color: #0070a1;
      }
      
      h2 {
          margin-bottom: 10px;
          line-height: normal;
          font-size: 130%;
          color: #0070a1;
      }
      #main h3 {
          font-size: 120%;
          color: #0070a1;
          border-top-width: 1px;
          border-top-style: dotted;
          border-top-color: #0070a1;
          padding-top: 10px;
          margin-top: 10px;
          clear: both;
          margin-bottom: 10px;
      }
      #sidebar h3{
          font-size: 110%;
          color: #333;
          margin-bottom: 10px;
          margin-top: 10px;
          font-family: Arial, Helvetica, sans-serif;
      }
      
      h4 {
          font-size: 110%;
          color: #EAC534;
          padding-bottom: 10px;
      }
      
      h5 {
          font-size: 90%;    
      }
      
      h6 {
          font-size: 80%;    
      }
      
      
      /* NAV */
      #nav {
          background-repeat: no-repeat;
          background-position: left top;
          background-image: url(../images/bg-main-nav.jpg);
          width: 100%;
          }
      
      #nav li {
          margin: 0; 
          padding: 0;
          display: inline;
          list-style-type: none;
          }
          
      #nav a {
          float: left;
          font-size: 16px;
          line-height: 14px;
          text-decoration: none;
          color: #FFF;
          padding-top: 15px;
          text-align: center;
          padding-left: 18px;
          padding-bottom: 13px;
          padding-right: 18px;
          text-transform: uppercase;
          height: 41px;
          }
      #nav a:hover {
          text-decoration: none;
          color: #E9C534;
      }
      
      
      /*--- Active States ---*/
      
      body#home #nav #butt1 a, 
      body#two #nav #butt2 a, body#twosub #nav #butt2 a, 
      body#three #nav #butt3 a, 
      body#four #nav #butt4 a, body#foursub #nav #butt4 a, 
      body#five #nav #butt5 a,
      body#six #nav #butt6 a,
      body#seven #nav #butt7 a, 
      body#eight #nav #butt8 a,
      body#nine #nav #butt9 a,
      body#ten #nav #butt10 a
      {
          text-decoration: none;
          background-image: url(../images/nav-active.jpg);
          background-repeat: repeat-x;
          background-position: left top;
          color: #000;
       }
      
          /*--- Dropdowns ---*/
          #nav li:hover ul, #nav li.over ul {
          left: 256px;
          
      }
          #nav li li { float: none; position: static; width: 100%; }
          
          #nav li li a, #nav li li a:hover, #nav li li a:active {
          background: none;
          height: auto;
          text-indent: 0;
          width: 86%!important;/*this plus padding max 100% - needs important when there are dropmenu and active state */
          padding-top: 7px;
          padding-right: 7%;
          padding-bottom: 5px;
          padding-left: 7%;
          color: #FFF;
          text-decoration: none;
          border-bottom-width: 1px;
          border-bottom-style: dotted;
          border-bottom-color: #666;
          font-size: 90%;
          line-height: normal;
          text-transform: capitalize;
          text-align: left;
          }
          
          #nav li li a:hover {
          color: #000;
          background-image: url(../images/nav-active.jpg);
          background-repeat: repeat-x;
      }
          
      #home #nav li ul {
          top: 485px;
      
          }
          
          #nav li ul {
          left: -1111px;
          line-height: 1.5;
          position: absolute;
          top: 303px;
          width: 200px;
          z-index: 999;
          background-image: url(../images/bg-dropdown.png);
          background-repeat: no-repeat;
          background-position: left top;
          padding-top: 15px;
          padding-right: 0;
          padding-bottom: 5px;
          padding-left: 0;
          border-bottom-width: 2px;
          border-bottom-style: solid;
          border-bottom-color: #1D3486;
          }
      
      
      body#four #nav #butt4 #dropdown-services li a,
      body#foursub #nav #butt4 #dropdown-services li a
      
      {
          color: #fff;
          background-image: none;!important;
          
       }
       
      body#four #nav #butt4 #dropdown-services li a:hover,
      body#foursub #nav #butt4 #dropdown-services li a:hover
      
      {
          
          color: #000;
          background-image: url(../images/nav-active.jpg);
          background-repeat: repeat-x;
          
       }     
      
      body#two #nav #butt2 #dropdown-about li a,
      body#twosub #nav #butt2 #dropdown-about li a
      
      {
          color: #fff;
          background-image: none;!important;
          
       }
       
      body#two #nav #butt2 #dropdown-about li a:hover,
      body#twosub #nav #butt2 #dropdown-about li a:hover
      
      {
          
          color: #000;
          background-image: url(../images/nav-active.jpg);
          background-repeat: repeat-x;
          
       } 
      
      /* upload */
      #upload {
          line-height: 1;
          height: 45px;
          width: 163px;
          padding-top: 30px;
          float: right;
      }
      
      #upload a {
          background: url(../images/upload-butt.png) no-repeat 0 0;
          display: block;
          height: 45px;
          text-indent: -999em;
          overflow: hidden;
      }
      
      #upload li {
          margin: 0; 
          padding: 0;
          display: inline;
          list-style-type: none;
          }
          
          
          
          /*--- Default ---*/
          #upload a { background-position: 0 0; width: 163px; }
      
          /*--- Hovering ---*/
          #upload a:hover { background-position: 0 -45px; width: 163px; }
          
      
      
      /* bluebutt */
      .bluebutton {
          line-height: 1;
          height: 55px;
          width: 227;
      }
      
      .bluebutton a {
          background: url(../images/blue-buttons.png) no-repeat 0 0;
          display: block;
          height: 43px;
          text-shadow: 1px 1px #000;
          overflow: hidden;
          text-transform: uppercase;
          color: #FFF;
          text-decoration: none;
          text-align: center;
          padding-top: 12px;
          font-size: 16px;
      }
      
      
          
          /*--- Default ---*/
          .bluebutton a { background-position: 0 0; width: 227px; }
      
          /*--- Hovering ---*/
          .bluebutton a:hover {
          background-position: 0 -55px;
          width: 227px;
          color: #E9C434;
      }
      
          /*--- active ---*/
          .bluebutton a:active {
          background-position: 0 -110px;
          width: 227px;
          text-shadow: 0;
      }
      .bluebutton.two a {
          padding-top: 5px;
          padding-bottom: 2px;
      }
      #form .styled   {
          background-color: #000;
          border: 1px solid #666;
          color: #666;
          width: 90%;
          margin-bottom: 5px;
          padding: 2px;
          font-family: Arial, Helvetica, sans-serif;
      }
      #main #form .styled {
          background-color: #FFF;
          border: 1px solid #666;
          color: #666;
          width: 100%;
          margin-bottom: 5px;
          padding: 5px;
          font-family: Arial, Helvetica, sans-serif;
      }
      #footer-content .col a:hover {
          color: #006C9D;
          text-decoration: none;
      }
      #sidebar .testimonial {
          font-size: 120%;
          color: #2676A1;
          font-style: italic;
          margin-top: 15px;
          padding-top: 15px;
          border-top-width: 5px;
          border-top-style: double;
          border-top-color: #177AB4;
          line-height: 1.4em;
      }
      #sidebar .testimonial span {
          font-size: 12px;
          font-style: normal;
          display: block;
          text-align: right;
      }
      .mugshot {
          background-color: #FFF;
          padding: 3px;
          border: 1px solid #2676A4;
          float: left;
          margin-right: 10px;
          margin-bottom: 10px;
      }
      #gallerypics img {
          background-color: #FFF;
          padding: 3px;
          border: 1px solid #2676A4;
          float: left;
          margin-right: 10px;
          height: 130px;
          width: 130px;
          margin-bottom: 10px;
      }
      #eight #wrap #content .mugshot {
          height: auto;
          width: 100px;
      }
      
      #three #main li {
          list-style-type: disc;
          margin-left: 15px;
      }
      Last edited by VIPStephan; Oct 6, 2016, 02:19 PM. Reason: added code BB tags

      Comment


      • #4
        It happens in all browsers. I posted the code but it has to be approved first. Thanks!!!! for your input!!!!

        Comment


        • #5
          Originally posted by flasun View Post
          It happens in all browsers. I posted the code but it has to be approved first.
          Next time post it in between [code][/code] tags, then it won’t have to be approved, too.
          Stop solving problems you don’t yet have!

          Comment


          • #6
            Originally posted by VIPStephan View Post
            Next time post it in between [code][/code] tags, then it won’t have to be approved, too.
            Thanks will do.
            Hurricane over back to figuring this out.

            Comment


            • #7
              Anyone see what I missed to add to get the sub button under the correct header button?

              Comment

              Working...
              X