这是我从Internet找到的用于在91sec.blogspot.com网站上显示下拉菜单的所有代码。

1将以下代码添加到模板> Customize > Advanced > Add CSS. 
这会将代码放在模板中> Edit HTML.


/ *-START DROPDOWN CSS-* /

#导航栏 {
宽度:100%; / *更改导航栏的宽度* /
高度:40px; / *更改导航栏的高度* /
}

#navigationcss {
保证金:0自动;
填充:0;
}

#navigationcss ul {
浮动:无;
列表样式:无;
边距:0;
填充:0;
溢出:可见;
}

#navigationcss li a,#navigationcss li a:link,#navigationcss li a:visited {
颜色:#ffffff; / *更改主链接的颜色* /
显示:块;
边距:0;
填充:10px 30px; / *将第一个数字更改为顶部/底部间距,然后将第二个数字更改为左/右侧间距* /
}

#navigationcss li a:悬停,#navigationcss li a:active {
颜色:#69b4ff; / *悬停在链接上时更改链接的颜色* /
边距:0;
填充:10px 30px; /* make sure these are the same as the section above! */
}

#navigationcss li li a,#navigationcss li li a:link,#navigationcss li li a:visited {
背景:#ffffff; / *更改下拉框的背景颜色* /
宽度:150像素;
颜色:#000000; / *更改下拉链接的颜色* /
浮动:无;
边距:0;
填充:7px 10px; / *与上面类似,更改链接周围的间距* /
}

#navigationcss li li a:悬停,#navigationcss li li a:active {
背景:#69b4ff; / *更改悬停时下拉项的背景颜色* /
颜色:#ffffff; / *更改悬停时下拉链接的颜色* /
填充:7px 10px; / *保持与上述相同* /
}

#navigationcss li {
浮动:无;
显示:inline-block;
列表样式:无;
边距:0;
填充:0;
}

#navigationcss li ul {
z索引:9999;
位置:绝对;
左:-999em;
高度:自动;
宽度:150像素;
边距:0;
填充:0;
}

#navigationcss li:hover ul,#navigationcss li li:hover ul,#navigationcss li li li li:hover ul,#navigationcss li.sfhover ul,#navigationcss li li.sfhover ul,#navigationcss li li li.sfhover ul {
左:自动;
}

/ *-END DROPDOWN CSS-* /

.tabs-outer,.tabs .widget ul {溢出:可见;}

]]></b:skin>

注意:代码“.tabs-outer,.tabs .widget ul {溢出:可见;}”用于解决有时在某些Blogger模板上不可见的下拉菜单的问题。

2.  Go to Layout >添加一个新的HTML / JavaScript小工具,并向其中添加以下代码。 
不同的Blogger模板可能具有不同的布局来放置此小工具。


<!–Start Navigation –>
<div id =“ navigationbar”>
<ul id =“ navigationcss”>
<li><a href=”http://91sec.blogspot.com”>Home</a></li>

<li><a href=”//91sec.blogspot.ca/p/sitemap2.html”>Sitemap</a>
<ul>
<li><a href=’//91sec.blogspot.ca/p/sitemap2.html’>Sitemap Page</a></li>
<li><a href=’//91sec.blogspot.ca/p/sitemap_2.html’>Categories</a></li>
</ul>
</li>

<li><a href=””>Resources</a>
<ul>
<li><a href=’//91sec.blogspot.ca/p/othe.html’>Online 资源资源</a></li>
<li><a href=’//91sec.blogspot.ca/p/new-things-to-learn.html’>Learning</a></li>
</ul>
</li>

<li><a href=””>Tools</a>
<ul>
<li><a href=’http://91sec.blogspot.com/p/tools.html’>Network 工具类</a></li>
<li><a href=’http://91sec.blogspot.com/2015/07/my-top-network-security-tools.html’>Security 工具类</a></li>
<li><a href=’http://91sec.blogspot.com/2013/08/some-of-my-network-troubleshooting-tools.html’>Internet 工具类</a></li>
<li><a href=’http://91sec.blogspot.com/2016/03/collection-of-website-and-tools-for.html’>Blogger 工具类</a></li>
</ul>
</li>

<li><a href=””>About</a>
<ul>
<li><a href=’//91sec.blogspot.ca/p/about-me.html’>About Me</a></li>
<li><a href=’//91sec.blogspot.ca/p/consulting-services.html’>Consulting</a></li>
<li><a href=’//91sec.blogspot.ca/p/services.html’>Services</a></li>
</ul>
</li>

<li><a href=”http://34.215.22.243″>fabiandinkins.com</a></li>
</ul>
</div>
<!–End Navigation –>

通过 约翰

发表评论