Question

我试图制作悬停菜单，但菜单上显示的并不是我所选择的菜单。它在导航栏的左侧对齐。我尝试改变位置但没有发生任何事情。这是我的代码。我错过了什么？我提前感谢初学者

HTML

<nav> 
             <ul> <li><a href="index.php">      Home</a></li> 
                  <li><a href="#">              About us</a>
                            <ul>
                                <li> <a href=""> Company Profile        </a> </li>
                                <li> <a href=""> Management             </a> </li>
                                <li> <a href=""> Testimonials           </a> </li>
                                <li> <a href=""> Services               </a> </li>
                            </ul>
                    </li> 

                    <li><a href="googlemap.php">Contacts</a></li> 
                    <li><a href="careers.php">Career</a></li> 
                    <li><a href="#">Blog</a>

                    </li> 

                    <li><a href="login.php">Log in</a></li> 
                </ul> 
                <div class="handle"> Menu </div>

        </nav>

CSS

nav {
width:100%;
margin:0;
overflow: hidden;
}



nav ul {
list-style: none;
overflow: hidden;   

-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
nav li a {
background:rgba(0,0,0,8);
border-right: 1px solid gray;
color:white;
display: block;
float: left;
font:16px, Arial, Helvetica;
padding: 12px;
text-align: center;
text-decoration: none;
width: 14.8%; 
}

 nav li a:hover, nav li.active a{
background:rgb(64,64,64);

}



.handle {
width:100%
background: black;
text-align: left;
box-sizing: border-box;
padding:15px 10px;
cursor: pointer;
color: white;
display: none;



 }
@media only screen  and (max-width:580px){
nav ul { max-height: 0; }
.showing { max-height: 20em; }
nav li a {
    box-sizing: border-box;
    width: 100%;
    font: 13px Arial,Helvetica;
    padding-top: 12px;
    padding-bottom: 12px;
    border:-bottom:1px solid gray ;
    text-align: left;


 }

 .handle{
    display: block;
    background-color: rgba(0,0,0,0.8);
    }
}


nav li ul {
display: none; 
width: 10em; /* Width to help Opera out */
background-color: #69f;
}
nav li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; 
}

nav li:hover li {
float: left; 
}

nav li:hover li a {
background-color: gray;
border-bottom: 1px solid #fff;
color: white; 
width: 100px;


}

nav li li a:hover {
background-color: #8db3ff; 
 }

Answer 1

我改变了这个：

nav li {float: left; }
nav li a {
background:rgba(0,0,0,8);
border-right: 1px solid gray;
color:white;
display: block;
font:16px, Arial, Helvetica;
padding: 12px;
text-align: center;
text-decoration: none;
}

问题是你必须在“li”元素上加宽，因为你有一个“溢出：隐藏;”在“ul”元素上。

看到这个工作小提琴 https://jsfiddle.net/11zm8qv2/

悬停子菜单不会完全对齐光标指向的菜单

1 个答案: