CSS子链接不对

Question

在IE7中不起作用：

我的CSS：

#main_navi  li{
  vertical-align:middle;
  position: relative;
  list-style-type: none;
    display:inline;
    display:inline-block;
    *display:inline; /*IE7*/
    *zoom:1; /*IE7*/

}
#nav ul {
  list-style-type:none;
  margin:0;
}  

#nav ul li ul {
  position:absolute;
  top:104px;
  width:1059px;
  padding:0;
  margin:0 0 0 -40px;
  background:#e9e9e9;
  /*
  -webkit-border-radius: 5px;
  */
  /*
  border-radius: 5px; 
  */
  border:1px solid #dedad6;
}  

.ds ul {
  display:block; 
}


.dsn ul {
  display:none; 
}

a.main_navi_0:link, a.main_navi_0:visited {
  color:#696969;
  font-size:16px;
  font-weight:200;
  font-family: 'Allerta', sans-serif;
  height:65px;
  padding:40px 10px 0 20px;
  display:inline;
  float:left;
  /*
  text-align:center;   
  */
}


a.main_navi_1:link, a.main_navi_1:visited {
  font-size:16px;
  font-weight:200;
  font-family: 'Allerta', sans-serif;
  height:65px;
  padding:40px 10px 0 20px;
  display:inline;
  float:left;
  text-align:center;  
  color: #3c94e2;
}

a.main_navi_0:hover, a.main_navi_1:hover {
  color:#000;
  border-bottom:5px solid #3c94e2;
}

a.sub_navi_0:link, a.sub_navi_0:visited {
color:#696969;
font-size:13px;
font-weight:200;
font-family: 'Allerta', sans-serif;
height:25px;
padding:5px 10px 0 10px;
display:inline;
float:left;
text-align:center;
/*
z-index:999;
*/
position:relative;
border-bottom:2px solid #dedad6;    
}

a.sub_navi_1:link, a.sub_navi_1:visited {
color:#696969;
font-size:13px;
font-weight:200;
font-family: 'Allerta', sans-serif;
height:25px;
padding: 5px 10px 0 10px;
/*
display: inline;
float: left;
*/
text-align: center;
/*
z-index:999;
*/
position: relative;
border-bottom: 2px solid #3c94e2; 
}

a.sub_navi_0:hover,  a.sub_navi_1:hover {
color:#000;
border-bottom:2px solid #3c94e2;
}    

我的html文件：

<div id="nav">
    <div id="logo">
        <div id="main_navi">
            <ul>
                <li class="dsn">
                <a class="main_navi_0" href="ueber-uns.html">Über uns</a>
                <ul>
                </li>
                                    </ul>
                 <li class="dsn">
            </ul>
        </div>
    </div>
</div>

我在IE7中的输出

Link1 Link2 Link3
  SL11 SL11        //SL11 = SubLink 11 SL12 = Sublink 12 Matrix
        SL21 SL22

我想那样：

Link1 Link2 Link3
SL11  SL12
//or
SL21  SL22

感谢您的帮助！

Answer 1

<强> HTML

<div id="nav">
            <div id="logo">
                <div id="main_navi">
                    <ul>
                        <li>Link1 
                            <ul>
                                <li>Link 11</li>
                                <li>Link 21</li>
                            </ul>
                        </li>
                        <li>Link3 
                            <ul>
                                <li>Link 12</li>
                                <li>Link 22</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

<强> CSS：

ul{
    list-style-type:none;
}
#nav ul li
{
    float:left;
    display:inline-block;
     padding:10px;
}
#nav ul li ul li
{
    clear:left;
    margin-left:-50px;
    padding:10px;
}

Fiddle Demo

<强>输出：

您还可以查看Pure CSS Sub-Sub菜单的小提琴.. !!

Fiddle

Answer 2

您的代码格式错误，您应该有类似

的内容

    <div id="horizontalmenu">
    <div id="logo">
        <div id="main_navi">
            <ul>
                <li>Link1
                    <ul>
                        <li>Link 11</li>
                        <li>Link 21</li>
                    </ul>
                </li>
                <li>Link2
                    <ul>
                        <li>Link 12</li>
                        <li>Link 22</li>
                    </ul>
                </li>
                <li>Link3</li>
                <li>Link4</li>
            </ul>
        </div>
    </div>
</div>

无论如何，我准备了horiznal菜单的完整示例click here

Answer 3

您的标记无效（您打开2个ul元素，但关闭一个）。我猜这是你的问题。