Question

我正在为一个网站的菜单栏工作，下拉菜单工作正常，唯一的问题是它们只会在我的鼠标位于它们出现的边缘时显示。任何人都可以提供帮助，我将不胜感激。你必须悬停的部分是红色区域的最底部，下拉1是右下角的另一个子菜单。

这是我的代码：

HTML

    <!DOCTYPE html>
     <html>
      <head>
       <link rel="stylesheet" type="text/css" href="style.css"/>
       <link rel="shortcut icon" href="#"/>
      </head>
     <body>
      <div id="banner">
       <p id="title">Code Works</p>
      </div>
      <center>
      <div style="background-color: #FFFF00" id="display"><a href="#">=</a></div>
      </center>
       <nav>
     <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Tutorials</a>
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Setting Up +</a>
                <ul>
                    <li><a href="#">Programs</a></li>
                    <li><a href="#">Files</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Templates +</a>
        <ul>
            <li><a href="#">Web Page</a></li>
            <li><a href="#">Clocks</a></li>
            <li><a href="#">Calendars</a></li>
            <li><a href="#">Maps</a></li>
            <li><a href="#">Transitions</a></li>
            <li><a href="#">Video</a></li>
            <li><a href="#">Audio</a></li>
            <li><a href="#">Search</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
     </ul>
        </nav>

        **CSS**

        html {
        height: 100%;
        }
        body {
        background: linear-gradient(#C0C0C0, #E0E0E0);
        height: 100%;
        margin: 0;
        background-repeat: no-repeat;
        background-attachment: fixed;
        }

        #banner
        {
        width: 1376px;
        margin-left: -10px;
        margin-right: -10px;
        margin-top: -32px;
        padding-top: 0px;
        background-color: #3366CC;
        background-size: 100%;
        height: 80px;
        border-bottom: 4px inset #254A93;
        background: linear-gradient(#3366CC, #2952A3);
        }

        #title
        {
        padding-top: 0.7em;
        color: #FFFF00;
        text-align: center;
        font-size: 32px;
        }

        nav ul ul
        {
        display: none;
        }

        nav ul li:hover > ul 
        {
        display: block;
        }

        nav ul 
        {
        opacity: 0;
        margin-top: -1px;
        margin-left: -10px;
        background: linear-gradient(#FFFF66, #FFFF00);
        box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
        padding: 0 20px;
        border-radius: 0px;  
        list-style: none;
        position: relative;
        display: inline-table;
        }

        nav ul:after 
        {
        content: ""; clear: both; display: block;
        }

        nav ul li 
        {
        float: left;
        }

        nav ul li:hover
        {
        border-bottom: 4px solid #FF0000;
        background: linear-gradient (#FFFF66, #FFFF00);
        border-top: 2px solid #FFFF66;
        }

        nav ul li:hover a 
        {
        color: #3366CC;
        }

        nav ul li a 
        {
        display: block; padding: 25px 40px;
        color: #757575; text-decoration: none;
        }

        nav ul ul 
        {
        width: 200px;
        background: #FFFF00; border-radius: 0px; padding: 0;
        position: absolute; top: 100%;
        }

        nav ul ul li 
        {
        border: 2px outset #FFFF00;
        background: linear-gradient(#FFFF66, #FFFF00);
        float: none; 
        position: relative;
        }

        nav ul ul li a 
        {
        padding: 15px 40px;
        color: #757575;
        }

        nav ul ul li a:hover 
        {
        border-top: #E0E0E0;
        border-bottom: #E0E0E0;
        background: linear-gradient(#FFFF00, #FFFF66);
        }

        nav ul ul ul 
        {
        position: absolute; left: 100%; top:0;
        }

        p:hover ul
        {
        display: none;
        }

        nav ul:hover
        {
        opacity: 0.7;
        }

        nav ul:hover nav ul li
        {
        opacity: 0.7;
        }

        #display
        {
        opacity: 0.7;
        height: 30px;
        background: linear-gradient(#FFFF00, #FFFF66);
        }

        #display a
        {
        size: 32px;
        text-decoration: none;
        }

        nav ul ul li:hover
        {
        border-top: 1px solid #E0E0E0;
        border-bottom: 1px solid #E0E0E0;
        }

Answer 1

我认为您的代码中有一些冗余的CSS，但要使其正常工作，您只需将行opacity:0.7添加到此CSS：

nav ul li:hover > ul {
   display:block;
   opacity:0.7;
}

以下是working fiddle

悬停字段的大小很小

1 个答案: