Question

我正在研究这个代码，它是一种菜单，它粘在屏幕的底部。我希望将鼠标悬停在各种项目上。但我的问题是子菜单越来越向下，他们应该向上增加....这是我的代码请帮助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>
      Dropdown menu
    </title>
    <style type="text/css">
      body{
        padding: 3em;
      }

      #menu ul {


        font: 12px georgia;
        list-style-type:none;
        position:fixed;
        left:0px;
        bottom:0px;
        height:50px;
        width:100%;
      }


      #menu a {

        display: block;
        text-decoration: none;
        color: #3B5330;
      }

      #menu a:hover {
        background:#E3E4FA;
      }

      #menu ul li ul li {
        color: #B0BD97;
        padding-top: 3px;
        padding-bottom:3px;
        padding-left: 3px;
        padding-right: 3px;
        background:#E3E4FA;
      }

      #menu ul li ul li a {
        font: 11px arial;
        font-weight:normal;
        font-variant: small-caps;
        padding-top:3px;
        padding-bottom:3px;
      }

      #menu ul li {
        float: left;
        font-weight: bold;
        border-top: solid 1px #283923;
        border-bottom: solid 1px #283923;
        background:#E3E4FA;
      }

      #menu ul li a {

        font-weight: bold;
        padding: 15px 10px;
        padding-bottom:13px;
      }

      #menu li{

        position:relative;
        float:left;
      }

      #menu ul li ul, #menu:hover ul li ul{

        display:none;
        list-style-type:none;

        padding-bottom:0px;

      }

      #menu:hover ul, #menu:hover ul li:hover ul{

        display:block;
      }


      #menu:hover ul li:hover ul {

        position: absolute;
        margin-top: 1px;
        font: 10px;
      }

      #menu>ul>li:hover>ul {

        bottom:100%;
        border-bottom: 1px solid transparent
      }
    </style>

  </head>
  <body>


    <div id="menu">
      <ul>

        <li>
          <center>
            <a href="X">
              Home
            </a>
          </center>
          <ul>
            <li>
              <a href="#">
                About Us
              </a>
            </li>
            <li>
              <a href="#">
                Disclaimer
              </a>
            </li>
          </ul>
        </li>


        <li>
          <center>
            <a href="#">
              Practice Areas
            </a>
          </center>
          <ul>
            <li>
              <a href="#">
                Civil Law
              </a>
            </li>
            <li>
              <a href="#">
                Criminal Law
              </a>
            </li>
          </ul>
        </li>

        <li>
          <a href="#">
            Family Law
          </a>
          <ul>
            <li>
              <a href="#">
                Joomla
              </a>
            </li>
            <li>
              <a href="#">
                Drupal
              </a>
            </li>
            <li>
              <a href="#">
                Wordpress
              </a>
            </li>
            <li>
              <a href="#">
                Joomla
              </a>
            </li>
            <li>
              <a href="#">
                Drupal
              </a>
            </li>
            <li>
              <a href="#">
                Wordpress
              </a>
            </li>
          </ul>
        </li>


      </ul>
    </div>
  </body>
</html>

Answer 1

更新：Demo

 #navigation {
                width: 980px;
                height: 38px;
                margin-top:100px;
            }
                #navigation li {
                    float: left;
                    position: relative;
                    width:100px;
                    border:1px solid red;
                } #navigation li:hover { background: silver; }
                    #navigation li a {
                        text-transform: uppercase;
                        color: white;
                        padding: 13px 33px;
                        line-height: 38px;
                        font-size: 11px;


                    }
                        #navigation li a:hover { text-decoration: none; }
                        #navigation li ul {
                            position: absolute;
                            display:none;
                            z-index: 1000;
                            min-width: 100%;
                            left:-1px;
                        }
                        #navigation li:hover ul {
                            bottom:20px;
                            display:block;
                            background:#eee;
                        }
                            #navigation li ul li {
                                background: none;
                                width: 100%;
                            }
                                #navigation li ul li:hover {
                                    background: none;
                                    background-color: #2a51b5;
                                }
                                #navigation li ul li a {
                                    text-transform: uppercase;
                                    color: white;
                                    padding: 8px 10px;
                                    line-height: 28px;
                                width: 100%;

                                }


<ul id="navigation">

<li>1</li>

<li>2
    <ul>        
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>        
    </ul>
</li>

<li>3</li>

<li>4</li>    

</ul>

下拉菜单，如何让它向上增加

1 个答案: