1
Я не CSS/HTML-кодер, но я знаю, как читать код и может пройти, когда мне нужно. У меня есть сайт Blogger, и я хочу, чтобы выпадающие меню соответствовали моему сайту. У меня есть Googled это и пробовал примеры, пока я не сижу в лицо без успеха. Это не должно быть так сложно. Во всяком случае, я бесстыдно «заимствовал» код CSS из этого сообщения Blogger drop down menu и связал его с кодом HTML/Javascript Widget ниже. Но мое 3-уровневое меню отображается как 3 строки, которые я, очевидно, не хочу. Это может выходить за рамки этой группы, но я думал, что все равно попробую. Я действительно хочу, чтобы это сработало.Выпадающие меню Blogger
Я в нужном месте для помощи? Если есть более простое решение для Drop Down Menu для Blogger, я открыт для предложений. Благодаря!!
Мой блог: My blog
Вот CSS и HTML/Javascript код:
/*----- MBT Drop Down Menu ----*/
#mbtnavbar {
/* background: #a3a3a3; */
width: 960px;
color: #FFF;
margin: 30px;
padding: 0;
position: relative;
border-top:0px solid #000000;
height: 5px;
}
#mbtnavbar {
borderleft:0px solid #000000;
border-right:0px solid #000000;
border-bottom:0px solid #000000;
}
#mbtnav {
background:#ededed;
margin: 0;
padding: 0;
}
#mbtnav ul {
float:left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0px;
padding: 0px;
position:relative;
/* border-left:1px solid #333; border-right:1px solid #333; */
height:40px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #000000;
display: block;
font:bold 22px Times new roman, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0px;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: none;
color: #000000;
display: block;
text-decoration: underline;
margin: 0px;
padding: 9px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0px;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height:160px;
width: 170px;
margin: 0px;
padding: 0;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
border-right:1px solid #000000;
border-left:1px solid #000000;
}
#mbtnav li ul a {
width: 180px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: 0px;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: relative;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #f1f1f1;
/* width: 100px; */
color: #000000;
display: block;
font:bold 14px Times new roman, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px solid #000000;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: none;
color: #000000;
display:block;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: underline;
}
.tabs-inner .widget #mbtnavbar li a {
border-left:none;
}
.tabs-outer .widget, .section {
margin:0;
}
.tabs-inner {
padding: 0px;
}<!--Start Navigation -->
<div id=’mbtnavbar’>
<ul id=’mbtnav’>
<li><a href="http://www.adahighlanderphotography.com">HOME</a></li>
<li><a href="">PORTFOLIO</a>
<ul>
<li><a ref='http://www.adahighlanderphotography.com/Products/Landscapes'>
LANDSCAPES</a></li>
<li><a href=''>WILDLIFE/NATURE</a>
<ul>
<li><a href='http://www.adahighlanderphotography.com/Products/WildlifeFlowers-1/Birds/'>
BIRDS</a></li>
<li><a href='http://www.adahighlanderphotography.com/Products/WildlifeFlowers-1/Butterflies/'>
BUTTERFLIES</a></li>
<li><a href='http://www.adahighlanderphotography.com/Products/WildlifeFlowers-1/Flowers/'>
FLOWERS</a></li>
</ul>
</li>
<li><a href='http://www.adahighlanderphotography.com/Products/2017-Photo-of-the-Week/'>PHOTO OF THE WEEK</a></li>
<li><a href='http://www.adahighlanderphotography.com/Products/Landscapes-1/2017-Michigan-Calendar-Photos/'>2017 CALENDAR PHOTOS</a></li>
<li><a href='http://www.adahighlanderphotography.com/Products/Notecards'> NOTECARDS</a></li>
</ul>
</li>
<li><a href="http://www.adahighlanderphotography.com/Contact">CONTACT ME</a></li>
<li><a href="http://blog.adahighlanderphotography.com">BLOG</a></li>
<li><a href="http://www.adahighlanderphotography.com/About-Me2">ABOUT ME</a></li>
</ul>
</div>
<!--End Navigation -->
Я вижу, что ваш работает в окне фрагмента кода. Я сравнил ваши строки за строкой с моими. Я не вижу различий в коде HTML. И только 3 незначительных отличия в коде CSS. Можете ли вы помочь мне понять, почему ваши работы и мои нет? Мне еще нужно попробовать добавить его в свой блог, но, по крайней мере, вы работаете здесь. – kentinada
Я просто подключил ваш код к странице своего блоггера, и меню верхнего уровня выглядит отлично. Но меню «Портфолио» не выпадает при зависании. Идеи? – kentinada
ОК, так что это немного сбивает меня с толку. Если я скопирую и вставляю свой HTML-код в свой виджет HTML/Javascript, я по крайней мере получаю меню верхнего уровня, выглядящее правильно, хотя выпадающие списки не работают. Если я вставлю ТОЧНЫЙ тот же код из файла, который у меня на моем Mac, в тот же виджет, я снова получаю 3 строки меню, подменю и подсубмена. Что за? – kentinada