html css中的下拉菜单对齐方式

i try to create dropdown menus in html using css here is code

我尝试使用CSS在html中创建下拉菜单,这里是代码

<style type="text/css">
.men_tp ul{ margin:0px; padding:0px;}
.men_tp ul li{ display:inline-block; position:relative;}
.men_tp ul li a{ text-decoration:none; font-size:11px; color:#000000; }
.men_tp ul li ul{ display:none; }
.men_tp ul li:hover ul { display: block;  position:absolute; width:150px; top:21px; background-color:#000;  }
.men_tp ul li ul li{ display: block; border-bottom:1px solid #999999; line-height:25px;  }
.men_tp ul li ul li a{ color:#FFFFFF;   }

</style>

<div class="men_tp">

<ul>
 <li><a href="index.html">HOME</a></li>
 <li><img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /></li>
 <li><a href="About Us.html">ABOUT US</a></li>
 <li><img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /></li>
<li><a href="#">TRAINING</a></li>
<li> <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /></li>
<li><a href="#">PUBLISHING</a> </li>
<li><img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /></li>
<li><a href="#">CONFERENCES</a></li>
<li><img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /></li>
<li><a href="#">RESEARCH</a>
<ul>
      <li><a href="#">GLTR Journals</a></li>
      <li><a href="#">Data collection Services</a></li>
      <li><a href="#">Edit and Proof Reading</a></li>
    </ul>
</li>
<li><img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /></li>
<li><a href="#">CONTACT US</a>
<ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
    </ul>
</li>
</ul>


  </div>

but when i this code it shows me like this

但是,当我这个代码,它显示我这样

when i drag mouse on research and then dropdown menu then it disappears and i unable to click any text like GLTR Journals etc and also i want another dropdown menu on right hand sider when i hover mouse on GLTR Journals it will show me another menu

当我在研究上拖动鼠标然后下拉菜单然后它消失了,我无法点击任何文本,如GLTR期刊等,而且我还想在右边的另一个下拉菜单,当我将鼠标悬停在GLTR期刊上时它会显示另一个菜单

2nd image

2nd image

any help?

thankx

1 个解决方案

#1

I think you want this:

我想你想要这个:

.men_tp ul {
    margin:0px;
    padding:0px;
}
.men_tp ul li {
    display:inline-block;
    position:relative;
}
.men_tp ul li a {
    text-decoration:none;
    font-size:11px;
    color:#000000;
}
.men_tp ul li ul {
    display:none;
}
.men_tp ul li ul li ul {
    display:none !important;/*Add display none in nested ul*/
}
.men_tp ul li ul li:hover ul {
    display: block !important;/*Add display block in nested ul*/
    position:absolute;
    width:150px;
    background-color:#000;
    left: 150px;
    top: 0px;
}
.men_tp ul li:hover ul {
    display: block;
    position:absolute;
    width:150px;
    background-color:#000;
}
.men_tp ul li ul li {
    display: block;
    border-bottom:1px solid #999999;
    line-height:25px;
}
.men_tp ul li ul li a {
    color:#FFFFFF;
}

<div class="men_tp">
    <ul>
        <li><a href="index.html">HOME</a>

        </li>
        <li>
            <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" />
        </li>
        <li><a href="About Us.html">ABOUT US</a>

        </li>
        <li>
            <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" />
        </li>
        <li><a href="#">TRAINING</a>

        </li>
        <li>
            <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" />
        </li>
        <li><a href="#">PUBLISHING</a> 
        </li>
        <li>
            <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" />
        </li>
        <li><a href="#">CONFERENCES</a>

        </li>
        <li>
            <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" />
        </li>
        <li><a href="#">RESEARCH</a>

            <ul>
                <li><a href="#">GLTR Journals</a>

                    <ul>
                        <li><a href="#">test</a>

                        </li>
                        <li><a href="#">test</a>

                        </li>
                        <li><a href="#">test</a>

                        </li>
                    </ul>
                </li>
                <li><a href="#">Data collection Services</a>

                </li>
                <li><a href="#">Edit and Proof Reading</a>

                </li>
            </ul>
        </li>
        <li>
            <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" />
        </li>
        <li><a href="#">CONTACT US</a>

            <ul>
                <li><a href="#">HTML</a>

                </li>
                <li><a href="#">CSS</a>

                </li>
            </ul>
        </li>
    </ul>
</div>