Все это сводило меня с ума всем утром и выбрасывало все, что я думал о CSS.
Я использую эту следующую страницу, чтобы помочь мне в разработке гармонического меню; http://www.menucool.com/vertical/accordion-menu-css?s=1
Проблема в том, что когда я сохраняю всю эту страницу вместе с связанными файлами.css и.js, меню отображается по-разному. Я загрузил полученный здесь экран; http://www.soflorealty.com/css/
Я понятия не имею, почему (1) стрелки удваиваются, и (2) почему заголовок дополняется уже заполненной коробкой.
Что может быть причиной этого, даже когда страница сохраняется полностью, как есть, без изменений? Что я могу сделать, чтобы исправить отображение?
/* Accordion Menu powered by www.menucool.com */
/* ##### Top level items #####*/
#acdnmenu {
/* Note about height:
Set "height:auto;" if flexible height is required.
A fixed height is prefered as content below the menu won't be pulled down/up when the menu is expanding/collapsing. */
height: 300px;
width: 240px;
font-size:0;
}
#acdnmenu ul.top {
padding-left:0;
background:#484037;
border:1px solid #000;
}
#acdnmenu div.heading, #acdnmenu a.link {
padding: 8px;
padding-left: 24px;
text-align: left;
font: normal 12px Verdana;
color: #A98;
background: #3A332C url(bg.jpg) repeat-x 0 0;
text-decoration: none;
outline: none;
}
#acdnmenu div.current, #acdnmenu div:hover, #acdnmenu a.link:hover, #acdnmenu div.current a.link {
color:#CBA;
font-weight:normal;
text-decoration:none;
}
/*Top level link without children*/
#acdnmenu a.current, #acdnmenu a.current:hover {
color:#CBA;
text-decoration:underline;
}
/* arrow image for the top headings */
#acdnmenu div.arrowImage {
width: 12px;
height: 12px;
top: 9px;
left: 8px; /* right:4px; or Changing it to "left:8px;" will position the arrow image to the left */
background-image: url(arrows.gif);
background-position: 0 0;
}
#acdnmenu div.current div.arrowImage {
background-position:0 -12px;
}
#acdnmenu li.separator {
border-top:1px solid #000;
border-bottom:none;
}
/* ##### Sub level items #####*/
#acdnmenu ul.sub {
/* [disabled]padding-left:14px; */ /*This determines the hierarchical offset*/
}
#acdnmenu ul.sub div.heading {
text-align:left;
font:normal 12px Arial;
padding:5px; padding-left:20px;
color:#CCC;
background:none;
}
#acdnmenu ul.sub div.heading a {
color:#CBA;
}
#acdnmenu ul.sub div.current {
color:#F90;
background:none;
}
#acdnmenu ul.sub a.link {
font:normal 11px Arial;
color:#CBA;
padding:5px; padding-left:20px;
text-decoration:none;
background:none;
}
#acdnmenu ul.sub a.link:hover, #acdnmenu ul.sub a.current,
#acdnmenu ul.sub div.heading a:hover, #acdnmenu ul.sub div.heading a.current {
color:#F90;
text-decoration:underline;
background:none;
}
#acdnmenu ul.sub div.arrowImage {
width:12px;
height:12px;
top:6px;
left:4px;
background-image:url(arrows.gif);
background-position:0 -24px;
}
#acdnmenu ul.sub div.current div.arrowImage {
background-position:0 -36px;
}
/* ##### Followings usually don't need modification ###### */
/*Hack the font-size:0 bug for IE6 */
#acdnmenu, #acdnmenu ul {
display:block;
font-size:0px;
line-height:0px;
}
#acdnmenu li {font-size:12px; line-height:16px;}
#acdnmenu:after {content:'.';height:0;clear:both;display:block;visibility:hidden;}
/*Hack for IE6-7*/
#acdnmenu ul, #acdnmenu li, #acdnmenu div.heading, #acdnmenu a.smLink, #acdnmenu div.description {*zoom:1;}
#acdnmenu li {*float:left;*width:100%;}
#acdnmenu ul {
position:relative;/*!*/
overflow:hidden;
padding:0;margin:0;list-style-type: none;padding-left:10px;
}
#acdnmenu>ul{visibility: hidden;}
#acdnmenu li {padding:0;margin:0;}
#acdnmenu div.heading, #acdnmenu div.current
{
position:relative;
cursor: pointer;
}
#acdnmenu div.arrowImage {position:absolute; overflow:hidden;}
Похоже, проблема в том, что у вас есть div с классом.heading и внутри этого div - еще один div с классом.heading. Это немного странно со структурной точки зрения. Это становится проблематичным из-за следующего css, начинающегося в строке 19.
#acdnmenu div.heading {
padding: 8px;
padding-left: 24px;
text-align: left;
font: normal 12px Verdana;
color: #A98;
background: #3A332C url(../Accordion%20Menu%20CSS_files/bg.jpg) repeat-x 0 0;
text-decoration: none;
outline: none;
}
Это применит изображение стрелки и другие стили к любому элементу с классом.heading внутри элемента с идентификатором #acdnmenu. Если вы посмотрите на их пример, у них нет элемента с классом.heading внутри родительского элемента с классом.heading. Мне кажется, если вы просто переработаете свою структуру html, вам должно быть хорошо. Альтернатива - это меньше работы, но, вероятно, не лучшая практика.
Просто замените строки по строке 19 следующим.
#acdnmenu div.heading div.heading, #acdnmenu a.link {
padding: 8px;
padding-left: 24px;
text-align: left;
font: normal 12px Verdana;
color: #A98;
background: #3A332C url(../Accordion%20Menu%20CSS_files/bg.jpg) repeat-x 0 0;
text-decoration: none;
outline: none;
}
Обратите внимание, что я просто настраивал селектор так, чтобы он только нацеливал элементы div.heading, которые уже находятся в элементах div.heading.
Коды HTML
<body>
<div id="acdnmenu" style="width: 240px; height: 390px; background-color: rgb(119, 119, 119); border: medium none;">
<ul class="top" style="padding-left: 0px; visibility: visible;">
<li id="v_hm">
<div class="heading"><div class="arrowImage"></div>Horizontal Menus</div>
<ul style="height: 0px;" class="sub">
<li><a style="display: block;" class="link" href="http://www.menucool.com/drop-down-menu">Drop Down Menu</a></li>
<li><a style="display: block;" class="link" href="http://www.menucool.com/horizontal/tab-menu">Tab Menu</a></li>
</ul></li>
<li id="v_vm">
<div class="heading current"><div class="arrowImage"></div>Vertical Menus</div>
<ul style="height: 75px;" c="1" class="sub">
<li><a style="display: block;" class="link" href="http://www.menucool.com/vertical/accordion-menu">Accordion Menu</a></li>
<li><a style="display: block;" class="link" href="http://www.menucool.com/vertical/vertical-menu">Vertical Menu</a></li>
</ul></li>
</ul>
</div>
</body>