Question

我正在尝试创建一个向下打开的下拉菜单，如从下到上。所以，这是我创造的，我遇到了以下问题。

1）我希望Dropdown的宽度与我们悬停的按钮的宽度相同。

2）整个第一个元素是下拉列表中的一个链接没有进入所需的mailTo链接。

这是小提琴：https://jsfiddle.net/s4tr2/gcoh62o6/

    <!DOCTYPE html>
    <html>
        <head>
            <title>Up Dropdown</title>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.menu {
        display: block;
        position: absolute;
        bottom: 0;
        right: 220px;
        padding: 0px;
        margin: 0px;
        text-align: center;
    }
    .menu ul{
        list-style-type: none;
        margin: 0px;
        padding: 0px;
    }
    .menu li {
      display: inline-block;
      position: relative;
      cursor: pointer;
      background-color: #BDC3C7;
    /*  margin-right: -4px;*/
        width: 155px;
        padding: 10px;
    }
    .menu .sub-menu li a{
        display: block;
        text-decoration: none;
        color: #000;
    }

    .menu li:hover {
      background-color: #ABB7B7;
    }
    .menu li:hover .sub-menu {
      max-height: 300px;
      visibility: visible;
      width: 155px;
      bottom: 100%;
      transition: all 0.4s linear;
        color: #000;
    }
    .menu .sub-menu {
      display: block;
      visibility: hidden;
      position: absolute;
      left: 0;
      box-shadow: none;
      max-height: 0;
    width: 150px;
      overflow: hidden;
    }
    .menu .sub-menu li {
      display: block;
    }
            #mainBtn{
                background-color: #0000FF;
                color: #fff;
            } 
</style>
        </head>
    <body>
                <ul class="menu">
                    <li id="mainBtn">Report Issues <i class="fa fa-envelope pull-right" aria-hidden="true" style="margin-top: 3%"></i>
                        <ul class="sub-menu">
                            <li>Feedback</li>
                            <li><a href="mailto: abc@gmail.com?Subject=Feedback" targer="_top">mailTo</a></li>
                        </ul>
                     </li>
            </ul>
        </body>
        </html>

Answer 1

两件事。您正在手动设置子菜单的宽度。你没有必要。你的第二个错误是因为拼写错误，你写了目标而不是目标。

＆＃13;

.menu {
    display: block;
    position: absolute;
    bottom: 0;
    right: 220px;
    padding: 0px;
    margin: 0px;
    text-align: center;
}
.menu ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.menu li {
  display: inline-block;
  position: relative;
  cursor: pointer;
  background-color: #BDC3C7;
/*  margin-right: -4px;*/
    width: 155px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
.menu .sub-menu li a{
    display: block;
    text-decoration: none;
    color: #000;
}

.menu li:hover {
  background-color: #ABB7B7;
}
.menu li:hover .sub-menu {
  max-height: 300px;
  visibility: visible;
  bottom: 100%;
  transition: all 0.4s linear;
    color: #000;
}
.menu .sub-menu {
  display: block;
  visibility: hidden;
  position: absolute;
  left: 0;
  box-shadow: none;
  max-height: 0;
  overflow: hidden;
}
.menu .sub-menu li {
  display: block;
}
        #mainBtn{
            background-color: #0000FF;
            color: #fff;
        }

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>Up Dropdown</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
<body>
            <ul class="menu">
                <li id="mainBtn">Report Issues <i class="fa fa-envelope pull-right" aria-hidden="true" style="margin-top: 8%"></i>
                    <ul class="sub-menu">
                        <li>Feedback</li>
                        <li><a href="mailto: abc@gmail.com?Subject=Feedback" target="_top">mailTo</a></li>
                    </ul>
                 </li>
        </ul>
    </body>
    </html>

＆＃13;

创建一个向上打开的下拉菜单

1 个答案: