Question

我有我在博客上创建的这个下拉菜单，我想为它添加另一个级别。所以我在哪里＆＃34;目的地＆＃34;和一份国家名单，我希望将其分成例如：欧洲 - 波兰等，亚洲 - 东京......等等。我在这里看了很多其他问题，并按照说明进行操作，但我做的只是没有显示出额外的水平。

我的代码在这里：

<div id='menubar'>
<ul id='menus'>
     <li><a href='LINK'>Travelling</a>
         <ul>
            <li><a href='http://www.theroamingrenegades.com/search/label/Travel%20Report'>Reports</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Travel%20Guide'>Guides</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Travel%20Advice'>Advice</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Budget%20Travel'>Budget Travel</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Travel%20Publications'>Publications</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Travel%20Misc'>Other</a></li>
         </ul>
      <li><a href='LINK'>Destinations</a>
         <ul>
            <li><a href='http://www.theroamingrenegades.com/search/label/Egypt'>Egypt</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Poland'>Poland</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Ukraine'>Ukraine</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/USA'>The USA</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Russia'>Russia</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Japan'>Japan</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Hungary'>Hungary</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Portugal'>Portugal</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/England'>England</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/France'>France</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Wales'>Wales</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Scotland'>Scotland</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Ireland'>Ireland</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Greece'>Greece</a></li>
         </ul>
     <li><a href='LINK'>Adventures</a>
         <ul>
            <li><a href='http://www.theroamingrenegades.com/search/label/Adventures%20Mountains'>Mountains</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Adventures%20Climbing'>Climbing</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Adventures%20Urbex'>Urbex</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Adventure%20Slackline'>Slackline</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Adventure%20Skateboarding'>Skateboarding</a></li>
         </ul>
     <li><a href='http://www.theroamingrenegades.com/search/label/Experiences%2F%20Stories'>Experiences</a></li>
     <li><a href='http://www.theroamingrenegades.com/search/label/Motivational'>Motivation/ Rants</a></li>
     <li><a href='https://www.facebook.com/Hilditchshortexplore/photos_stream?tab=photos_albums'>Travel Photos</a></li>
      <li><a href='LINK'>Music</a>
         <ul>
            <li><a href='http://www.theroamingrenegades.com/search/label/Music%20Gigs'>Gigs</a></li>
            <li><a href='http://www.theroamingrenegades.com/p/music.html'>Bands Seen List</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Music%20Festivals'>Festivals</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Music%20Experiences'>Experiences</a></li>
          </ul>
      <li><a href='LINK'>Other</a>
         <ul>
            <li><a href='http://www.theroamingrenegades.com/search/label/Other%20Tattoos'>Tattoos</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Other%20Pets'>Pets</a></li>
            <li><a href='http://www.theroamingrenegades.com/2014/09/getting-married-in-nyc.html'>Our NEW YORK Wedding!</a></li>
            <li><a href="http://www.nichilditch-short.co.uk"_blank">Nic's Art & Design Blog</a></li>
            <li><a href='http://www.theroamingrenegades.com/search/label/Other%20Year%20Review%2F%20Plan'>Year Plans & Reviews</a></li>
        </ul>
     </li></li></li></li></li></ul>

我认为相关的CSS是：

  <b:variable default='960px' name='content.width' type='length' value='1010px'/>
  <b:variable default='0' name='main.column.left.width' type='length'/>
  <b:variable default='310px' name='main.column.right.width' type='length' value='300px'/>

  <![CDATA[
  body {
    min-width: $(content.width);
  }

  .content-outer, .content-fauxcolumn-outer, .region-inner {
    min-width: $(content.width);
    max-width: $(content.width);
    _width: $(content.width);
  }

  .main-inner .columns {
    padding-left: $(main.column.left.width);
    padding-right: $(main.column.right.width);
  }

  .main-inner .fauxcolumn-center-outer {
    left: $(main.column.left.width);
    right: $(main.column.right.width);
    /* IE6 does not respect left and right together */
    _width: expression(this.parentNode.offsetWidth -
        parseInt("$(main.column.left.width)") -
        parseInt("$(main.column.right.width)") + 'px');
  }

  .main-inner .fauxcolumn-left-outer {
    width: $(main.column.left.width);
  }

  .main-inner .fauxcolumn-right-outer {
    width: $(main.column.right.width);
  }

  .main-inner .column-left-outer {
    width: $(main.column.left.width);
    right: 100%;
    margin-left: -$(main.column.left.width);
  }

  .main-inner .column-right-outer {
    width: $(main.column.right.width);
    margin-right: -$(main.column.right.width);
  }

  #layout {
    min-width: 0;
  }

  #layout .content-outer {
    min-width: 0;
    width: 800px;
  }

  #layout .region-inner {
    min-width: 0;
    width: auto;
  }
  ]]>

Answer 1

下面是您的HTML，其中包含已修改的列表项，现在显示三个级别的列表

<ul id='menus'>
  <li><a href='LINK'>Travelling</a>
    <ul>
      <li><a href='http://www.theroamingrenegades.com/search/label/Travel%20Report'>Reports</a></li>
      <li><a href='http://www.theroamingrenegades.com/search/label/Travel%20Guide'>Guides</a></li>
      <li><a href='http://www.theroamingrenegades.com/search/label/Travel%20Advice'>Advice</a></li>
      <li><a href='http://www.theroamingrenegades.com/search/label/Budget%20Travel'>Budget Travel</a></li>
      <li><a href='http://www.theroamingrenegades.com/search/label/Travel%20Publications'>Publications</a></li>
      <li><a href='http://www.theroamingrenegades.com/search/label/Travel%20Misc'>Other</a></li>
    </ul>
  </li>
  <li><a href='LINK'>Destinations</a>
    <ul>
      <li>Europe
        <ul>
          <li><a href='http://www.theroamingrenegades.com/search/label/Poland'>Poland</a></li>
          <li><a href='http://www.theroamingrenegades.com/search/label/Ukraine'>Ukraine</a></li>
          <li><a href='http://www.theroamingrenegades.com/search/label/Hungary'>Hungary</a></li>
          <li><a href='http://www.theroamingrenegades.com/search/label/Portugal'>Portugal</a></li>
          <li><a href='http://www.theroamingrenegades.com/search/label/England'>England</a></li>
          <li><a href='http://www.theroamingrenegades.com/search/label/France'>France</a></li>
          <li><a href='http://www.theroamingrenegades.com/search/label/Wales'>Wales</a></li>
          <li><a href='http://www.theroamingrenegades.com/search/label/Scotland'>Scotland</a></li>
          <li><a href='http://www.theroamingrenegades.com/search/label/Ireland'>Ireland</a></li>
          <li><a href='http://www.theroamingrenegades.com/search/label/Greece'>Greece</a></li>
        </ul>
      </li>
      <li>Afreica
        <ul>
          <li><a href='http://www.theroamingrenegades.com/search/label/Egypt'>Egypt</a></li>
        </ul>
      </li>
      <li>North America
        <ul>
          <li><a href='http://www.theroamingrenegades.com/search/label/USA'>The USA</a></li>
        </ul>
      </li>
      <li>Asia
        <ul>
          <li><a href='http://www.theroamingrenegades.com/search/label/Russia'>Russia</a></li>
          <li><a href='http://www.theroamingrenegades.com/search/label/Japan'>Japan</a></li>
        </ul>
      </li>
     </ul>
  </li>
  <li><a href='LINK'>Adventures</a>
    <ul>
      <li><a href='http://www.theroamingrenegades.com/search/label/Adventures%20Mountains'>Mountains</a></li>
      <li><a href='http://www.theroamingrenegades.com/search/label/Adventures%20Climbing'>Climbing</a></li>
      <li><a href='http://www.theroamingrenegades.com/search/label/Adventures%20Urbex'>Urbex</a></li>
      <li><a href='http://www.theroamingrenegades.com/search/label/Adventure%20Slackline'>Slackline</a></li>
      <li><a href='http://www.theroamingrenegades.com/search/label/Adventure%20Skateboarding'>Skateboarding</a></li>
    </ul>
  </li>
  <li><a href='http://www.theroamingrenegades.com/search/label/Experiences%2F%20Stories'>Experiences</a></li>
  <li><a href='http://www.theroamingrenegades.com/search/label/Motivational'>Motivation/ Rants</a></li>
  <li><a href='https://www.facebook.com/Hilditchshortexplore/photos_stream?tab=photos_albums'>Travel Photos</a></li>
  <li><a href='LINK'>Music</a>
    <ul>
      <li><a href='http://www.theroamingrenegades.com/search/label/Music%20Gigs'>Gigs</a></li>
      <li><a href='http://www.theroamingrenegades.com/p/music.html'>Bands Seen List</a></li>
      <li><a href='http://www.theroamingrenegades.com/search/label/Music%20Festivals'>Festivals</a></li>
      <li><a href='http://www.theroamingrenegades.com/search/label/Music%20Experiences'>Experiences</a></li>
    </ul>
  </li>
  <li><a href='LINK'>Other</a>
    <ul>
      <li><a href='http://www.theroamingrenegades.com/search/label/Other%20Tattoos'>Tattoos</a></li>
      <li><a href='http://www.theroamingrenegades.com/search/label/Other%20Pets'>Pets</a></li>
      <li><a href='http://www.theroamingrenegades.com/2014/09/getting-married-in-nyc.html'>Our NEW YORK Wedding!</a></li>
      <li><a href="http://www.nichilditch-short.co.uk"_blank">Nic's Art & Design Blog</a></li>
      <li><a href='http://www.theroamingrenegades.com/search/label/Other%20Year%20Review%2F%20Plan'>Year Plans & Reviews</a></li>
    </ul>
  </li>
</ul>

Answer 2

对于3级下拉菜单，请尝试这样做：

<li>
    <a href="">Destination</a>
    <ul>
        <li>
            <a href="">Europa</a>
            <ul>
                <li><a href="">Poland</a></li>
                <li><a href="">Slovakia</a></li>
                <li><a href="">Austria</a></li>
            </ul>
        </li>
        <li>
            <a href="">Asia</a>
            <ul>
                <li><a href="">China</a></li>
                <li><a href="">Tokyo</a></li>
            </ul>
        </li>
        <li>
            <a href="">America</a>
            <ul>
                <li><a href="">Canada</a></li>
                <li><a href="">South America</a></li>
                <li><a href="">North America</a></li>
            </ul>
        </li>
    </ul>
</li>

Answer 3

谢谢，我尝试了两种不同级别的成功/失败。下面的屏幕截图是按发布时间顺序排列的。

http://i162.photobucket.com/albums/t242/gunner_bean/Untitled-1-2.jpg

这可能是一个导致菜单显示的CSS问题吗？

Answer 4

很难在 Blogger 中添加多位下拉菜单。如果css代码中有一个小的忽略点，菜单将不起作用。我为 Blogger 创建了一个示例菜单。

#AnaMenu {
width: 920px;            /* Menu width */
height: 30px;           /* Menu heigh */
position: relative;
background: #0080ff;
margin:0 0 0 -30px;
padding: 10px 0 0 15px;
border: 0;              
}
#nav { display:block;background:transparent;
margin:0;padding: 0;border: 0 }
#nav ul { float: none; display:block;
height:35px; 
margin:16px 0 0 0;border:0;
padding: 15px 0 3px 0; 
overflow: visible;
 }
#nav ul li{border:0;}
#nav li a, #nav li a:link, #nav li a:visited {height:23px;
-webkit-transition: background-color 1s ease-out;
-moz-transition: background-color 1s ease-out;
-o-transition: background-color 1s ease-out;
transition: background-color 1s ease-out;
color: #fff;                               /* Change colour of link */
display: block;border:0;border-right:1px solid #efefef;text-decoration:none;
margin: 0;letter-spacing:0.6px;
padding: 2px 10px 2px 10px;             
}
#nav li a:hover, #nav li a:active {
color: #fff;  
margin: 0;background:#6ab5ff;border:0;
padding: 2px 10px 2px 10px;      
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #fafafa;      
width: 200px;
color: #05429b;           
float: none;
margin: 0;border-bottom:1px solid #9be6e9;
padding: 8px 15px;        
}
#nav li li a:hover, #nav li li a:active {
background: #2793ff;       
color: #fff;               
padding: 8px 15px;border:0 ;text-decoration:none}
#nav li {float: none; display: inline-block;margin: 0; padding: 0; border: 0 }
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 200px; margin: 0; padding: 0;background:transparent}
#nav li ul a { width: 170px;border:0;text-decoration:none;font-size:14px } 
#nav li ul ul { margin: -40px 0 0 230px }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; } 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } 
#nav li:hover, #nav li.sfhover {position: static;}

我解释了如何在页面上向博客添加菜单示例：Css multi level dropdown menu

试图为博客创建3级HTML下拉菜单，而不是工作

4 个答案: