This forum is now read-only. Please use our new forums at discuss.codecademy.com.

634 points
2d732055825d6b977c738dd922e83068?s=140&d=retro
Submitted by
fun Tertain
about 3 years ago

why is this submenu not displaying?

I was writing a practice submenu in notepad++ everything is fine except for 2 things

  1. For some reason the text color of my li element won't change to white.
  2. When i hover over a menu "button" the submenu is not displayed.

this is the HTML code:

     <html>
         <head>
         <title>Webpage</title>
         <link type = "text/css" rel = "stylesheet" href = "Styling.css"></link>
    </head>
    <body>

        <ul id = "menubar">
          <li><a href = "#">Games</a>
             <ul class = "submenu">
                <li><a href = '#'>Action</a></li>
                <li><a href = '#'>Strategy</a></li>
                <li><a href = '#'>Multiplayer</a></li>
                <li><a href = '#'>Education</a></li>
             </ul>
          </li>

          <li><a href = "#">Info</a></li>
          <li><a href = "#">Catalog</a></li>
          <li><a href = "#">Gallery</a></li>
          <li><a href = "#">Forums</a></li>
       </ul>
    </body>
    </html>

The CSS code:

* {
   margin:0;
   padding:0;
   font-family:Verdana;
   font-size:16px;
 }

 #menubar li{
   list-style:none;
 }
 #menubar a{
   text-decoration:none;
 }

 #menubar li a:hover{
   color:#00FF00;
 }

#menubar>li{
   float:left;
   background-color:#6494ed;
   padding: 15px 10px;
 }
#menubar li{
     color:white;
 }
.submenu{
     clear:both;
     display:none;
 }

.submenu li{
    border-bottom:2px solid white;
    padding:18px 2px 10px 2px;
 }
#menubar>li>a:hover{
   display:inline;
}