1 reply [Last post]
Altair
Altair's picture
Offline
newbie
Last seen: 4 years 28 weeks ago
Timezone: GMT+2
Joined: 2015-05-19
Posts: 1
Points: 2

Hello everyone

For a University project, we have to make a Homepage.
Since the classes was not deep in detail I'm really beginner in this stuff.

So I download a css menu from the page cssmenumaker.com and make it like I want to have it. Everthing works fine with the index.html but strangly when I want visit for example "Aktuelles" and then click on "Institut" the drop down menu doesn't show up.

Maybe someone has an idea?? Im so confused about the "active","has-sub"& "sub" thing. Need the "has-sub" a page? since its just for clicking for the drop down...i tried so much but didn't get a clue.

HTML

<div id="cssmenu">
		 <ul>
   		<li><a href="index.html">Startseite</a></li>
   		<li><a href="aktuelles.html">Aktuelles</a></li>
  		<li class= "has-sub"><a href="">Institut</a>
      		  <ul>
                    <li class="sub"><a href="konzept.html">Konzept</a></li>
          	    <li class="sub"><a href="mitarbeiter.html">Mitarbeiter</a></li>
          	    <li class="sub"><a href="kontakt.html">Kontakt</a></li>
          	    <li class="sub"><a href="anfahrt.html">Anfahrt</a></li>
           	  </ul>
      		<li class="has-sub"><a href="#">Studium</a>
         	  <ul>
          	    <li class="active sub"><a href="bewerbung.html">Bewerbung</a></li>
          	    <li class="active sub"><a href="termine.html">Semestertermine</a></li>
          	    <li class="active sub"><a href="auslandsjahr.html">Auslandsjahr</a></li>
          	    <li class="active sub"><a href="aussichten.html">Berufsaussichten</a></li>
                  </ul>
        	    <li class="has-sub"><a href="#">Umgebung</a>
         	  <ul>
          	    <li class="active sub"><a href="wohnen.html">Wohnen</a></li>
                     <li class="active sub"><a href="einkaufen.html">Einkaufen</a></li>
          	    <li class="active sub"><a href="freizeit.html">Freizeit</a></li>
         	  </ul>
   		<li><a href="faq.html">FAQ</a></li>
   		<li><a href="...">Gästebuch</a></li>
        	 </ul>
            </div>

CSS

@import url(<a href="http://fonts.googleapis.com/css?family=Raleway:400,200" rel="nofollow">http://fonts.googleapis.com/css?family=Raleway:400,200</a>);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu
{
background: #2b2f3a;
width: 220px;
height: relative;
background-color: white;
float: left;
margin-top: 20px;
border-style: solid;
border-color: blue;
border-width: 1px;
min-width: 15%;
padding-left: 0px;
padding-top: 0px;
font-family: Raleway, sans-serif;
color: #ffffff;
}
#cssmenu ul ul {
  display: none;
 
}
#cssmenu > ul > li.active > ul {
  display: block;
}
.align-right {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 16px;
  text-decoration: none;
  color: #ffffff;
  background: #3ab4a6;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu > ul > li > a:hover {
  color: #d8f3f0;
}
#cssmenu ul > li.has-sub > a:after {
  position: absolute;
  right: 26px;
  top: 19px;
  z-index: 5;
  display: block;
  height: 10px;
  width: 2px;
  background: #ffffff;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub > a:before {
  position: absolute;
  right: 22px;
  top: 23px;
  display: block;
  width: 10px;
  height: 2px;
  background: #ffffff;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub.open > a:after,
#cssmenu ul > li.has-sub.open > a:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#cssmenu ul ul li a {
  padding: 14px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  text-decoration: none;
  color: #dddddd;
  background: #49505a;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu ul ul ul li a {
  padding-left: 32px;
}
#cssmenu ul ul li a:hover {
  color: #ffffff;
}
#cssmenu ul ul > li.has-sub > a:after {
  top: 16px;
  right: 26px;
  background: #dddddd;
}
#cssmenu ul ul > li.has-sub > a:before {
  top: 20px;
  background: #dddddd;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 5 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi Altair, It looks like the

Hi Altair,
It looks like the menu requires JavaScript to trigger the change in class for the dropdown.
Have you got that set up correctly?
Are there any JavaScript errors in the console log?