Question

如何制作div菜单按钮下拉菜单并仅使用HTML＆amp; amp; CSS。

HTML：

<div class="right_menu"><a href="#" class="menu_button">Change Password</a>
        <a href="#" tabindex='1' class="sign_out_button">Sign Out</a>
        </div>

CSS：

 .sign_out_button{
        background-color: #2fa4e7;
        padding-top: 16px;
        padding-bottom: 16px;
        padding-left:10px;
        padding-right:10px;
        color: #FFF;
        float: left;
        text-decoration: none;
        }
    .sign_out_button:hover{background-color:#1892d7;}
    .sign_out_button a{color:#FFF; 
              text-decoration: none;}

Answer 1

我在下面链接了一个jsfiddle，看看。

CSS：

#primary_nav_wrap
{
    margin-top:15px
}

#primary_nav_wrap ul
{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#primary_nav_wrap ul a
{
    display:block;
    color:#333;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    line-height:32px;
    padding:0 15px;
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
    background:#ddd
}

#primary_nav_wrap ul li:hover
{
    background:#f6f6f6
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0
}

#primary_nav_wrap ul ul li
{
    float:none;
    width:200px
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
    top:0;
    left:100%
}

#primary_nav_wrap ul li:hover > ul
{
    display:block
}

HTML：

<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
  <li class="current-menu-item"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a>
        <ul>
          <li><a href="#">Deep Menu 1</a>
            <ul>
              <li><a href="#">Sub Deep 1</a></li>
              <li><a href="#">Sub Deep 2</a></li>
              <li><a href="#">Sub Deep 3</a></li>
                <li><a href="#">Sub Deep 4</a></li>
            </ul>
          </li>
          <li><a href="#">Deep Menu 2</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 3</a>
    <ul>
      <li class="dir"><a href="#">Sub Menu 1</a></li>
      <li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
        <ul>
          <li><a href="#">Category 1</a></li>
          <li><a href="#">Category 2</a></li>
          <li><a href="#">Category 3</a></li>
          <li><a href="#">Category 4</a></li>
          <li><a href="#">Category 5</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">Menu 6</a></li>
</ul>
</nav>

http://jsfiddle.net/p9mrdk1d/

Answer 2

这是另一个没有javascript的选择，它也可以正常工作

<ul>
  <li>
    Menu
    <ul>
      <li>Submenu</li>
      <li>Submenu</li>
      <li>Submenu</li>
    </ul>
  </li>
</ul>

这是你的html，插入你的页面。现在来了CSS

ul {
  width:200px;
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {width:200px;
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width:200px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

在这里你有一个演示

https://jsfiddle.net/r50kbnq7/

Answer 3

这很简单。这是一个简单的代码.........

=============== HTML =================

<ul id="menu">
        <li><span>HerĹa 1</span></li>
        <li><span>HerĹa 2</span></li>
        <li><span>HerĹa 3</span>
            <ul>
                <li><span>Level 2-A-1</span>
                    <ul>
                        <li><span>Level 3-A-1</span>
                            <ul>
                                <li><span>Level 4-A-1</span>
                                    <ul>
                                        <li><span>Level 5-A-1</span></li>
                                    </ul>
                                </li>
                                <li><span>Level 4-A-2</span></li>                   
                            </ul>
                        </li>
                        <li><span>Level 3-A-2</span></li>                   
                        <li><span>Level 3-A-3</span></li>                                       
                    </ul>
                </li>
                <li><span>Level 2-A-2</span></li>
                <li><span>Level 2-A-3</span></li>            
                <li><span>Level 2-A-4</span></li>            
            </ul>
        </li>


    </ul>

============= CSS =====

  * {
        list-style:none;
        margin:0;
        padding:0;
        font-size:1em;
        cursor:pointer;
    }

    #menu{
        margin:3px;
    }

    #menu > li{            /* Top Level */
        float:left;
        margin-right:3px;
    }
    #menu > li > span{
        display:block;
        background:#0ac;
        padding:3px 10px;
    }
    #menu > li:hover > span{
        color:#fff;
    }

    #menu > li > ul{        /* Second Level */
        display:none;
        background:#08a;
    }
    #menu > li:hover > ul{
        display:block;
        position:absolute;
    }
    #menu > li > ul > li > span{
        display:block;
        padding:3px 10px;
        border-top:solid 3px #fff;
    }
    #menu > li > ul > li:hover > span{
        color:#fff;
    }

    #menu > li > ul li > ul{   /* Third Level & beyond */
        display:none;
        background:#068;
    }
    #menu > li > ul li:hover > ul{
        display:block;
        position:absolute;
        left:100%;
        border-left:solid 3px #fff;
        top:0;
        width:auto;
    }
    #menu > li > ul > li ul > li{
        display:block;
        padding:3px 10px;
        border-top:solid 3px #fff;
        white-space:nowrap;
    }
    #menu > li > ul > li ul > li:hover > span{
        color:#fff;
    }

Answer 4

我用自己的div菜单创建了一个带有下拉菜单的小提琴。您可以向其添加图标并根据需要进行更改。你需要使用jquery。我将在没有jquery的情况下添加另一个。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div class="LEFT-MENU">
<ul>
<li>
<a href="#">MENU 1</a>
<ul class="LEFT-SUBMENU">
<li><a href="#">SUBMENU 1</a></li>
<li><a href="#">SUBMENU 2</a></li>
<li><a href="#">SUBMENU 3</a></li>
<li><a href="#">SUBMENU 4</a></li>
</ul></li>
</ul></div>

https://jsfiddle.net/1tueu0tq/

点击那里观看演示。如果您愿意，只需复制并粘贴到您的网站

即可

使div菜单按钮下拉

4 个答案: