Question

我正在设计一个网站，我在顶级菜单中有下拉列表，当我将鼠标悬停在链接上时会显示下拉列表但是当我离开链接时，下拉列表消失了我不想在jquery中执行此操作我只想这样做在css请帮助我。这是html。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Cusit</title>
</head>
    <body>
     <!-- starting of Navbar menu -->
    <nav id="navigation">
     <!-- starting of social navigation icons -->
        <div id="social_navigation">
           <a href="www.facebook.com"><img src="images/facebook.png" alt="facbook"></a>
           <a href="www.facebook.com"><img src="images/twitter.png" alt="facbook"></a>
           <a href="www.facebook.com"><img src="images/linkedin.png" alt="facbook"></a>
        </div>
        <!-- end of social navigation icons -->
        <div id="menu">
        <a href="#">Home</a>
        <a href="#">Contact us</a>

        <a href="#" id="submenu">Cusit</a>
         <ul id="drop">
                    <li><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></li>
                    <li><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></li>
                    <li><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></li>
                    <li><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></li>
                    <li><a href="#" title="Sub Nav Link 5">Sub Nav Link 5</a></li>
         </ul>      
        <a href="#">Welcome</a>
        <a href="#">cutec</a>
        </div>



         <div id="searchform">
         <input type="text" class="inp">
         </div>

         <div id="searchformlogo">
         <img src="images/search.png">
         </div>
    </nav>
     <!-- End of Navbar menu -->

这是css。

/* starting of navigation bar */
#navigation {
    position: fixed;
    top: 0;
    width: 100%;
    color: #000;
    height: 35px;
    text-align: center;
    padding-top: 15px;
    /* Adds shadow to the bottom of the bar */
    -webkit-box-shadow: 0px 0px 0px 0px #000000;
    -moz-box-shadow: 0px 0px 0px 0px #000000;
    box-shadow: 0px 0px 0px 0px #000000;
    /* Adds the transparent background */
    background-color:#f0eeef;
    color: rgba(1, 1, 1, 0.8);
}

#navigation a {
    font-size: 14px;
    padding-left: 15px;
    padding-right: 15px;
    color: #000;
    text-decoration: none;   
     -webkit-transition: all .50s ease;
     -moz-transition: all .50s ease;
     -ms-transition: all .50s ease;
     -o-transition: all .50s ease;
     transition: all .50s ease;
}

#navigation a:hover {
    color: red;
} 

/* start of sub menu */
#navigation>#menu>a:nth-child(3):hover +#drop{display:block; -webkit-transition: all .50s ease;
    -moz-transition: all .50s ease;
    -ms-transition: all .50s ease;
    -o-transition: all .50s ease;
    transition: all .50s ease;
}
#drop{ display:none; width:10%; position:absolute; left:0; background:#FFFFFF; margin-left: 48em; list-style:none; margin-top:-3px;}
/* End of sub menu */

here is the demo

Answer 1

此代码有效，我已经多次使用它，它是由Tirumal在http://code-tricks.com/simple-css-drop-down-menu/编写的。

您可以更改CSS和HTML以满足您的要求，如果您需要更改代码，请告诉我。

HTML

<ul id="menu">
    <li>
        <a href="#">Menu 1</a>
    </li>
    <li><a href="#">Menu 2</a>

        <ul class="sub-menu">
            <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>
            </li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>

    </li>
    <li><a href="#">Menu 4</a>
        <ul class="sub-menu">
            <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>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 5</a>
    </li>
</ul>

<强> CSS3

    /*Initialize*/
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}

当鼠标离开悬停链接时，下拉列表消失

1 个答案: