Showing one div by hovering over another with css

时间:2017-08-30 20:54:40

标签: html css

I would like to make a drop-down menu but whenever I find them online they are so confusing, I thought I had it but it doesn't work what have I done wrong here:

css:

io.vertx:vertx-web:3.4.2

And the html:

Error occurred during initialization of boot layer
java.lang.module.FindException: Unable to derive module descriptor for /Users/user/.gradle/caches/modules-2/files-2.1/io.vertx/vertx-web/3.4.2/eee42405acff13d37eb2a62256189d419f91aa4d/vertx-web-3.4.2.jar
Caused by: java.lang.module.InvalidModuleDescriptorException: Provider class moduleFactory = io.vertx.groovy.ext.web.VertxPropertiesModuleFactory not in module

2 个答案:

答案 0 :(得分:1)

See, in your example elements with Public Function Copier() As Boolean 'Does Stuff Copier = True End Function are not descendants of Option Explicit - they're its siblings. So the selector should be changed accordingly:

If z = 10 Then Exit Sub
.dropDownContents

It's not that simple, however: as long as you hover over any of those .dropdown elements, they disappear - as the pointer moves out from the button, and its .dropDownContents{ display:none; } .dropdown:hover ~ .dropDownContents{ color:white; background-color:black; border:solid 1px white; display: block; } state is dropped.

That's why most of the time dropdown menus are implemented as descendants (children usually) of the element triggering its appearance:

<div class="dropDownbtn">
    <button class="dropdown">H1</button>
    <a href="" class="dropDownContents">P1</a>
    <a href="" class="dropDownContents">P2</a>
</div>
a

答案 1 :(得分:0)

此下拉菜单使用CSS。我只是将它包含在页面上,并在我找到它的地方给予赞誉 - 但很久以来就丢失了那个页面。

在我发布到网站之前,我的下拉菜单也无效,直到我将兼容模式关闭(是的,我们需要使用IE并且无法控制该决定):

<style type="text/css" media="screen"> 
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    font-size: 15px;
    border: none;
    cursor: pointer;
}

.dropdown {
    float:left;
    position: relative;
    display: inline-block;
}

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

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
   }

.dropdown-content a:hover {background-color: #f1f1f1}

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

 .dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

    </style>

DROP DOWN MENU:

<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown" >
  <button class="dropbtn">Admin</button>
  <div class="dropdown-content">
    <a href="#">@Html.ActionLink("Re Names", "Index", "MTS_RENAME")</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">Dropdown2</button>
  <div class="dropdown-content">
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <a href="#">Link 6</a>
  </div>
</div>