我在CSS中的子菜单不是直接的

时间:2015-09-17 07:43:28

标签: html css

这是css部分,在  html部分,当我点击服务时有子菜单,子菜单没有完全降低到它的2到3 px到右边

#navigation {
 background: url(../images/bg-navigation.png) no-repeat
height: 49px;
width: 960px;
margin: 0 auto;
position: relative;
z-index:1000;
top: 0;
}

#navigation ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 1px 10px;}
#navigation ul li {float: left; padding:0px;}
#navigation li ul {display: none;}
#navigation ul li a {
color: #636974;
display: block;
font-size: 14px;
font-weight: bold;
line-height: 47px;
width: 154px;
border-color: transparent;
border-style: none solid;
border-width: 1px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
border-left: 1px solid #ccc;
}
#navigation ul li a:hover {background: #bebcbc;}
#navigation li:hover ul {display: block; position: absolute;}
#navigation li:hover li {float: none;}
#navigation li:hover a {background: #ffffff;}
#navigation li:hover li a:hover {background: #bebcbc;}

1 个答案:

答案 0 :(得分:1)

你可以这样试试 -

<xsl:stylesheet version="2.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" version="1.0" encoding="utf-8" indent="yes"/>

<xsl:key name="item-by-obj" match="ListItem" use="@ReferenceToObject" />

<xsl:template match="/Data">
    <Data>
        <xsl:for-each select="Object">
            <Object>
                <ID>
                    <xsl:value-of select="@ObjectID"/>
                </ID>
                <List>
                    <xsl:for-each select="key('item-by-obj', @ObjectID)">
                        <ReferenceToObject>
                            <xsl:value-of select="@ReferenceToObject"/>                                
                        </ReferenceToObject>
                        <Name>
                            <xsl:value-of select="@Name"/>
                        </Name>
                    </xsl:for-each>
                </List>
            </Object>
        </xsl:for-each>
    </Data>
</xsl:template>

</xsl:stylesheet>

&#13;
&#13;
#navigation > ul {
}
&#13;
*{margin: 0;padding: 0;}
    #navigation {
 background: url(../images/bg-navigation.png) no-repeat;
height: 49px;
width: 960px;
margin: 0 auto;
position: relative;
z-index:1000;
top: 0;
}

#navigation > ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 1px 10px;}
#navigation ul li {float: left; padding:0px;list-style: none;}
#navigation li ul {display: none;}
#navigation ul li a {
color: #636974;
display: block;
font-size: 14px;
font-weight: bold;
line-height: 47px;
width: 154px;
border-color: transparent;
border-style: none solid;
border-width: 1px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
border-left: 1px solid #ccc;
  }
#navigation ul li a:hover {background: #bebcbc;}
#navigation li:hover ul {display: block; position: absolute;}
#navigation li:hover li {float: none;}
#navigation li:hover a {background: #ffffff;}
#navigation li:hover li a:hover {background: #bebcbc;}
&#13;
&#13;
&#13;

希望它会对你有所帮助。