Question

我无法显示子菜单。

这是我的代码：

<html>
             <head>
                  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
                  <title><?php echo $title; ?></title>
                  <style type="text/css">
                    body
                    {
                        font-family: lucida grande ,tahoma,verdana,arial,sans-serif;
                        background-color: #e9e9e9;
                    }

                    body p
                    {
                        font-size: 0.8em;
                        line-height: 1.28;
                    }

                    #wrapper
                    {
                        width: 1080px;
                        background-color: white;
                        margin: 0 auto;
                        padding: 10px;
                        border: 5px solid #dedede;
                    }

                    #banner
                    {   
                        background-repeat: no-repeat;
                        background-size: cover;
                        border: 5px solid #dedede;    
                        height: 200px;
                    }

                    #content_area
                    {
                        float: left;
                        width: 750px;
                        margin: 20px 0 20px 0;
                        padding: 10px;
                    }

                    #sidebar
                    {
                        float: right;
                        width: 250px;
                        height: 400px;
                        margin: 20px 10px;
                        padding: 10px;
                        border: 2px solid #E3E3E3;
                    }

                    footer
                    {
                        clear: both;
                        width: auto;
                        height: 40px;
                        padding: 10px;
                        border: 3px solid #E3E3E3;
                        text-align: center;
                        color: #fff;
                        text-shadow: 0.1em 0.1em #333;
                        background-image: url(../Images/bar_background.png);
                    }

                    #navigation
                    {
                        height: 60px;
                        border: 3px solid #E3E3E3;
                        margin-top: 20px;
                        text-shadow: 0.1em 0.1em #333;
                        background-image: url(../Images/bar_background.png);
                    }

                    #nav
                    {
                        list-style: none;
                    }

                    #nav ul
                    {
                        margin: 0;
                        padding: 0;
                        width: auto;
                        display: none;
                    }

                    #nav li
                    {
                        font-size: 24px;
                        float: left;
                        position: relative;
                        width: 180px;
                        height: 50px;
                    }

                    #nav a:link, nav a:active, nav a:visited
                    {
                        display: block;
                        color: #fff;
                        text-decoration: none;
                    }

                    #nav a:hover
                    {
                        color: lightblue;
                    }


                    #subnav
                    {
                        list-style:none;
                    }

                    #subnav ul
                    {
                        margin: 0;
                        padding: 0;
                        width: auto;
                        display:none;
                    }

                    #subnav li
                    {
                        font-size: 24px;
                        float:inside;
                        position: relative;
                        width: 180px;
                        height: 50px;
                    }

                    #subnav a:link, nav a:active, nav a:visited
                    {
                        display: block;
                        color: #fff;
                        text-decoration: none;
                    }

                    #subnav a:hover
                    {
                        color: lightblue;
                    }

                    .imgLeft
                    {
                        float: left;
                        width: 240px;
                        height: 150px;
                        margin: 0px 10px 10px 0;
                        padding: 10px;
                    }

                    .imgRight
                    {
                        float: right;
                        width: 200px;
                        height: 250px;
                        margin: 0px 0 10px 10px;
                        padding: 10px;
                    }
            </style>
         </head>
                /*Master page code */ 
            /*the submenu 'subproducts' is not displayed when i ran my code */
       <body>
                            <div id="wrapper">
                                <div id="banner">             
                                </div>            
                                <nav id="navigation">
                                    <ul id="nav">
                                        <li><a href="index.php">Home</a></li>
                                        <li><a href="#">Products</a>                       
                                            <ul id="subnav"> 
                                                <li><a href="#">SubProducts</a></li>
                                            </ul>                 
                                        </li>                    
                                        <li><a href="#">Shop</a></li>
                                        <li><a href="#">About</a></li>
                                    </ul>
                                </nav>            
                                <div id="content_area">
                                    <?php echo $content; ?>
                                </div>            
                                <div id="sidebar">                
                                </div>            
                                <footer>
                                    <p>All rights reserved</p>
                                </footer>
                            </div>
                        </body>
                    </html>

Answer 1

我补充说：

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

body {
  font-family: lucida grande, tahoma, verdana, arial, sans-serif;
  background-color: #e9e9e9;
}

body p {
  font-size: 0.8em;
  line-height: 1.28;
}

#wrapper {
  width: 1080px;
  background-color: white;
  margin: 0 auto;
  padding: 10px;
  border: 5px solid #dedede;
}

#banner {
  background-repeat: no-repeat;
  background-size: cover;
  border: 5px solid #dedede;
  height: 200px;
}

#content_area {
  float: left;
  width: 750px;
  margin: 20px 0 20px 0;
  padding: 10px;
}

#sidebar {
  float: right;
  width: 250px;
  height: 400px;
  margin: 20px 10px;
  padding: 10px;
  border: 2px solid #E3E3E3;
}

footer {
  clear: both;
  width: auto;
  height: 40px;
  padding: 10px;
  border: 3px solid #E3E3E3;
  text-align: center;
  color: #fff;
  text-shadow: 0.1em 0.1em #333;
  background-image: url(../Images/bar_background.png);
}

#navigation {
  height: 60px;
  border: 3px solid #E3E3E3;
  margin-top: 20px;
  text-shadow: 0.1em 0.1em #333;
  background-image: url(../Images/bar_background.png);
}

#nav {
  list-style: none;
}

#nav ul {
  margin: 0;
  padding: 0;
  width: auto;
  display: none;
}

#nav li {
  font-size: 24px;
  float: left;
  position: relative;
  width: 180px;
  height: 50px;
}

#nav li:hover ul {
  display: block;
}

#nav a:link,
nav a:active,
nav a:visited {
  display: block;
  color: #fff;
  text-decoration: none;
}

#nav a:hover {
  color: lightblue;
}

#subnav {
  list-style: none;
}

#subnav ul {
  margin: 0;
  padding: 0;
  width: auto;
  display: none;
}

#subnav li {
  font-size: 24px;
  float: inside;
  position: relative;
  width: 180px;
  height: 50px;
}

#subnav a:link,
nav a:active,
nav a:visited {
  display: block;
  color: #fff;
  text-decoration: none;
}

#subnav a:hover {
  color: lightblue;
}

<div id="wrapper">
  <div id="banner">
  </div>
  <nav id="navigation">
    <ul id="nav">
      <li><a href="index.php">Home</a></li>
      <li><a href="#">Products</a>
        <ul id="subnav">
          <li><a href="#">SubProducts</a></li>
        </ul>
      </li>
      <li><a href="#">Shop</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
  <div id="content_area">
    <!--<?php echo $content; ?>-->
  </div>
  <div id="sidebar">
  </div>
  <footer>
    <p>All rights reserved</p>
  </footer>
</div>

子菜单不显示

1 个答案: