徘徊在spry子菜单上会使主菜单无效

时间:2013-12-13 01:39:26

标签: css menu hover submenu spry

我在Dreamweaver中制作了一个spry菜单,除了当我将鼠标悬停在只有一个下拉列表的按钮上时它才能正常工作。当子菜单显示时,其上方菜单项的第一个单词变为不可点击+左侧(左侧)的按钮也变为不可点击。这是该网站的链接: http://sundaradesign.com.au/responsive_site/about.html

我感觉子菜单按钮(可能是背景)的一部分是阻挡某些东西或位于关于和定制(定制奖章)的单词上。但我无法解决这个问题。在此先感谢您的帮助。

莉莎

我将在下面加入我的CSS:

@charset "UTF-8";
/* CSS Document */

    html, body{
        margin:0;
        padding:0;
    }
    body{
        background-color: #000;
    }
    a:link {
        color: #F3EEEB;
    }
    a.active {
        color: #981f22;
    }
    a:visited {
        color: #F3EEEB;
    }
    a:hover {
        color: #981f22;
    }
    #container  {
        font-size: 14px;
        height: 1000px;
        width: 1000px;
        position: relative;
        top: 0px;
        font-weight: lighter;
        margin-left: auto;
        margin-right: auto;
        font-family: Verdana, Geneva, sans-serif;
        line-height: 20px;
        color: #F3EEEB;
    }
    #navbar {
        height: 110px;
        width: 600px;
        position: relative;
        z-index: 10;
        top: 0px;
        left:430px;
        font-family: Verdana, Geneva, sans-serif;
        line-height: 20px;
        color: #F3EEEB;
        font-weight: lighter;
        font-size: 14px;
        margin-right:10%;

    }
    div#navbar li {
        display: inline;
        white-space: nowrap;
        margin-top: 45px;
    }
    #navbar li a {
        text-decoration: none;
        color: #F3EEEB;
        font-weight: lighter;
        font-size: 14px; 
        display: inline;
        margin-left: 0px;
        font-variant: normal;
        padding-bottom: 0px;


    }
    div#navbar li a:hover {
        color: #981f22;
        background-color: #000;
        z-index:1060;
    }

spry css是:

/ *菜单栏的最外面的容器,一个没有边距或填充的自动宽度框* /

ul.MenuBarHorizontal
{
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 10px;
}

/ *使用此类设置活动菜单栏,当前设置z-index以适应IE渲染错误:http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html * /

ul.MenuBarActive
{
    z-index: 1000;
}

/ *菜单项容器,相对于此容器定位子项,并且是固定宽度* /

ul.MenuBarHorizontal li
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto;
    height: 20px;
    float: left;
    border-right-width: thin;
    border-right-style: solid;
    border-right-color: #981f22;
    top: 10px;
}

/ *子菜单应显示在其父级(顶部:0)下方,z-index较高,但它们最初位于屏幕左侧(-1000em)* /

ul.MenuBarHorizontal ul
{
    margin: -45px;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: absolute;
    left: -1000em;
}

/ *显示类名称为MenuBarSubmenuVisible的子菜单,我们将其设置为auto,因此它会显示在其父菜单项下方的屏幕上* /

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
    left: auto;
}

/ *菜单项容器与父级* /

的固定宽度相同
ul.MenuBarHorizontal ul li
{
    width: auto;
    border-right: none;
    left: 45px;
}

/ *子菜单应略微重叠(95%)和向上(-5%)* /

ul.MenuBarHorizontal ul ul
{
    position: absolute;
    margin: -5% 0 0 95%;
}

/ *显示类名称为MenuBarSubmenuVisible的子菜单,我们将其设置为0,以便进入屏幕* /

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
    left: auto;
}

/ * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * **

设计信息:描述颜色方案,边框,字体

* ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** /

/ *子菜单容器四面都有边框* /

ul.MenuBarHorizontal ul
{
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}

/ *菜单项是浅灰色块,带有填充,没有文字装饰* /

ul.MenuBarHorizontal a
{
    display: block;
    cursor: pointer;
    padding: 0.3em 0.32em;
    color: #000;
    text-decoration: none;
}

/ *鼠标悬停或焦点的菜单项具有蓝色背景和白色文字* /

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
    color: #FFF;
    z-index:1030;
}

/ *使用子菜单打开的菜单项设置为MenuBarItemHover,蓝色背景和白色文本* /

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
    background-color: #000;
    color: #FFF;
}

/ * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * **

SUBMENU INDICATION:如果给定菜单项下有子菜单,则为样式

* ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** /

/ *具有子菜单的菜单项具有类名称MenuBarItemSubmenu,并设置为使用位于最左侧(95%)并垂直居中(50%)的背景图像* /

ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

/ *具有子菜单的菜单项具有类名称MenuBarItemSubmenu,并设置为使用位于最左侧(95%)并垂直居中(50%)的背景图像* /

ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

/ *使用子菜单打开的菜单项具有类名称MenuBarItemSubmenuHover,并设置为使用位于最左侧(95%)并垂直居中(50%)的“悬停”背景图像* /

ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

/ *使用子菜单打开的菜单项具有类名称MenuBarItemSubmenuHover,并设置为使用位于最左侧(95%)并垂直居中(50%)的“悬停”背景图像* /

ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

/ * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * **

浏览器黑客:除非您是专家,否则不应更改以下黑客攻击

* ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** /

/ * HACK FOR IE:为确保子菜单显示上面的表单控件,我们使用iframe * /

为每个子菜单提供支持
ul.MenuBarHorizontal iframe
{
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
}

/ * HACK FOR IE:稳定菜单项的外观; float中的斜杠是为了防止IE 5.0解析* /

@media screen, projection
{
    ul.MenuBarHorizontal li.MenuBarItemIE
    {
        display: inline;
        f\loat: left;
        background: #FFF;
    }
}

0 个答案:

没有答案