Question

我很难在我现有的网站主菜单中创建下拉菜单。我已经尝试了很多次，但没有结果有时我得到菜单内联有时一切都被打扰了。

HTML code：

＆＃13;

<ul class="mainmenu">
<li><a href="<?=MakeUrl('home')?>">Best Forex Broker</a></li>
<li><a href="<?=MakeUrl('toprated')?>">Top Rated Brokers</a></li>
<li>
    <a href="<?=MakeUrl('coupons')?>"> Forex Bonus</a>
    <ul>
        <li><a href="#">drop1</a></li>
        <li><a href="#">drop2</a></li>
        <li><a href="#">drop3</a></li>
    </ul>
</li>
<li><a href="<?=MakeUrl('articles')?>">Articles & Tutorials</a></li>
<li><a href="<?=MakeUrl('affiliates')?>">Affiliate Programs</a></li>
<li>
    <a href="<?=MakeUrl('feeds')?>"><img src="<?=$site_folder?>/images/rss.png" alt="RSS" /></a>
</li>
<li>&nbsp;</li>
</ul>

＆＃13;

和CSS代码：

＆＃13;

div.mainmenu { background: url('images/body-bg.gif') 0px -50px repeat-x; }
div.mainmenu div.center { background: url('images/body-bg.gif') 0px -50px repeat-x; border-bottom-color: #007399; border-left: none; border-right: none; }
ul.mainmenu { height: 28px; padding: 4px 0px 5px 0px; background: url('images/body-bg.gif') 0px -50px repeat-x; }
ul.mainmenu li { float: left; padding: 5px 10px 5px 12px; margin: 0px;  background: url('images/mainmenu-sep2.gif') left repeat-y; font-size: 15px; }
ul.mainmenu li a { color: #fff;  }
ul.mainmenu li a:hover { color: #e0f0ff; }
ul.mainmenu img { width: 20px; height: 20px; vertical-align: middle; margin: 0px 0px -2px 0px; }

＆＃13;

我在等待任何人帮助我。感谢

Answer 1

所以，你可能会做类似下面的事情。将类.dropdown添加到2dn级菜单并隐藏它以开始。然后，在li:hover上显示它。你需要像我在CSS中那样在你的主菜单和下拉菜单中应用位置。您可以随意按照自己喜欢的方式设置下拉样式。看一看。

＆＃13;

ul.mainmenu { position: relative; height: 28px; padding: 4px 0px 5px 0px; }
ul.mainmenu li { list-style-type: none; float: left; padding: 5px 10px 5px 12px; margin: 0px; font-size: 15px; }
ul.mainmenu li a { color: #000;  }
ul.mainmenu li a:hover { color: #e0f0ff; }
ul.dropdown { position: absolute; overflow: hidden; top: 24px; margin: 0; display: none; background: #ccc; padding: 0; max-width: 100px; }
ul.mainmenu li:hover .dropdown, .dropdown:hover { display: block; }

＆＃13;

<ul class="mainmenu">
<li><a href="<?=MakeUrl('home')?>">Best Forex Broker</a></li>
<li><a href="<?=MakeUrl('toprated')?>">Top Rated Brokers</a></li>
<li>
    <a href="<?=MakeUrl('coupons')?>"> Forex Bonus</a>
    <ul class="dropdown">
        <li><a href="#">drop1</a></li>
        <li><a href="#">drop2</a></li>
        <li><a href="#">drop3</a></li>
    </ul>
</li>
<li><a href="<?=MakeUrl('articles')?>">Articles & Tutorials</a></li>
</ul>

＆＃13;

想要在我现有的主菜单中创建下拉菜单

1 个答案: