菜單和子菜單問題？

在我的網頁中，我有兩個類，如菜單和左邊。在菜單中我有ul，li類。我想使用的UL，李在左側也，但問題是，如果我使用了UL，李，它與菜單UL，李

UL -underlist，李相匹配 - 列表

我試着改變工作表的代碼，

我的css代碼。

#leftside{ 
    float: left; 
    width: 230px; 
    margin-left: 5px; 
    margin-top: 15px; 
    overflow: hidden; 
    font: 13px Arial, Helvetica, sans-serif; 
} 

a { 

    text-decoration: none; 
    color: #000000; 
} 

a:hover { 

    text-decoration: underline; 
    color: maroon; 
} 

ul { 
    padding: 10px 10px 2px 0; 
    margin: 0px; 
    list-style: none; 
} 

li li { 

    margin-left: 10px; 
    margin-right: 10px; 
    line-height: 30px; 
    padding-left: 15px; 
    border-bottom: 1px dashed #BDBDBD; 
    background: url(images/img04.jpg) no-repeat left 50%; 
}

HTML代碼

<li>      
<ul> 
<li><a href="#">Company Profile</a></li> 
<li><a href="#">Enquiry</a></li> 
<li><a href="#">Career</a></li> 
<li><a href="#">Location Map</a></li> 
</ul> 
</li>

UL，列表與菜單UL匹配，李

如何來解決這個問題。請。

來源

2010-01-18 Gopal

爲了減少內部列表上方的空間量，請更改pa dding爲ul，使其爲0或負數。

例如：

ul { 
    padding: 0 10px 2px 0; 
    margin: 0px; 
    list-style: none; 
}

你也可以使用一個特殊的樣式表做這樣的事情來糾正在Internet Explorer中的問題：

<!--[if IE 7]> 
<link rel="stylesheet" type="text/css" href="iespecific.css" /> 
<![endif]-->

然後，您將需要第二個CSS文件命名爲iespecific.css，其中有上面的ul樣式。

來源

2010-01-18 04:29:31

使用一個id來區分這兩者。

例如，HTML是：

<ul id="outter"> 
<li>The Outter List</li> 
<li>More Outter List      
    <ul id="inner"> 
    <li>This is the inner list</li> 
    <li><a href="#">Company Profile</a></li> 
    <li><a href="#">Enquiry</a></li> 
    <li><a href="#">Career</a></li> 
    <li><a href="#">Location Map</a></li> 
    </ul> 
</li> 
<li>Still The Outter</li> 
</ul>

在CSS，你會有這樣的事情：

#outter ul { 
    padding: 10px 10px 2px 0; 
    list-style: none; 
} 
#outter li { 
    margin-left: 10px; 
    line-height: 30px; 
    padding-left: 15px; 
} 
#inner ul { 
    padding: 10px 10px 2px 15px; 
    list-style: none; 
} 
#inner li { 
    margin-left: 10px; 
    margin-right: 10px; 
    line-height: 30px; 
    padding-left: 15px; 
    border-bottom: 1px dashed #BDBDBD; 
    background: url(images/img04.jpg) no-repeat left 50%; 
}

這看起來是這樣的：

alt text http://img16.imageshack.us/img16/2376/examplesg.png

來源

2010-01-18 03:55:45

@Josh，謝謝，但問題是我得到更多的菜單頂部的空間。我也調整了填充，仍然在頂部顯示更多空間。如何刪除菜單頂部的空間。 – Gopal 2010-01-18 04:15:27

您將不得不減小填充或邊距的大小。你甚至可能需要一個負數。但沒有你的問題的形象，我不能告訴你更多。 – 2010-01-18 04:20:59

在firefox中，它在菜單頂部顯示的空間較少，但在資源管理器中，它在菜單頂部顯示更多空間。如何刪除菜單頂部的空間。請 – Gopal 2010-01-18 04:28:25

菜單和子菜單問題？

回答

相關問題