Question

我正在创建此网站：http://google1.php5.cz/index.html我需要我的菜单弹出菜单。

我想创建这个：如果我将鼠标指向单词“ABOUT”，菜单会弹出，会有3个选择：类似http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button这样的东西，但是颠倒了。

问题是（就像你在页面上看到的那样）只要“ABOUT”阻止，我就无法弄清楚如何弹出块？

另外，我不能使用JavaScript。

Answer 1

如果你不能使用Javascript，那么你可以使用CSS bottom属性来推送下拉列表，给它一个“dropup”效果。

这是一个JS fiddle，其示例代码与您提供的w3schools链接相同，并添加了以下内容：

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    bottom: 50px;

}

https://jsfiddle.net/2vuact43/

Answer 2

在W3 Schools示例中添加底部：100％;属性为：

.dropdown:hover .dropdown-content {
    display: block;
}

将菜单向上打开。

它应该是这样的：

.dropdown:hover .dropdown-content {
    display: block;
    bottom: 100%;
}

Answer 3

很简单。只需执行以下两项修改：

添加＆＃34;底部：100％＆＃34;在.css文件中的.dropdown-content以反转弹出菜单的方向

  .dropdown-content {
       bottom:100%;  <!-- <<<THIS WILL MAKE THE MENU OPEN UP INSTEAD OF OPENING DOWN -->

       display: none;
       position: absolute;
       background-color: #f9f9f9;
       min-width: 160px;
       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   }

更改＆＃34; min-width：160px＆＃34;至＆＃34; min-width：100％＆＃34;只要＆＃34;关于＆＃34;制作＆＃34;弹出块。块＆＃34;

   .dropdown-content {
       bottom:100%;  
       display: none;
       position: absolute;
       background-color: #f9f9f9;

       min-width: 100%;  <!-- <<<THIS WILL MAKE THE POP UP BLOCK AS WIDE AS THE BUTTON -->

       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   }

创建下拉菜单？

3 个答案: