Question

我在使用CSS菜单时遇到了麻烦。我正在Joomla上开发网站。我将在这里发布CSS和HTML代码，因此您可以将其复制到文件中。

<html>

<head>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
</body>
<div class="left-menu">
    <ul class="menu-winery">
        <li class="parent active item5">
            <a href=""><span>ღვინო</span></a>
            <ul>
                <li class="parent active item6">
                    <a href=""><span>TELIANI VALLEY</span></a>
                    <ul>
                        <li class="item7">
                            <a href=""><span>ლეგენდა</span></a>
                        </li>
                        <li id="current" class="parent active item8">
                            <a href=""><span>ღვინოები</span></a>
                            <ul>
                                <li class="active item10">
                                    <a href=""><span>ქვევრის</span></a>
                                </li>
                                <li class="item51">
                                    <a href=""><span>დაძველებული</span></a>
                                </li>
                                <li class="item52">
                                    <a href=""><span>სამშვენისი</span></a>
                                </li>
                                <li class="item53">
                                    <a href=""><span>ადგილწარმოშობის</span></a>
                                </li>
                                <li class="item54">
                                    <a href=""><span>ჯიშური</span></a>
                                </li>
                                <li class="item55">
                                    <a><span>სადესერტო</span></a>
                                </li>
                            </ul>
                        </li>
                        <li class="item9">
                            <a href="javascript:;"><span>ჯილდოები</span></a>
                        </li>
                    </ul>
                </li>
                <li class="item57">
                    <a><span>MOSSANO DEPUIS 1893</span></a>
                </li>
                <li class="item58">
                    <a><span>TELURI</span></a>
                </li>
                <li class="item59">
                    <a><span>OLD GRUZIA</span></a>
                </li>
                <li class="item60">
                    <a><span>GRUZIA</span></a>
                </li>
                <li class="item61">
                    <a><span>KVARELI</span></a>
                </li>
                <li class="item62">
                    <a><span>LAZURI</span></a>
                </li>
            </ul>
        </li>
        <li class="item63">
            <a><span>ცქრიალა ღვინო</span></a>
        </li>
        <li class="item64">
            <a><span>ჭაჭა</span></a>
        </li>
        <li class="item65">
            <a><span>ქართული ბრენდი</span></a>
        </li>
    </ul>
</div>
</body>
</head>

这是CSS代码：

.menu-winery { margin:0; padding:0; width:145px; list-style:none; }
.menu-winery li a { font: normal 12px/20px sylfaen, calibri, Georgia, "Times New Roman", Times, serif; color:#7b212b; display:block;
     text-decoration:none; text-indent: 10px; margin-bottom: 1px; }
.menu-winery li a:hover { background-color: #7b212b; color:#fff; }   
.menu-winery li.active a { background-color: #7b212b; color:#fff; }  

.menu-winery li ul { margin:0; padding:0; list-style:none; }
.menu-winery li ul  li {  text-indent: 20px; }
.menu-winery li ul li a { background-color: #fff; font: normal 12px/20px sylfaen, calibri, Georgia, "Times New Roman", Times, serif; 
    color:#808285; display:block; text-transform:uppercase; text-decoration:none; margin-bottom: 1px; }
.menu-winery li ul li a:hover { background-color: #887b32; color:#fff; }        
.menu-winery li ul li.active a { background-color: #887b32; color:#fff; width:200px; height:20px; }     

.menu-winery li ul li ul { margin:0; padding:0; list-style:none;  }
.menu-winery li ul li ul li a { background-color: #fff; font: normal 12px/20px sylfaen, calibri, Georgia, "Times New Roman", Times, serif; 
    color:#cbbc9a; display:block; text-transform:uppercase; text-decoration:none; text-indent: 28px; margin-bottom: 1px; }  
.menu-winery li ul li ul li a:hover { background-color: #cbbc9a; color:#fff; }      
.menu-winery li ul li ul li.active a { background-color: #cbbc9a; color:#fff; }     

.menu-winery li ul li ul li ul { margin:0; padding:0; list-style:none;  }   
.menu-winery li ul li ul li ul li a { background-color: #fff; font: normal 12px/20px sylfaen, calibri, Georgia, "Times New Roman", Times, serif; 
    color:#887b32; display:block; text-transform:uppercase; text-decoration:none; text-indent: 33px; margin-bottom: 1px; }  
.menu-winery li ul li ul li ul li a:hover { background-color: #e2dec9; color:#fff; list-style:none; }
.menu-winery li ul li ul li ul li.active a { background-color: #e2dec9; color:#fff; list-style:none; }

所以在这里，我遇到了LI的ACTIVE状态问题。如果我将活动类放到A标签上，一切正常。但是在joomla中我将不得不重复主菜单模块（我必须知道要改变什么......）

也许有人知道如何解决这个问题。设置Active Li时，其中的所有子ul-s都会获得父颜色。

任何人都可以帮我解决这个问题吗？

Answer 1

Joomla使用id #current作为活动菜单项，请尝试

.menu-winery li#current a { background-color: #7b212b; color:#fff; }

CSS菜单和HTML问题

1 个答案: