Submenu Issue

Place for questions and answers for all newcomers and new coders. This is a free for all forum, no question is too stupid and to noob.
Post Reply
User avatar
Xaos
Posts: 946
Joined: Wed Jan 11, 2012 4:01 am

Submenu Issue

Post by Xaos »

Hey guys. I am implementing a pre-made CSS nav bar solution, and I need to have a submenu. For some reason, it is not working, and instead everything appears in the same menu.

Code: Select all

<!DOCTYPE HTML>
<html>
<title> MAHS | Home</title>
<div id = "top"; div style = "position: relative; width: 75%;  left: 12%; background-color: white; z-index: 1; ">

<body class="news">
    <div class="nav">
      <ul>
        <li class="tutorials"><a href="#">MAHS TSA</a>
          <ul>
            <li><a href="info.htm">Info</a></li>
            <li><a href="membership.pdf" target="_blank">Membership</a></li>
            <li><a href="outreach.htm">Outreach</a></li>
            <li><a href="fundraising.htm">Fundraising</a></li>
            <li><a href="advisor.htm">The Advisor</a></li>
          </ul>
        </li>
        <li class="tutorials"><a href="#">TSA Archives</a>
          <ul>
            <li><a>Webmaster</a>
                   <ul>
                       <li><a href="Webmaster - HTML Basics/Index.HTML" target="_blank">HTML Basics</a></li>
                       <li><a href="Webmaster - Mod Journ/index.html" target="_blank">Mod. Journ.</a></li>
                       <li><a href="Webmaster - Space Expl/index.html" target="_blank">Space Expl.</a></li>
                   </ul>
            </li>
            <li><a href="thestatesman.pdf" target="_blank">The Statesman</a></li>
            <li><a href="conferenceawards.pdf" target="_blank">Conference Awards</a></li>
            <li><a href="newsarticles.pdf" target="_blank">News Articles</a></li>
            <li><a href="gallery.htm">Gallery</a></li>
          </ul>
        </li>
        <li class="about"><a class="a" href="#">Curricula</a>
        <ul>
             <li><a href="stemIntegration.htm">STEM Integration</a></li>
             <li><a href="stemMAHS.htm">STEM @ MAHS</a></li>
             <li><a href="expectations.htm">Eng. Expectations</a></li>
        </ul>
        </li>
        <li class="news"><a href="#">Resources</a>
          <ul>
            <li><a href="#">Webmaster 2015</a></li>
            <li><a>School System</a>
                   <ul>
                       <li><a href="http://mahsweb.weebly.com/" target="_blank">Monroe Area</a></li>
                       <li><a href="http://www.walton.k12.ga.us/default.aspx" target="_blank">WCPS</a></li>
                       <li><a href="http://www.gadoe.org/Pages/Home.aspx" target="_blank">GA DOE</a></li>
                   </ul>
            </li>
            <li><a href="#">CTAE Orgs.</a>
                   <ul>
                       <li><a href="http://www.gactso.org/" target="_blank">GA CTSO</a></li>
                       <li><a href="https://www.gatsa.org/" target="_blank">GA TSA</a></li>
                       <li><a href="http://www.tsaweb.org/" target="_blank">TSA WEb</a></li>
                   </ul>
            </li>
            <li><a href="#">Connect</a>
                   <ul>
                        <li><a href="mailto:monroearea.tsa@gmail.com">Contact Us</a></li>
                        <li><a href="https://www.facebook.com/groups/155720111129987/" target="_blank">Social Media</a></li>
                   </ul>
            </li>
            <li><a href="#">Site</a>
                   <ul>
                        <li><a href="development.htm">Development</a></li>
                        <li><a href="sitemap.htm">Site Map</a></li>
                        <li><a href="nondiscrim.htm">Non-Discrim.</a></li>
                        <li><a href="privacy.htm" target="_blank">Privacy</a></li>
                   </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
</body>

</div>

<div id = "SLIDESHOW"; div style = "position: relative; width: 75%; left: 12%; height: 350px;">
<img src = "Wolf.jpg" style = "height: 350px; width: 100%;">
</div>

<div id = "CONTENT"; div style = "position: relative; width: 75%; left: 12%; border: 1px solid black; background-color: white;">
<div id = "SECONDARY"; div style = "position: relative; width: 100%;  border: 1px solid black; background-color: white;"><font size = "5";>Monroe Area High School is a Title 1 school located in
Walton County; founded in DATE, Monroe Area has educated thousands of students and multiple generations. In recent years,
Monroe Area has made an effort to expand CTAE curricula and to encourage the creation of high school CTAE organizations</font></div>
<div id = "THIRD"; div style =  "position: relative; width: 50%; left:50%; border: 1px solid black; background-color: white;"><font size = "5">Among multiple CTAE pathways, including the courses
Engineering 1 through 4, Monroe Area is host to a passionate and highly involved set of students in the high school level of the Technology Student
Association. The MAHS TSA chapter provides an environment in which students may strive and thrive, all whilst "learning to live in a technical world."</font></div>
</div>

<footer><center><div id = "FOOTER"; div style = "background-color: grey; width: 75%; margin-left: -10px; margin-top: 0px; border: 1px solid grey"><font color = "white">
<address>© Copyright 2015 All Rights Reserved Monroe Area High School TSA</address>
</center></font></footer>
</div>
</html>
</html>

<style type = "text/css">
body {
 background-color: #240B3B;
  margin: 0;
  padding: 0;
}


.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  text-align: left;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .3s background-color;
}

.nav li:hover {
  background-color: #005f5f;
}


/* Sub Menus */
.nav li {
  font-size: .8em;
}

 .nav  li:hover ul {
    display: block;
  }

/*******************************************
   Style menu for larger screens

   Using 650px (130px each * 5 items), but ems
   or other values could be used depending on other factors
********************************************/

@media screen and (min-width: 650px) {
  .nav li {
    width: 150px;
    border-bottom: none;
    height: 55x;
    line-height: 50px;
    font-size: 1em;
    display: inline-block;
    margin-right: -4px;
  }

  .nav a {
    border-bottom: none;
  }

  .nav > ul > li {
    text-align: center;
  }

  .nav > ul > li > a {
    padding-left: 0;
  }

  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
  }

  .nav li:hover ul {
    display: block;
  }


  .nav li ul:hover ul{
  display: block;
  }

  .nav li ul li{
    display: block;
  }


</style>

User avatar
Renavoid
Posts: 60
Joined: Sat Feb 23, 2013 7:48 pm

Re: Submenu Issue

Post by Renavoid »

The main problem is that the submenus were being displayed regardless of which menu you are currently looking at. After that, the problem is that they are being displayed inline with their parent (which happen to be on top of other items) instead of off to the side. Without tweaking your CSS too much, I added a submenu class to each of your submenu UL tags, and two new css rules at the bottom to make those submenu items appear/disappear to the right of the rest of the menu. You should be able to do similarly.

Code: Select all

 .nav li ul li ul.submenu{
	display:none;
	margin-left:150px;
	margin-top:-50px;
 }
 .nav li ul li:hover ul.submenu{
	display:block;
}
The winds of change are blowing; will you heed their call?
Post Reply

Return to “Beginner Help and Support”