Html 使下拉列表保持悬停状态

我正在为一个学校项目制作一个网站，以前有过少量的编码经验。我听说在不使用JavaScript的情况下，只使用CSS就可以实现下拉菜单

我无法使下拉列表停留在悬停状态，当鼠标向下移动到

li

元素时，它会消失：

/*菜单宽度的配置*/
html正文ul.sf-menu ul，
html正文ul.sf-menu ul li{
宽度：200px；
}
html正文ul.sf-menu ul{
利润率：0.200px；
}
/*用于正确显示/隐藏/定位的框架*/
ul.sf-menu，
ul.sf-menu*{
保证金：0；
填充：0；
}
超链接菜单{
显示：块；
位置：相对位置；
}
ul.sf-menu-li{
显示：块；
列表样式：无；
浮动：左；
位置：相对位置；
}
ul.sf-menu li：悬停{
可见性：继承；
/*修复IE7的“粘性错误”*/
}
ul.sf-a菜单{
显示：块；
位置：相对位置；
}
菜单{
位置：绝对位置；
左：0；
宽度：150px；
顶部：自动；
左：-999999像素；
}
ul.sf-菜单ul a{
缩放：1；
/*IE6/7修复程序*/
}
ul.sf-menu ul li{
浮动：左；
/*必须始终浮动，否则在IE6/7中会有一个1px的差价底部*/
宽度：150px；
}
菜单{
排名：0；
利润率：0 150像素；
}
ul.sf-menu li：悬停ul，
ul.sf-menu li：聚焦ul，
ul.sf-menu li.sf-hover ul，
ul.sf-menu ul li：悬停ul，
ul.sf-menu ul li：聚焦ul，
ul.sf-menu ul li.sf-hover ul，
ul.sf-menu ul li：悬停ul，
ul.sf-menu ul li：聚焦ul，
ul.sf-menu ul ul li.sf-hover ul，
ul.sf-menu ul li：悬停ul，
ul.sf-menu ul li：聚焦ul，
ul.sf-menu ul ul li.sf-hover ul{
左：自动；
}
ul.sf-menu li：悬停ul-ul，
ul.sf-menu li：聚焦ul，
ul.sf-menu li.sf-hover ul，
ul.sf-menu ul li：悬停ul，
ul.sf-menu ul li：聚焦ul，
ul.sf-menu ul li.sf-hover ul，
ul.sf-menu ul li：悬停ul，
ul.sf-menu ul li：聚焦ul，
ul.sf-menu ul ul li.sf-hover ul，
ul.sf-menu ul li：悬停ul，
ul.sf-menu ul li：聚焦ul，
ul.sf-menu ul ul li.sf-hover ul{
左：-999999像素；
}
/*自动箭头CSS*/
span.sf-arrow{
宽度：7px；
高度：7px；
位置：绝对位置；
顶部：20px；
右：5px；
显示：块；
背景：url（../images/arrows white.png）不重复0；
溢出：隐藏；
/*确保IE6不会溢出并展开该框*/
字号：1px；
}
ul span.sf-arrow{
右：5px；
顶部：20px；
背景位置：0.100%；
}
/*菜单主题化*/
ul#nav{
浮动：左；
}
ul#nav ul{
背景:#555；
边缘顶部：5px；
垫底：15px；
}
ul#nav li a{
填充：7px 25px 6px 25px；
字体：170%'Yanone Kaffeesatz'，arial，无衬线；
文字装饰：无；
颜色：#000；
右边距：2px；
}
ul#nav li a：悬停，
ul#nav li a：聚焦，
ul#nav li.选择a，
ul#nav li.选择a:悬停，
ul#nav li.选择a:焦点{
颜色：#09D4FF；
文本阴影：无；
}
ul#nav ul li a{
颜色：#FFF；
}
ul#nav ul li a：悬停{
颜色：#09D4FF；
右边距：2px；
}
/*图像转换*/
ul#图像{
利润率：0 15px 10px 0；
填充：0；
列表样式：无；
位置：相对位置；
}
ul#图像李{
显示：块；
溢出：隐藏；
填充：0；
浮动：左；
宽度：155px；
高度：300px；
}

您可以通过向包含嵌套的

ul

的每个

li

元素添加一个类名来做到这一点，假设

li

的类名是

。具有嵌套的ul

，然后我们可以控制

max height

属性-我们可以使用

height

，但它有缺点-就像这样：

html body ul.sf-menu ul，html body ul.sf-menu ul li{
宽度：200px；
}
html正文ul.sf-menu ul{
最大高度：0；
溢出：隐藏；
}
html正文ul.sf-menu li.具有嵌套ul:hover ul{
最大高度：1000px；
}

您的问题是您只需从

#nav

中删除

页边距顶部

，方法如下：-

ul#nav ul { 
  background: #555;
  //margin-top: 5px;
  padding-bottom: 15px;
}

这会导致悬停的

li

与其子

ul

（下拉菜单）之间出现空格

工作代码如下

html正文ul.sf-menu ul，
html正文ul.sf-menu ul li{
宽度：200px；
}
html正文ul.sf-menu ul{
利润率：0.200px；
}
/*用于正确显示/隐藏/定位的框架*/
ul.sf-menu，
ul.sf-menu*{
保证金：0；
填充：0；
}
超链接菜单{
显示：块；
位置：相对位置；
}
ul.sf-menu-li{
显示：块；
列表样式：无；
浮动：左；
位置：相对位置；
}
ul.sf-menu li：悬停{
可见性：继承；
/*修复IE7的“粘性错误”*/
}
ul.sf-a菜单{
显示：块；
位置：相对位置；
}
菜单{
位置：绝对位置；
左：0；
宽度：150px；
顶部：自动；
左：-999999像素；
}
ul.sf-菜单ul a{
缩放：1；
/*IE6/7修复程序*/
}
ul.sf-menu ul li{
浮动：左；
/*必须始终浮动