Question

我想创建子菜单我唯一的问题是子菜单应该在主菜单下面而不是每个主菜单li。像这样的东西

这是我的代码：

    <div id="menu_controller">
            <ul class="menu"> 
                    <li>&nbsp;</li>
                    <li >
                        <a href="#">
                            کدهای تبلیغاتی
                        </a>
                        <span>&nbsp;</span>
                        <ul >
                            <li><a href="#">کل سفارش</a></li>
                            <li><a href="#">سفارش معلق</a></li>
                            <li><a href="#">سفارش آماده به ارسال</a></li>
                            <li><a href="#">سفارش ارسال شده</a></li>
                            <li><a href="#">سفارش توزیع شده</a></li>
                            <li><a href="#">سفارش وصول شده</a></li>
                            <li><a href="#">سفار برگشتی</a></li>

                        </ul>
                    </li>
                    <li>&nbsp;</li>
                        <li >

                        <a href="#">
                            فروشگاه
                        </a>
                <span>&nbsp;</span>
                        <ul >
                            <li><a href="#">کل سفارش</a></li>
                            <li><a href="#">سفارش معلق</a></li>
                            <li><a href="#">سفارش آماده به ارسال</a></li>
                            <li><a href="#">سفارش ارسال شده</a></li>
                            <li><a href="#">سفارش توزیع شده</a></li>
                            <li><a href="#">سفارش وصول شده</a></li>
                            <li><a href="#">سفار برگشتی</a></li>

                        </ul>
                    </li>
                    <li>&nbsp;</li>
                        <li>

                        <a href="#">
                            گزارشات
                        </a>
                <span>&nbsp;</span>
                        <ul >
                            <li><a href="#">کل سفارش</a></li>
                            <li><a href="#">سفارش معلق</a></li>
                            <li><a href="#">سفارش آماده به ارسال</a></li>
                            <li><a href="#">سفارش ارسال شده</a></li>
                            <li><a href="#">سفارش توزیع شده</a></li>
                            <li><a href="#">سفارش وصول شده</a></li>
                            <li><a href="#">سفار برگشتی</a></li>

                        </ul>
                    </li>
                    <li>&nbsp;</li>
                        <li>

                        <a href="#">
                            محصولات
                        </a>
                <span>&nbsp;</span>
                        <ul >
                            <li><a href="#">کل سفارش</a></li>
                            <li><a href="#">سفارش معلق</a></li>
                            <li><a href="#">سفارش آماده به ارسال</a></li>
                            <li><a href="#">سفارش ارسال شده</a></li>
                            <li><a href="#">سفارش توزیع شده</a></li>
                            <li><a href="#">سفارش وصول شده</a></li>
                            <li><a href="#">سفار برگشتی</a></li>

                        </ul>
                    </li>
                    <li>&nbsp;</li>
                        <li>

                        <a href="#">
                            امور مال
                        </a>
                <span>&nbsp;</span>
                        <ul >
                            <li><a href="#">کل سفارش</a></li>
                            <li><a href="#">سفارش معلق</a></li>
                            <li><a href="#">سفارش آماده به ارسال</a></li>
                            <li><a href="#">سفارش ارسال شده</a></li>
                            <li><a href="#">سفارش توزیع شده</a></li>
                            <li><a href="#">سفارش وصول شده</a></li>
                            <li><a href="#">سفار برگشتی</a></li>

                        </ul>
                    </li>

                        <li>&nbsp;</li>
                        <li>

                        <a href="#">
                            پیام ها
                        </a>

                        <div></div>
                        <span>&nbsp;</span>
                        <ul >
                            <li><a href="#">کل سفارش</a></li>
                            <li><a href="#">سفارش معلق</a></li>
                            <li><a href="#">سفارش آماده به ارسال</a></li>
                            <li><a href="#">سفارش ارسال شده</a></li>
                            <li><a href="#">سفارش توزیع شده</a></li>
                            <li><a href="#">سفارش وصول شده</a></li>
                            <li><a href="#">سفار برگشتی</a></li>

                        </ul>
                    </li>

                </ul>
</div>

和我的css代码：

#menu_controller
{
    width:1000px;
    margin:0 auto;
    border:1px solid red;
}
ul.menu
{
    overflow:hidden;
}
ul.menu li
{
    float:right;
}
ul.menu li:hover {position: absolute;}
ul.menu li:hover ul{display:block; position: absolute;}
ul.menu li:hover li
{
    display:block;
    position: relative;
    overflow:hidden;

}
ul.menu li ul
{
    display: none;
}

Answer 1

有一些变化，我可以通过一些变化来实现这一点。

.menu{
  list-style: none;    overflow:hidden;
}

ul.menu li{
   float:left;
 display:block;
}

您可以在this fiddle

查看此信息

Answer 2

试试看!!它可能对你有帮助。

<!doctype html>
<html>
    <head>
    <title>A dropdown menu </title>
<style>
#cssmenu ul {
  margin: 0;
  padding: 7px 6px 0;
  background: #adadad url(overlay.png) repeat-x 0 -110px;
  line-height: 100%;
  border-radius: 1em;
  font: normal 0.5333333333333333em Arial, Helvetica, sans-serif;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  width: auto;
}
#cssmenu li {
  margin: 0 5px;
  padding: 0 0 8px;
  float: left;
  position: relative;
  list-style: none;
}
#cssmenu a,
#cssmenu a:link {
  font-weight: bold;
  font-size: 13px;
  color: #e7e5e5;
  text-decoration: none;
  display: block;
  padding: 8px 20px;
  margin: 0;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#cssmenu a:hover {
  background: #000;
  color: #fff;
}
#cssmenu .active a,
#cssmenu li:hover > a {
  background: #c7c7c7 url(overlay.png) repeat-x 0 -40px;
  background: #666666 url(overlay.png) repeat-x 0 -40px;
  color: #444;
  border-top: solid 1px  #f8f8f8;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 0 #ffffff;
}
#cssmenu ul ul li:hover a,
#cssmenu li:hover li a {
  background: none;
  border: none;
  color: #666;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#cssmenu ul ul a:hover {
  background: #adadad url(overlay.png) repeat-x 0 -100px !important;
  color: #fff !important;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu li:hover > ul {
  display: block;
}
#cssmenu ul ul {
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 40px;
  left: 0;
  background: url(overlay.png) repeat-x 0 0;
  border: solid 1px #b4b4b4;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#cssmenu ul ul li {
  float: none;
  margin: 0;
  padding: 3px;
}
#cssmenu ul ul a,
#cssmenu ul ul a:link {
  font-weight: normal;
  font-size: 12px;
}
#cssmenu ul:after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
* html #cssmenu ul {
  height: 1%;
}

</style>
</head>

<body>
<div id='cssmenu'>
        <ul>
        <li class='active'><a href='index.html'><span>Home</span></a></li>
        <li class='has-sub'><a href='#'><span>Products</span></a>
            <ul>
                <li><a href='#'><span>Widgets</span></a></li>
                <li><a href='#'><span>Menus</span></a></li>
                <li class='last'><a href='#'><span>Products</span></a></li>
            </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Company</span></a>
            <ul>
                <li><a href='#'><span>About</span></a></li>
                <li class='last'><a href='#'><span>Location</span></a></li>
            </ul>
        </li>
        <li class='last'><a href='#'><span>Contact</span></a></li>
        </ul>
</div>
</body>
</html>

如何选择当前的li元素div标签

2 个答案: