нужна помощь с выпадающим меню

annet · September 21, 2012

Здравствуйте. Очень срочно нужна помощь.

Возникла проблема при верстке выпадающего меню на css.

При открытом выпадающем меню, когда курсор находится вне ссылки верхнего уровня пропадает фоновая картинка под этой ссылкой (она становится неактивной).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
	<div id="container">

        <div id="content">

            <div id="submenu">
               <ul>
                    <li class="sub1"><a  href="#">Сайты</a>
                        <div class="submenu1">
                            <img src="http://itmages.ru/image/view/684927/517a2c1c" alt="">
                            <div class="sm1">
                                <ul >
                                    <li><a href="#">Все</a></li>
                                    <li><a href="#">Интернет-магазины</a></li>
                                    <li><a href="#">Бизнес, финансы</a></li>
                                    <li><a href="#">Строительство</a></li>
                                    <li><a href="#">Увлечения, отдых</a></li>
                                    <li><a href="#">Обучение</a></li>
                                    <li><a href="#">Флеш-сайты</a></li>
                                </ul>
                            </div>
                            <img src="http://itmages.ru/image/view/684925/1764c44d" alt="">
                        </div>

                    </li>
                    <li class="sub2">
                        <a href="#">Флеш</a>
                        <div class="submenu2">
                            <img src="http://itmages.ru/image/view/684924/ea0d0f64" width="130" alt="">
                            <div class="sm2">
                                <ul>
                                    <li><a href="#">Рекламные ролики</a></li>
                                    <li><a href="#">Заставки</a></li>
                                    <li><a href="#">Открытки</a></li>
                                    <li><a href="#">Презентации</a></li>
                                    <li><a href="#">Элементы страниц</a></li>
                                </ul>
                            </div>
                            <img src="http://itmages.ru/image/view/684922/12ff4093" width="130" alt="">
                        </div>
                    </li>
                    <li class="sub3">
                        <a href="#">Баннеры</a>
                        <div class="submenu3">
                            <img src="http://itmages.ru/image/view/684921/3566b7e7" width="110" alt="">
                            <div class="sm3">
                                <ul>
                                    <li><a href="#">Флеш баннеры</a></li>
                                    <li><a href="#">GIF баннеры</a></li>
                                </ul>
                            </div>
                            <img src="http://itmages.ru/image/view/684925/1764c44d" width="110" alt="">
                        </div>
                    </li>
                    <li class="sub-next">
                        <a href="#">Логотипы</a>
                    </li>
                    <li class="sub-next">
                        <a href="#">Игры</a>
                    </li>
                   <li class="sub-next">
                       <a href="#">Продвижение сайтов</a>
                   </li>
                </ul>
            </div>

        </div>
        <div class="empty"></div>
    </div>
    <div id="footer">
        <div id="copy"></div>
    </div>
</body>
</html>

и css

@charset "utf-8";
/* CSS Document */


* {
	margin:0;
	padding:0;
	}
html{
	height:100%;
	background-color:#fff;
	}
body {
	font-family: Arial, Helvetica, sans-serif;
	width:100%;
    min-width: 995px;
	height:100%;
	margin:0;
	}
img{
    border: 0;
    padding: 0;
    margin: 0;
}
#container{
	width:100%;
    background: url("image/fon-content.png") repeat-y;
    background-position: center;
	height:auto;
	min-height:100%;
	margin:0 auto;
    z-index: 50;
   	}

#content{
	width:995px;
    margin: 0 auto;
    color: #7b7b7b;
    font-size: 11px;
    height: auto;
    position: relative;
    display: table;
}
#content p{
    color: #7b7b7b;
    font-size: 11px;
}

#submenu {
    width: 867px;
    margin: 12px auto 50px;
    padding: 0;
    font-size: 13px;
    font-weight: bold;
    color: #0d6901;
    text-decoration: none;

}
#submenu li {
    float: left;
    list-style: none;
    padding:2px 3px 0 0;
    margin: 0;
    text-align: center;
    position: relative;
    background: none;
    color: #0d6901;
    display:block;
    border:none;
}
.sub1 a, .sub2 a, .sub3 a, .sub-next a{
    color: #0d6901;
    text-decoration: none;
    padding:2px 6px 0;
    display: block;
    position: relative;
}
.sub1 a{
    background: url("http://itmages.ru/image/view/684916/f628fa83") no-repeat;
}
.sub1 a:hover, .sub2 a:hover, .sub3 a:hover{
    color: #fff !important;
}
.sub1 a:hover{
    background: url("http://itmages.ru/image/view/684917/1fe974d2") no-repeat;
    display: block;
    }
.sub2 a{
    background: url("http://itmages.ru/image/view/684918/06b7b84e") no-repeat;
}
.sub2 a:hover{
    background: url("http://itmages.ru/image/view/684919/ac020734") no-repeat;
}
.sub3 a{
    background: url("http://itmages.ru/image/view/684914/b4a44465") no-repeat;
}
.sub3 a:hover{
    background: url("http://itmages.ru/image/view/684915/e818bca5") no-repeat;
}
#submenu li .sub1 a .submenu1:hover{
    background: url("http://itmages.ru/image/view/684917/1fe974d2") no-repeat;
    display: block;
}
 .submenu1, .submenu2, .submenu3{
    float: left;
    margin: 0;
    height: auto;
    position: absolute;
    text-align: left;
    font-size: 11px;
    color: #fff;
    left:-999em;
    }
.submenu1 ul{
    background: url("http://itmages.ru/image/view/684926/512aa44c");
    margin: 0;
    list-style-image: url("http://itmages.ru/image/view/684928/600c6dac");
}
.submenu1 li, .submenu2 li, .submenu3 li{
    line-height: 13px;

}
.submenu1{width: 132px;}
.submenu2{width: 130px;}
.submenu3{width: 110px;}
#submenu li:hover .submenu1,
#submenu li:hover .submenu2,
#submenu li:hover .submenu3{
    left: 0;
    top: auto;
   }
.sm1, .sm2, .sm3{
    display: table;
}
.sm1{
    width: 132px;
    min-height: 120px;
    background: url("http://itmages.ru/image/view/684926/512aa44c") repeat-y;
    margin: 0;
}
.sm2{
    width: 130px;
    min-height: 120px;
    background: url("http://itmages.ru/image/view/684923/dfe3b631.jpg") repeat-y;
    margin: 0;
}
.sm3{
    width: 110px;
    min-height: 70px;
    background: url("http://itmages.ru/image/view/684920/bb89ed5b") repeat-y;
    margin: 0;
}
.sm1 ul li, .sm2 ul li, .sm3 ul li{
    background: url("http://itmages.ru/image/view/684928/600c6dac") no-repeat -3px 50% !important;
    padding:0 0 0 7px !important;
    text-align: left;
    color: #fff;
    font-weight: normal;
    font-size: 11px;
    margin: 0 !important;
}
.sm1 li a, .sm2 li a, .sm3 li a{
    color: #fff;
}
.sm1 li a:hover, .sm2 li a:hover, .sm3 li a:hover{
    color: #000 !important;
    background: none;
}
.submenu2 ul{
    position: relative;
}

.sub-next a{
    padding: 2px 7px 5px;
}
.sub-next a:hover{
    padding: 2px 7px 5px;
    color: #14b600 !important;
}

Подскажите, пожалуйста, в чем может быть причина.

Edited September 21, 2012 by annet

Sign In

нужна помощь с выпадающим меню

Question

annet

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information