对如何制作简单的下拉菜单感到困惑

Question

我一直在寻找一些指南而且没有成功。每当我尝试将鼠标悬停在我的项目上时，它都会更改主<li>的位置。我试图这样做，每当我将鼠标悬停在它上面时，它会下降并向我显示A，B和C.

这是我的代码：

HTML：

<ul id="navbar">
    <li>
        <a href="info.html">Info</a>
    </li>
    <li>
        <a href="contact.html">Contact</a>
    </li>
    <li>
        <a href="members.html">Members</a>
        <ul>
            <li>
                <a href="hikikomori.html">A</a>
            </li>
            <li>
                <a href="akashiia.html">B</a>
            </li>
            <li>
                <a href="munkyuke.html">C</a>
            </li>
        </ul>
    </li>
</ul>

CSS：

#navbar{
    background-color: #404040;
    width: 100%;
    padding: 2px;
    margin: 0;
    position: fixed;
    height: 10%;
}
#navbar li{
    display: block;
    padding: 30px;
    float: right;
}
#navbar li a{
    text-transform: uppercase;
    text-decoration: none;
    color: #666666;
}
#navbar li a:hover{
    color: #999999;
}
#navbar li:hover{
    background-color: #8c8c8c;
}
#navbar li ul li{
   display:none;
}
#navbar li:hover ul li{
    display:block;
}

Answer 1

以下是您的代码最简单的示例。

＆＃13;

＆＃13;

#navbar{
    background-color: #404040;
    width: 100%;
    padding: 2px;
    margin: 0;
    position: fixed;

}
#navbar li{
	padding: 30px;
    float: right;
}
#navbar li a{
    text-transform: uppercase;
    text-decoration: none;
    color: #666666;
}
#navbar li a:hover{
    color: #999999;
}
#navbar li:hover{
    background-color: #8c8c8c;
}
#navbar li ul{ /* modified*/
   display:none;
   background:red;
   padding:0px;
   margin-left:-50px;
}
#navbar li ul li{ /* added */
	float:none
}
#navbar li:hover ul{
    display:block;
	position:absolute; /* added */
	}
.clearfix{clear:both}

＆＃13;

<ul id="navbar">
    <li><a href="info.html">Info</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="members.html">Members</a>
        <ul>
            <li><a href="hikikomori.html">Aern</a></li>
            <li><a href="akashiia.html">Belvne</a></li>
			<li><a href="munkyuke.html">CodeRemeos</a></li>
        </ul>
    </li>
	<div class='clearfix'></div>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将这些行添加到您的CSS中，以强制悬停的<a>保持与右侧对齐。

#navbar>li:hover>a{
  display:block;
   text-align:right; 
} 

并编辑#navbar li{...}属性以正确显示子菜单（通过仅将float应用于主菜单元素）

#navbar>li{
  float:right;
}
#navbar li{
  display: block;
  padding: 30px; 
}

这里是小提琴https://jsfiddle.net/qrpjfsdg/2/