分享
三行代码  ›  专栏  ›  技术社区  ›  Alisha Lamichhane

从顶部设置子菜单位置

  •  2
  • Alisha Lamichhane  · 技术社区  · 1 周前

    <ul id="nav">
     <li class="site-name"><a href="#">Social </a></li>
    
      <li class="yahoo"><a href="#">Yahoo</a>
        <ul style="">
          <li><a href="#">Yahoo Games »</a>
            <ul style="">
              <li><a href="#">Board Games</a></li>
              <li><a href="#">Card Games</a></li>
              <li><a href="#">Puzzle Games</a></li>
              <li><a href="#">Skill Games »</a>
                <ul style="">
                  <li><a href="#">Yahoo Pool</a></li>
                  <li><a href="#">Chess</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">Yahoo Search</a></li>
          <li><a href="#">Yahoo Answsers</a></li>
        </ul>
      </li>
      <li class="google"><a href="#">Google</a>
        <ul style="">
          <li><a href="#">Google mail</a></li>
          <li><a href="#">Google Plus</a></li>
          <li><a href="#">Google Search »</a>
            <ul>
              <li><a href="#">Search Images</a></li>
              <li><a href="#">Search Web</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="twitter"><a href="#">Twitter</a>
        <ul style="">
          <li><a href="#">New Tweets</a></li>
          <li><a href="#">Compose a Tweet</a></li>
        </ul>
      </li>
    </ul>
    

    这个菜单的CSS是:

        #nav{
        height: 39px;
        font: 12px Geneva, Arial, Helvetica, sans-serif;
        background: #3AB3A9;
        border: 1px solid #30A097;  
        border-radius: 3px;
        min-width:500px;
        margin-left: 0px;
        padding-left: 0px;
    }   
    
    #nav li{
        list-style: none;
        display: block;
        float: left;
        height: 40px;
        position: relative;
        border-right: 1px solid #52BDB5;
    }
    
    #nav li a{
        padding: 0px 10px 0px 30px;
        margin: 0px 0;
        line-height: 40px;
        text-decoration: none;
        border-right: 1px solid #389E96;
        height: 40px;
        color: #FFF;
        text-shadow: 1px 1px 1px #66696B;
    }
    
    #nav ul{
        background: #f2f5f6; 
        padding: 0px;
        border-bottom: 1px solid #DDDDDD;
        border-right: 1px solid #DDDDDD;
        border-left:1px solid #DDDDDD;
        border-radius: 0px 0px 3px 3px;
        box-shadow: 2px 2px 3px #ECECEC;
        -webkit-box-shadow: 2px 2px 3px #ECECEC;
        -moz-box-shadow:2px 2px 3px #ECECEC;
        width:170px;
    }
    #nav .site-name,#nav .site-name:hover{
        padding-left: 10px;
        padding-right: 10px;
        color: #FFF;
        text-shadow: 1px 1px 1px #66696B;
        font: italic 20px/38px Georgia, "Times New Roman", Times, serif;
        background: url(images/saaraan.png) no-repeat 10px 5px;
        width: 160px;
        border-right: 1px solid #52BDB5;
    }
    #nav .site-name a{
        width: 129px;
        overflow:hidden;
    }
    #nav li.facebook{
        background: url(../images/facebook.png) no-repeat 9px 12px;
    }
    #nav li.facebook:hover  {
        background: url(../images/facebook.png) no-repeat 9px 12px #3BA39B;
    }
    #nav li.yahoo{
        background: url(../images/yahoo.png) no-repeat 9px 12px;
    }
    #nav li.yahoo:hover  {
        background: url(../images/yahoo.png) no-repeat 9px 12px #3BA39B;
    }
    #nav li.google{
        background: url(../images/google.png) no-repeat 9px 12px;
    }
    #nav li.google:hover  {
        background: url(../images/google.png) no-repeat 9px 12px #3BA39B;
    }
    #nav li.twitter{
        background: url(../images/twitter.png) no-repeat 9px 12px;
    }
    #nav li.twitter:hover  {
        background: url(../images/twitter.png) no-repeat 9px 12px #3BA39B;
    }
    
    #nav li:hover{
        background: #3BA39B;
    }
    #nav li a{
        display: block;
    }
    #nav ul li {
        border-right:none;
        border-bottom:1px solid #DDDDDD;
        width:170px;
        height:39px;
    }
    #nav ul li a {
        border-right: none;
        color:#6791AD;
        text-shadow: 1px 1px 1px #FFF;
        border-bottom:1px solid #FFFFFF;
    }
    #nav ul li:hover{background:#DFEEF0;}
    #nav ul li:last-child { border-bottom: none;}
    #nav ul li:last-child a{ border-bottom: none;}
    /* Sub menus */
    #nav ul{
        display: none;
        visibility:hidden;
        position: absolute;
        top: 40px;
    }
    
    /* Third-level menus */
    #nav ul ul{
        top: 0px;
        left:170px;
        display: none;
        visibility:hidden;
        border: 1px solid #DDDDDD;
    }
    /* Fourth-level menus */
    #nav ul ul ul{
        top: 0px;
        left:170px;
        display: none;
        visibility:hidden;
        border: 1px solid #DDDDDD;
    }
    
    #nav ul li{
        display: block;
        visibility:visible;
    }
    #nav li:hover > ul{
        display: block;
        visibility:visible;
    }
    

    在服务器上执行时,显示如下: https://jsfiddle.net/uqfsvn4L/

    正如你可以看到的谷歌搜索子菜单显示在其上级位置的顶部,但我希望它显示在主菜单的顶部。如何从顶部获取子菜单显示?

    我的预期产出是: enter image description here

    1 回复  |  直到 1 周前
        1
  •  2
  •   Alisha Lamichhane    1 周前

    删除 position: relative #nav li 然后调整 top 财产 #nav ul . 这是一个有效的例子

    #nav {
          height: 39px;
          font: 12px Geneva, Arial, Helvetica, sans-serif;
          background: #3AB3A9;
          border: 1px solid #30A097;
          border-radius: 3px;
          min-width: 500px;
          margin-left: 0px;
          padding-left: 0px;
        }
    
        #nav li {
          list-style: none;
          display: block;
          float: left;
          height: 40px;
          border-right: 1px solid #52BDB5;
        }
    
        #nav li a {
          padding: 0px 10px 0px 30px;
          margin: 0px 0;
          line-height: 40px;
          text-decoration: none;
          border-right: 1px solid #389E96;
          height: 40px;
          color: #FFF;
          text-shadow: 1px 1px 1px #66696B;
        }
    
        #nav ul {
          background: #f2f5f6;
          padding: 0px;
          border-bottom: 1px solid #DDDDDD;
          border-right: 1px solid #DDDDDD;
          border-left: 1px solid #DDDDDD;
          border-radius: 0px 0px 3px 3px;
          box-shadow: 2px 2px 3px #ECECEC;
          -webkit-box-shadow: 2px 2px 3px #ECECEC;
          -moz-box-shadow: 2px 2px 3px #ECECEC;
          width: 170px;
        }
    
        #nav .site-name,
        #nav .site-name:hover {
          padding-left: 10px;
          padding-right: 10px;
          color: #FFF;
          text-shadow: 1px 1px 1px #66696B;
          font: italic 20px/38px Georgia, "Times New Roman", Times, serif;
          background: url(images/saaraan.png) no-repeat 10px 5px;
          width: 160px;
          border-right: 1px solid #52BDB5;
        }
    
        #nav .site-name a {
          width: 129px;
          overflow: hidden;
        }
    
        #nav li.facebook {
          background: url(../images/facebook.png) no-repeat 9px 12px;
        }
    
        #nav li.facebook:hover {
          background: url(../images/facebook.png) no-repeat 9px 12px #3BA39B;
        }
    
        #nav li.yahoo {
          background: url(../images/yahoo.png) no-repeat 9px 12px;
        }
    
        #nav li.yahoo:hover {
          background: url(../images/yahoo.png) no-repeat 9px 12px #3BA39B;
        }
    
        #nav li.google {
          background: url(../images/google.png) no-repeat 9px 12px;
        }
    
        #nav li.google:hover {
          background: url(../images/google.png) no-repeat 9px 12px #3BA39B;
        }
    
        #nav li.twitter {
          background: url(../images/twitter.png) no-repeat 9px 12px;
        }
    
        #nav li.twitter:hover {
          background: url(../images/twitter.png) no-repeat 9px 12px #3BA39B;
        }
    
        #nav li:hover {
          background: #3BA39B;
        }
    
        #nav li a {
          display: block;
        }
    
        #nav ul li {
          border-right: none;
          border-bottom: 1px solid #DDDDDD;
          width: 170px;
          height: 39px;
        }
    
        #nav ul li a {
          border-right: none;
          color: #6791AD;
          text-shadow: 1px 1px 1px #FFF;
          border-bottom: 1px solid #FFFFFF;
        }
    
        #nav ul li:hover {
          background: #DFEEF0;
        }
    
        #nav ul li:last-child {
          border-bottom: none;
        }
    
        #nav ul li:last-child a {
          border-bottom: none;
        }
    
        /* Sub menus */
        #nav ul {
          display: none;
          visibility: hidden;
          position: absolute;
          top:48x;
        }
    
        /* Third-level menus */
        #nav ul ul {
          top: 0px;
          left: 170px;
          display: none;
          visibility: hidden;
          border: 1px solid #DDDDDD;
          min-height: 100%
        }
    
        /* Fourth-level menus */
        #nav ul ul ul {
          top: 0px;
          left: 170px;
          display: none;
          visibility: hidden;
          border: 1px solid #DDDDDD;
          min-height: 100%
        }
    
        #nav ul li {
          display: block;
          visibility: visible;
        }
    
        #nav li:hover>ul {
          display: block;
          visibility: visible;
        }
    <ul id="nav">
      <li class="site-name"><a href="#">Social </a></li>
    
      <li class="yahoo"><a href="#">Yahoo</a>
        <ul>
          <li><a href="#">Yahoo Games »</a>
            <ul>
              <li><a href="#">Board Games</a></li>
              <li><a href="#">Card Games</a></li>
              <li><a href="#">Puzzle Games</a></li>
              <li><a href="#">Skill Games »</a>
                <ul>
                  <li><a href="#">Yahoo Pool</a></li>
                  <li><a href="#">Chess</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">Yahoo Search</a></li>
          <li><a href="#">Yahoo Answsers</a></li>
        </ul>
      </li>
      <li class="google"><a href="#">Google</a>
        <ul>
          <li><a href="#">Google mail</a></li>
          <li><a href="#">Google Plus</a></li>
          <li><a href="#">Google Search »</a>
            <ul>
              <li><a href="#">Search Images</a></li>
              <li><a href="#">Search Web</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="twitter"><a href="#">Twitter</a>
        <ul>
          <li><a href="#">New Tweets</a></li>
          <li><a href="#">Compose a Tweet</a></li>
        </ul>
      </li>
    </ul>