复杂的CSS菜单

我有一个菜单：复杂的CSS菜单

<div class="headerMenu"> 
    <ul> 
     <li><a href="#">Home <span>Home Page<span></a></li> 
     <li><a href="#">About <span>About My Website<span></a></li> 
     <li><a href="#">Contact <span>Get in touch<span></a></a></li> 
    </ul> 
</div>

我现在的CSS是如下：

.headerMenu{ 
    width: 100%; 
} 

.headerMenu ul{ 
    margin: 0; 
    padding: 0; 
    float: left; 
} 

.headerMenu ul li{ 
    display: inline; 
} 

.headerMenu ul li a{ 
    float: left; 
    color: white; 
    padding-top:25px; 
    padding-left:50px; 
    font-size:24pt; 
} 

.headerMenu ul li a:visited{ 
    color: white; 
} 

.headerMenu ul li a:hover, .menu ul li .current{ 
    color: #fff; 
    background: url(../../Content/Images/menu-selector.png) repeat-x; /* 25x10 arrow/* 
}

而现在的问题是：

我怎样才能获得内容在span标签下面的主文本。当我将鼠标悬停在anchor，如何添加悬停图像，如图屏幕
拍摄

的样机我在Photoshop中创建看起来是这样的：

enter image description here

我知道这通过使用图像很容易实现，但我的解决方案需要动态创建菜单。

来源

2011-06-04 Dusty Roberts

1）如何获取span标签中的内容低于主文本。

您需要使用display: block在span让它出现在新的一行：

.headerMenu ul li a span { 
    display: block; 
}

2）当我将鼠标悬停在锚，如何添加悬停图像，如图屏幕截图

尝试将箭头置于顶部。这可能会实现：

.headerMenu ul li a:hover, .menu ul li .current { 
    color: #fff; 
    background: url(../../Content/Images/menu-selector.png) no-repeat center top; 
    display:block; 
    /* also make sure that you use display block with correct height 
    so that you can positionate the arrow on the correct place... */ 
}

来源

2011-06-04 15:17:50 Fredrik

你可能想http://jsfiddle.net你的答案。 – 2011-06-04 15:21:28

因为我没有背景图片，所以我无法真正用适当的CSS解决它。如果他想知道，如果他自己试图解决它，而不是有人给他提供完整的解决方案，那么它会好得多。 – Fredrik 2011-06-04 15:25:54

这个工程就像一个魅力，我只需要在li：hover class – 2011-06-04 15:28:44

添加以下代码为问题1：

.headerMenu ul li a span { 
    display: block; 
}

这设置<span>显示作为块级元素，因此占据由默认全父容器宽度。

对于问题2，有多种方法可以做到这一点。不过，我的建议是将数组添加到<li>并使用:hover伪类。 注意：，这将只适用于IE 7 +。

.menu ul li:hover{ 
    background: url(../../Content/Images/menu-selector.png) repeat-x; 
}

看到它在行动 - http://jsfiddle.net/kxqx8/1/（我改变了颜色，以帮助显示）

来源

2011-06-04 15:21:56

复杂的CSS菜单

回答

相关问题