CSS menu and html problem_问答_开发者_运维开发者技术经验分享

I'm having troubles with CSS Menu. I'm developing site on Joomla. I'll post here CSS and HTML code, so you can copy it into a file.

<html>

<head>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
</body>
<div class="left开发者_JAVA技巧-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>

And here's CSS Code:

.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; }

so here, I have a problem with ACTIVE state of LI's. If I put active class to A tag, everything works fine. But in joomla I'll have to make an overide of main menu module (and I have to idea what to change there...)

Maybe anyone knows how to fix this problem. When Active Li is set, all sub ul-s that are inside of it get parents color.

Can anyone help me out with this one?

Joomla uses the id #current for active menu items, so try

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

CSS menu and html problem

精彩评论

关注公众号

热门标签

图文推荐

CSS menu and html problem

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：