当前位置： 文江博客话题详情

我的 CSS 下拉菜单出现五分之一。为什么？

发布于 2024-10-15 22:58:26 字数 4751 浏览 0 评论 0原文

我已经编写了一个 CSS 下拉菜单。但是，当我将鼠标悬停在父菜单上时，会出现一个子菜单，当我尝试将鼠标悬停在其上单击它时，下拉菜单会消失。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <ul id="nav">
        <li class="top"><a href="#" class="top_link"><b>Reservation</b></a>
            <ul class="sub">
                <li><a href="#">New Reservation</a></li>
                <li><a href="#">Search Reservation</a></li>
                <li><a href="#">Search Customer</a></li>
                <li><a href="#">Search Reservation</a></li>
            </ul>
        </li>
        <li class="top"><a href="#" class="top_link"><b>Rentals</b></a></li>
        <li class="top"><a href="#" class="top_link"><b>Tariffs</b></a></li>
        <li class="top"><a href="#" class="top_link"><b>Fleet</b></a></li>
        <li class="top"><a href="#" class="top_link"><b>Tools</b></a></li>
        <li class="top"><a href="#" class="top_link"><b>Reports</b></a></li>
        <li class="top"><a href="#" class="top_link"><b>System Management</b></a></li>
    </ul>
</body>
</html>

CSS

#nav {
    padding:0;
    margin:0;
    list-style:none;
    font-family:arial, verdana, sans-serif;
    height: 36px;
    width:960px;
    background-color: #fff;
    background-image: url(../images/menur_bg.gif);
    background-repeat: repeat-x;
    border: 1px solid #666666;
}
#nav li.top {
    display: block;
    float: left;
    padding-right: 6px;
    padding-left: 12px;
    background-image: url(../images/separator.gif);
    background-repeat: no-repeat;
    background-position: right top;
}
#nav  li  a.top_link {
    display:block;
    float:left;
    color:#333333;
    text-decoration:none;
    font-size:12px;
    font-weight:bold;
    cursor:pointer;
    line-height: 36px;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 12px;
}
#nav li a.top_link b {
    display: block;
    float: left;
    padding-right: 10px;
}
#nav li:hover a.top_link   {
    background-image: url(../images/menur_hover_left.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
    margin: 0px;
}
#nav        li:hover       a.top_link b     {
    background-image: url(../images/menur_hover_right.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
    margin: 0px;
}

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{
    left:-1px;
    padding:0px;
    height:auto;
    z-index:300;
    top: 38px;
}
#nav li:hover ul.sub li
{
    display:block;
    position:relative;
    float:left;
    font-weight:normal;
    height: 33px;
}
#nav li:hover ul.sub li a
{
    display:block;
    font-size:11px;
    height:30px;
    width:120px;
    line-height:33px;
    text-indent:5px;
    color:#000;
    text-decoration:none;
    border:1px solid #bbd37e;
    background-image: url(../images/dropdown_strip.gif);
    background-repeat: repeat-x;
    font-weight: bold;
}

#nav li:hover ul.sub li a:hover 
{
    color:#fff;
    border-color:#fff;
    background-color: #ECE9D8;
    background-repeat: repeat-x;
}

/*secondry ul align ment + colour*/
#nav li:hover li:hover ul,

{
    left:90px;
    top:-4px;
    padding:3px;
    border:1px solid #5c731e;
    white-space:nowrap;
    width:90px;
    z-index:400;
    height:auto;
    background-color: #FF00FF;
}
/* alignment of the whole thing - positioning */

#nav ul,
#nav li:hover ul ul
#nav li:hover li:hover ul ul
#nav li:hover li:hover li:hover ul ul
{
    width:0;
    height:0;
    margin:0;
    padding:0;
    list-style:none;
    position: absolute;
    left: -9999px;
    top: -9999px;
    color: #000000;
    background-color: #330066;
}
#nav li a {
    cursor:pointer;
}
/* hpver text + style of the secondary uls and so on */
#nav li:hover li:hover li a
#nav li:hover li:hover  li:hover li a
#nav li:hover li:hover li:hover li:hover li a

{
    border-color:#fff;
    background-color: #FF3366;
}

如果有人可以告诉我一种延迟 css 下拉菜单（子菜单）直到鼠标指针悬停在其上的方法，这将会很有帮助。

原文

I have coded a css dropdown menu. But when I hover over the parent menu, a child menu appears and when I try to hover over it to click it, the dropdown menu disappears.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <ul id="nav">
        <li class="top"><a href="#" class="top_link"><b>Reservation</b></a>
            <ul class="sub">
                <li><a href="#">New Reservation</a></li>
                <li><a href="#">Search Reservation</a></li>
                <li><a href="#">Search Customer</a></li>
                <li><a href="#">Search Reservation</a></li>
            </ul>
        </li>
        <li class="top"><a href="#" class="top_link"><b>Rentals</b></a></li>
        <li class="top"><a href="#" class="top_link"><b>Tariffs</b></a></li>
        <li class="top"><a href="#" class="top_link"><b>Fleet</b></a></li>
        <li class="top"><a href="#" class="top_link"><b>Tools</b></a></li>
        <li class="top"><a href="#" class="top_link"><b>Reports</b></a></li>
        <li class="top"><a href="#" class="top_link"><b>System Management</b></a></li>
    </ul>
</body>
</html>

CSS

#nav {
    padding:0;
    margin:0;
    list-style:none;
    font-family:arial, verdana, sans-serif;
    height: 36px;
    width:960px;
    background-color: #fff;
    background-image: url(../images/menur_bg.gif);
    background-repeat: repeat-x;
    border: 1px solid #666666;
}
#nav li.top {
    display: block;
    float: left;
    padding-right: 6px;
    padding-left: 12px;
    background-image: url(../images/separator.gif);
    background-repeat: no-repeat;
    background-position: right top;
}
#nav  li  a.top_link {
    display:block;
    float:left;
    color:#333333;
    text-decoration:none;
    font-size:12px;
    font-weight:bold;
    cursor:pointer;
    line-height: 36px;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 12px;
}
#nav li a.top_link b {
    display: block;
    float: left;
    padding-right: 10px;
}
#nav li:hover a.top_link   {
    background-image: url(../images/menur_hover_left.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
    margin: 0px;
}
#nav        li:hover       a.top_link b     {
    background-image: url(../images/menur_hover_right.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
    margin: 0px;
}

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{
    left:-1px;
    padding:0px;
    height:auto;
    z-index:300;
    top: 38px;
}
#nav li:hover ul.sub li
{
    display:block;
    position:relative;
    float:left;
    font-weight:normal;
    height: 33px;
}
#nav li:hover ul.sub li a
{
    display:block;
    font-size:11px;
    height:30px;
    width:120px;
    line-height:33px;
    text-indent:5px;
    color:#000;
    text-decoration:none;
    border:1px solid #bbd37e;
    background-image: url(../images/dropdown_strip.gif);
    background-repeat: repeat-x;
    font-weight: bold;
}

#nav li:hover ul.sub li a:hover 
{
    color:#fff;
    border-color:#fff;
    background-color: #ECE9D8;
    background-repeat: repeat-x;
}

/*secondry ul align ment + colour*/
#nav li:hover li:hover ul,

{
    left:90px;
    top:-4px;
    padding:3px;
    border:1px solid #5c731e;
    white-space:nowrap;
    width:90px;
    z-index:400;
    height:auto;
    background-color: #FF00FF;
}
/* alignment of the whole thing - positioning */

#nav ul,
#nav li:hover ul ul
#nav li:hover li:hover ul ul
#nav li:hover li:hover li:hover ul ul
{
    width:0;
    height:0;
    margin:0;
    padding:0;
    list-style:none;
    position: absolute;
    left: -9999px;
    top: -9999px;
    color: #000000;
    background-color: #330066;
}
#nav li a {
    cursor:pointer;
}
/* hpver text + style of the secondary uls and so on */
#nav li:hover li:hover li a
#nav li:hover li:hover  li:hover li a
#nav li:hover li:hover li:hover li:hover li a

{
    border-color:#fff;
    background-color: #FF3366;
}

If someone can tell me a way of delaying the css drop down menu(child menu) till the mouse pointer hovers over it, it would be helpful.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

沙沙粒小 2024-10-22 22:58:26

发生这种情况是因为父菜单和子菜单之间以及两个子菜单之间存在较小的空间。当鼠标进入这个间隙时，您的菜单就会消失。

解决这个问题的办法是增加 标签的高度，这样光标就不会进入两个菜单之间的空白区域。

This happens because there is the minor space between the Parent menu and Child menu also between Two child menu. While mouse enters in this gap your menu becomes disappear.

What you can do to solve this is you can increase the height of <a> tag and this will not make the cursor to go inside the blank space between two menus.

回复 原文
~没有更多了~

关于作者

岁月打碎记忆

暂无简介

0 文章
0 评论
994 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

linfzu01

文章 0 评论 0

§对你不离不弃

文章 0 评论 0

可遇━不可求

文章 0 评论 0

枕梦

文章 0 评论 0

qq_3LFa8Q

文章 0 评论 0

JP

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文