Добрый день, подскажите пожалуйста почему при верстке выпадающего меню в ие7 возникают след. проблемы(на рис). Нужны отступы для выпадающих пунктов на 10 px влево, с помощью padding-right не получается, он увеличивает весь пункт на 10 px вправо. Так же проблема с z-index, ие его никак не воспринимает, на рис. видно как нижний модуль в котором выводятся новости перекрывает меню.
| HTML5 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <ul class="menu">
<li class="sdf"><strong><a href="http://localhost/joomla"><span class="gray_text">01</span><p>ГЛАВНАЯ</p></a></strong></li>
<li class="sdl"><strong><a href="index.php?option=com_content&view=article&id=47"><span class="gray_text">02</span><p>О КОМПАНИИ</p></a></strong>
<ul>
<li><a style="padding:0px 0px 5px;" href="index.php?option=com_content&view=article&id=56">ЛАБОРАТОРИЯ</a></li>
<li><a style="padding:0px 0px 5px;" href="index.php?option=com_content&view=article&id=57">КЛИЕНТЫ</a></li>
<li><a style="padding:0px 0px 5px;" href="index.php?option=com_content&view=article&id=58">ВАКАНСИИ</a></li>
</ul>
</li>
<li class="sdl"><strong><a href="index.php?option=com_content&view=article&id=48"><span class="gray_text">03</span><p>УСЛУГИ</p></a></strong></li>
<li class="sdl"><strong><a href="index.php?option=com_content&view=article&id=49"><span class="gray_text">04</span><p>ПРОДУКЦИЯ</p></a></strong>
<ul>
<li><a style="padding:0px 0px 5px;" href="index.php?option=com_content&view=article&id=52">БЕТОН</a></li>
<li><a style="padding:0px 0px 5px;" href="index.php?option=com_content&view=article&id=53">ПЕСКОБЛОКИ</a></li>
<li><a style="padding:0px 0px 5px;" href="index.php?option=com_content&view=article&id=54">ЖБИ ИЗДЕЛИЯ</a></li><li><a style="padding:0px 0px 5px;" href="index.php?option=com_content&view=article&id=55">ИНЕРТНЫЕ МАТЕРИАЛЫ</a></li>
<li><a style="padding:0px 0px 5px;" href="index.php?option=com_content&view=article&id=62">ПРАЙС-ЛИСТЫ</a></li>
</ul>
</li>
<li class="sdl"><strong><a href="index.php?option=com_content&view=article&id=50"><span class="gray_text">05</span><p>ЗАКАЗ</p></a></strong></li>
<li class="sdl"><strong><a href="index.php?option=com_content&view=article&id=51"><span class="gray_text">06</span><p>КОНТАКТЫ</p></a></strong></li>
</ul> |
|
| HTML5 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
| ul.menu {
margin-top: 0px;
margin-bottom:-2px;
list-style-type:none;
width:auto;
position:relative;
height:65px;
font-size:11px;
margin-left:25px;
padding:0;
}
ul.menu li {
float:left;
margin: 0px;
padding:0px;
text-align:right;
display:inline;
position: relative;
list-style-type:none
}
ul.menu li a {
float:left;
color:#000000;
text-decoration:none;
display: block;
overflow: hidden;
background:#ffffff;
display:inline
}
ul.menu p {margin-top: 11px; margin-bottom:6px; margin-right:10px}
li.sdf, li.sdf a, li.sdf a:hover,.current {width:233px; padding:15px 0px 0px 0px; }
li.sdl, li.sdl a, li.sdl a:hover,.current {width:139px; padding:15px 0px 0px; }
ul.menu li a:hover {background-color:#ffb400;}
ul.menu li ul {
display:none;
position:absolute;
top:67px;
background:#858585;
margin:0px;
opacity:0.85;
line-height:normal;
left: 0px;
z-index:1000
}
ul.menu li ul:hover{display:block}
ul.menu li ul li{float: none; margin:0px;}
ul.menu li:hover ul, li.over ul,ul.menu li:jshover ul {display:block;}
ul.menu li:hover ul li a,ul.menu li:jshover ul li a{
display:block;
color: #fff;
background: #858585;
display:inline
}
ul.menu ul li:hover a:hover, ul.menu ul li:jshover a:hover{color:#ffb400;}
ul.menu li:hover a, ul.menu li:jshover a{background:#ffb400;} |
|
(
