Установить положение подменю сверху - PullRequest
Новая
       6

Установить положение подменю сверху

2 голосов
/ 02 августа 2020

Я бэкэнд-разработчик и мало разбираюсь в дизайне. В моем проекте электронной коммерции я пытаюсь отобразить подменю сверху независимо от того, где находится позиция родительского меню.

В моем меню HTML У меня есть: 

<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/

Как вы можете видеть подменю поиска Google отображается сверху его родительской позиции, но я хочу, чтобы оно отображалось сверху главного меню. Как мне получить отображение подменю сверху?

Мой ожидаемый результат будет: введите описание изображения здесь

1 Ответ

3 голосов
/ 02 августа 2020

Удалите 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...