Question

当我点击它时我想要菜单丢失，但它打开和关闭非常快。我想创建自己的网站，但我还在学习...... Html有效，但css没有。我不想使用:hover。希望你能帮我非常感谢，伊万

@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow');

* {
    font-family : Tw Cen MT Condensed, PT Sans Narrow, sans-serif;
    margin: 0px;
    padding: 0px;
}

html, body {
    padding: 0;
    margin: 0;
}

.container {
    margin: 0;
    padding: 0;
    display: inline-block;
}

#site_name {
    display: inline-block;
    font-size: 30pt;
    color: #f71f1f;
    font-weight: 900;
    margin-left: 30px;
}

/* Primary menu */

#primary-menu {
    background: #b9b9b9;
    height: 75px;
    line-height: 75px;
    display: inline-block;
    width: 100%;
}

#primary-menu > div.container {
    float: right;
}

#primary-menu > div.container > ul {
    padding: 0;
    margin: 0;
}

#primary-menu > div.container > ul > li {
    display: inline-block;
    list-style: none;
    width: 120px;
    padding: 0 13px;
    height: 100%;
    position: relative;
    text-align: center;
}

#drop {
    position: absolute;
    display: none;
    width: 100%;
    padding-left: 0;
    margin-left: 0;
    list-style: none;
}

#primary-menu > div.container > ul > li:active > #drop {
    display: block;
    border-top: 5px solid white;
}

#drop > li {
    background-color: #e0e0e0;
    width: 120px;
    height: 45px;
    line-height: 45px;
    padding-left: 0;
    margin-left: 0;
}

#drop > li > a {
    text-decoration: none;
    color: #ed6161;
    font-size: 15pt;
    padding-left: 0;
    margin-left: 0;
}

#primary-menu > div.container > ul > li > a {
    text-decoration: none;
    color: #ed6161;
    height: 75px;
    display: inline-block;
}

#primary-menu > div.container > ul > li > a:hover {
    color: #eb3434;
}

<!-- Tw Cen MT Condensed... !-->
<html>
    <head>
        <title>IVANTEPLOV</title>
        <link type="text/css" rel="stylesheet" href="style.css">
    </head>
    <body>
    <div id="page-wrapper">
 
    <!-- /header -->
    <header id="header">
        <div id="primary-menu">
            <div id="site_name">
            <a class="icon">IVANTEPLOV</a>
            </div>
            <div class="container">
                <ul>
                    <li><a href="#">Программирование</a>
                        <ul id="drop">
                        <li><a href="#">WEB</a></li>
                        <li><a href="#">Java</a></li>
                        <li><a href="#">Python</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Техновости</a>
                    <ul id="drop">
                        <li><a href="#">Новейшее</a></li>
                        <li><a href="#">Гаджеты</a></li>
                        <li><a href="#">Защищенность</a></li>
                        </ul>
                    </li>
                    <li><a href="#">О нас</a></li>
                </ul>
            </div>
        </div>
    </header>
    </div>
    </body>
</html>

Answer 1

这里最简单的方法是使用一些jQuery：

$(document).ready(function () {
 $('li#drop').on('click', function () {
  $('ul').toggleClass('showing')
 });
});

...不是确切的代码，但我想你可以从那里弄明白吗？

Answer 2

您应该使用：hover 来显示下一级菜单。只有这样才能获得你想要的效果。如果你想要一些效果，试着将“transition”参数添加到li / ul：

Cache dump: {
[ NodeKey{DATA, fqn=/e4c3b326-3205-4472-bbc7-3ae50e72ebb5/second},AtomicHashMap{size=1} ]
[ NodeKey{STRUCTURE, fqn=/e4c3b326-3205-4472-bbc7-3ae50e72ebb5/second},AtomicHashMap{size=0} ]
[ NodeKey{DATA, fqn=/e4c3b326-3205-4472-bbc7-3ae50e72ebb5},AtomicHashMap{size=0} ]
[ NodeKey{STRUCTURE, fqn=/e4c3b326-3205-4472-bbc7-3ae50e72ebb5},AtomicHashMap{size=2} ]
[ NodeKey{DATA, fqn=/e4c3b326-3205-4472-bbc7-3ae50e72ebb5/first},AtomicHashMap{size=1} ]
[ NodeKey{STRUCTURE, fqn=/e4c3b326-3205-4472-bbc7-3ae50e72ebb5/first},AtomicHashMap{size=0} ]
[ NodeKey{STRUCTURE, fqn=/},AtomicHashMap{size=1} ]
[ NodeKey{DATA, fqn=/},AtomicHashMap{size=0} ]
}

Cache dump: {
[ NodeKey{DATA, fqn=/e4c3b326-3205-4472-bbc7-3ae50e72ebb5/second},AtomicHashMap{size=1} ]
[ NodeKey{STRUCTURE, fqn=/e4c3b326-3205-4472-bbc7-3ae50e72ebb5/second},AtomicHashMap{size=0} ]
[ NodeKey{STRUCTURE, fqn=/e4c3b326-3205-4472-bbc7-3ae50e72ebb5},AtomicHashMap{size=2} ]
}

removed: false, exists: false
Cache dump: {
[ NodeKey{DATA, fqn=/e4c3b326-3205-4472-bbc7-3ae50e72ebb5/second},AtomicHashMap{size=1} ]
[ NodeKey{STRUCTURE, fqn=/e4c3b326-3205-4472-bbc7-3ae50e72ebb5/second},AtomicHashMap{size=0} ]
[ NodeKey{STRUCTURE, fqn=/e4c3b326-3205-4472-bbc7-3ae50e72ebb5},AtomicHashMap{size=2} ]
[ NodeKey{DATA, fqn=/e4c3b326-3205-4472-bbc7-3ae50e72ebb5/first},AtomicHashMap{size=0} ]
}

com.test.AspectTest > testMCacheEvicts FAILED
    java.lang.AssertionError at AspectTest.java:55

expected:<null> but was:<1489165005306>
Expected :null
Actual   :1489165005306
 <Click to see difference>

如果不必使用悬停，则需要搜索JS分辨率，将这些类别分配到您的问题中。

Answer 3

这应该有效地做你想要的。我相信如上所述，通过一些jQuery可能会有一种更有效的方式，所以你不必在CSS中有冗余。

更改了href和id标签以区分菜单：

    <div class="container">
      <ul>
        <li><a href="#drop">Программирование</a>
          <ul id="drop">
            <li><a href="#">WEB</a></li>
            <li><a href="#">Java</a></li>
            <li><a href="#">Python</a></li>
          </ul>
        </li>
        <li><a href="#drop2">Техновости</a>
          <ul id="drop2">
            <li><a href="#">Новейшее</a></li>
            <li><a href="#">Гаджеты</a></li>
            <li><a href="#">Защищенность</a></li>
          </ul>
        </li>
        <li><a href="#">О нас</a></li>
      </ul>
    </div>

CSS使用：target伪选择器而不是：active

#drop {
    position: absolute;
    display: none;
    width: 100%;
    padding-left: 0;
    margin-left: 0;
    list-style: none;
    transition: all 1s ease;
}

#drop:target {
    display: block;
}

#drop > li {
    background-color: #e0e0e0;
    width: 120px;
    height: 45px;
    line-height: 45px;
    padding-left: 0;
    margin-left: 0;
}

#drop > li > a {
    text-decoration: none;
    color: #ed6161;
    font-size: 15pt;
    padding-left: 0;
    margin-left: 0;
}

#drop2 {
    position: absolute;
    display: none;
    width: 100%;
    padding-left: 0;
    margin-left: 0;
    list-style: none;
    transition: all 1s ease;
}

#drop2:target {
    display: block;
}

#drop2 > li {
    background-color: #e0e0e0;
    width: 120px;
    height: 45px;
    line-height: 45px;
    padding-left: 0;
    margin-left: 0;
}

#drop2 > li > a {
    text-decoration: none;
    color: #ed6161;
    font-size: 15pt;
    padding-left: 0;
    margin-left: 0;
}

的jsfiddle： https://jsfiddle.net/9s070o3w/1/

我点击时想要菜单掉落，但它不起作用（css）

3 个答案: