Question

我有水平菜单的此菜单。如何为选定的li或a.li生成css。

HTML：

<ul class="arrowunderline">
<li><a href="#">Home</a></li>
<li><a href="#">New</a></li>
<li class="selected"><a href="#">Revised</a></li> <!-- IF a.LI selected <a class="selected" > END -->
<li><a href="#">Tools</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Forums</a></li>   
</ul>

CSS：

ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */
font: bold 16px Georgia;
    margin-top: 60px;
}

ul.arrowunderline li{
display:inline;
margin-right:25px; /* spacing between each menu item */
}

ul.arrowunderline li a{
position:relative;
color:black;
padding-bottom:8px; /*spacing between each menu item and arrow underline beneath it */
text-decoration:none;

}

ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */
content:'';
position:absolute;
left:50%;
margin-left:-75px;
    margin-top: -60px;
width:150px;
    height:40px;
background:url(http://i.stack.imgur.com/7jpU4.png) center bottom no-repeat;
}

更新：在线演示：http://jsfiddle.net/uc6Yz/2/

Answer 1

你可能正在寻找这个：

// CSS

.selected{    
    background: red;
}

将此课程添加到相应页面的<li>。让我解释一下，如果您在主页上将所选课程添加到<li class="selected"><a>Home</a></li>或者如果您在论坛页面中，则将所选课程添加到相应的<li>，如：<li class="selected"><a>Forums</a></li>

当您在主页上访问时，主菜单会被选中，当您在论坛页面上访问时，论坛菜单会被选中。

在此处找到：http://jsfiddle.net/KkP7J/

Answer 2

您希望选定的顶部边框是永久性的吗？

为此。

$('.arrowunderline li').on('click', function(){
    $('.arrowunderline li').removeClass('selected');
    $(this).addClass('selected');
});

Answer 3

你正在寻找这个吗？

ul.arrowunderline li.selected {
     //place your code here (to modify list item)
}

ul.arrowunderline li.selected a {
     //place your code here (to modify the "a" item when li is selected)
}

你的问题有点太干了，你可以多说一点吗？

在水平CSS菜单中选择UL LI

3 个答案: