文章/答案/技术大牛

发布

问Blogger下拉菜单
EN

Stack Overflow用户

提问于 2017-02-16 20:48:11

回答 1查看 283关注 0票数 1

我不是CSS/HTML程序员，但我知道如何阅读代码，并可以在我必须通过。我有一个博客网站，我想下拉菜单来匹配我的网站。我已经用谷歌搜索了这个，并尝试了一些例子，直到我脸色发青，但都没有成功。这应该不会那么难。不管怎样，我厚颜无耻地从这篇文章的Blogger drop down menu中“借用”了CSS代码，并将其与下面的HTML/Javascript Widget代码结合在一起。但是我的3级菜单显示为3行，这显然不是我想要的。这可能超出了这个小组的范围，但我想我还是要试一试。我真的希望这能行得通。

我来找人帮忙了吗？如果有一个更简单的解决方案，为博客下拉菜单，我是开放的建议。谢谢！！

我的博客：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 -->

blogger

html

css

回答 1

Stack Overflow用户

发布于 2017-02-16 21:21:48

您可以创建简单的下拉菜单，如下所示：

    /*----- 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 {
    background: #f1f1f1;
    z-index: 9999;
    position: absolute;
    left: -999em;
    height:195px;
    width: 205px;
    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 {
    
    /* 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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42274433

复制

相似问题

问Blogger下拉菜单
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Blogger下拉菜单EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Blogger下拉菜单
EN