Question

我使用下拉菜单创建了标题。我希望它可以悬停，但是在我单击或悬停它之前，下拉菜单不显示。

我正在使用过渡，但在此之前是一样的。我想念什么？我不懂JavaScript。所以我只想使用CSS。

.logo > a {
    font-size: 1.2em;
    letter-spacing: .1em;
    font-weight: 900;
    color: #fff;
    text-decoration: none;
}


.navbar {
    display: flex;
    justify-content: flex-end;
    width: 60%;
    font-size: .75em;
    font-weight: 700;
}


.nav-items {
    width: 100%;
}


.nav-items > ul {
    display: flex;
    list-style-type: none;
    justify-content: space-between;
}


.nav-items ul li > a{
    text-decoration: none;
    color: #fff;
}


.nav-items ul div div > a{
    text-decoration: none;
    color: #fff;
    display: block;
    list-style-type: none;
}


input[type="checkbox"] {
    display: none;
}
.drop1,
.drop2 {
    position: relative;
}

.drop-menu {
    overflow: hidden;
    position: absolute;
    top: 3em;
    background-color: #000;
    font-size: .8em;
    text-align: start;
    visibility: hidden;
    cursor: pointer;
    opacity: 0;
    z-index: -1;
    max-height: 0;
    left: 0;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}


.drop-menu > a {
    padding: .9em 6em .9em .9em;
    white-space: nowrap;
}


.nav-items label {
    cursor: pointer;
}



.nav-items input:hover + .drop-menu {
    visibility: visible;
    max-height: 2000px;
    opacity: 1;
    z-index: 1;
}


.drop-menu > a:hover {
    background-color:rgb(103, 111, 117);
}



.nav-items input:checked ~ .drop-menu {

}

<body>
    <header>
        <div class="menu">
            <div class="logo"><a href="#" >TASTIES</a></div>
            <div class="navbar">
                <input type="checkbox" class="toggler" id="checkbox">
                <div class="hamburger"><div></div></div>
                <div class="nav-items">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <div class="drop1">
                            <label for="drop1">Recipes</label>
                            <input type="checkbox" id="drop1">
                            <div class="drop-menu">
                                <a href="">Meat Recipes</a>
                                <a href="">Veggie Recipes</a>
                                <a href="">Deserts</a>
                            </div>
                        </div>
                        <div class="drop2">
                            <label for="drop2">Cooking Tips</label>
                            <input type="checkbox" id="drop2">
                            <div class="drop-menu">
                                <a href="#">Preparing Tips</a>
                                <a href="#">Cooking Tips</a>
                                <a href="#">Presentation Tips</a>
                            </div>
                        </div>
                        <li><a href="#">Drinks</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
</body>

我希望它可以在过渡效果下徘徊。

Answer 1

使用div标签包裹下拉列表li。在ul内部，您只能使用li元素。在下拉菜单上添加通用类，例如：<div class="drop1 dropdown">并使用此选择器添加悬停效果：.nav-items .dropdown:hover > .drop-menu

Answer 2

要完成@StasAmasev答案，您可以执行以下操作：

<li><a href="#">Home</a>
    <div class="drop1">
       <label for="drop1">Recipes</label>
         <input type="checkbox" id="drop1">
         <div class="drop-menu">
             <a href="">Meat Recipes</a>
             <a href="">Veggie Recipes</a>
             <a href="">Deserts</a>
         </div>
    </div>
</li>

并带有以下CSS：

.nav-items li:hover .drop-menu {
   visibility: visible;
   max-height: 2000px;
   opacity: 1;
   z-index: 1;
}

Answer 3

您也可以只用@PostConstruct void started() { TimeZone.setDefault(TimeZone.getTimeZone("UTC")); }标签包裹set title "Accuracy Plot for the FASP" set xlabel "Fucntion" set ylabel "(%)" set boxwidth 0.9 absolute set style fill solid 1.00 border lt -1 set key fixed right top vertical Right noreverse noenhanced autotitle nobox set style increment default set style histogram clustered gap 1 title textcolor lt -1 set datafile missing '-' set style data histograms set xtics border in scale 0,0 nomirror rotate by -45 autojustify set xtics norangelimit set xtics () set xrange [ * : * ] noreverse writeback set x2range [ * : * ] noreverse writeback set yrange [ 0 : 100 ] noreverse writeback set y2range [ * : * ] noreverse writeback set zrange [ * : * ] noreverse writeback set cbrange [ * : * ] noreverse writeback set rrange [ * : * ] noreverse writeback plot 'C:\Users\John\Desktop\Mystery Assignment for Lomotey\FASP.dat' using 1:3:xtic(2) with boxes，如下所示：

<div class="drop-menu">

请参见https://codepen.io/nosnetrom/pen/bJLoQx。

下拉菜单在点击之前消失

3 个答案: