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

我想创建子菜单，我拥有的唯一标志是子菜单应该在主菜单下方，而不是每个主菜单里。像这样我该如何选择当前的li元素div标签

这是我的代码：

<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; 
}

来源

2013-12-11 user2961617

你有没有在你的CSS – DevelopmentIsMyPassion

提到的类“广告”的代码没有它是我在我的设计第二步，在那之后我想设计埃维主菜单和设置图像等。 – user2961617

我唯一的问题是我想要所有的子菜单在主菜单 – user2961617

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

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

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

您可以检查在this fiddle

来源

2013-12-11 09:36:38

该工作试试吧！它可以帮助你。

<!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>

来源

2013-12-11 10:49:59

正如我上面提到的，我想设置子菜单在一个地方不是每个主菜单项目后这样[点击我看到]（http://www.apnsoft.com /Articles/Images/20120516/Horizontal.gif） – user2961617

请首先检查您已发布的代码。这看起来不像您的解释。或者请发布您的完整代码。 –

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

回答

相关问题