1. 首頁
  2. 問答
  3. UL下拉菜單問題

UL下拉菜單問題

2012-01-25 229 views
0

我的下拉菜單有兩個問題，一個涉及鏈接，另一個涉及IE7問題。問題後的代碼如下，在這兩種情況下，我想避免的JavaScript（該項目的關鍵組成部分）UL下拉菜單問題

  1. 我成功地突出了鏈接的文本，當我徘徊，包括上述一些像素，下面留下&的權利。然而，可點擊的突出部分（即，我可以訪問超鏈接的地方）的唯一部分是文本的位置，並且我希望能夠使整個突出顯示，填充和文本都可點擊。我之前做過，但我對目前的代碼如何解決它感到困惑。有人可以幫我嗎？

  2. 使用相同的下拉菜單，一切工作正常，除了在IE7。一些IE7用戶抱怨說，一旦他們突出顯示菜單項並且發生下拉菜單，他們只能在下拉菜單消失前下到第二個菜單項，並且每次下拉菜單都會顯示下拉菜單項。我知道這是IE7的問題，但我需要爲它解決問題。任何幫助？

我的CSS代碼：

ul       { list-style: none; } 
p       { margin: 8px 0; } 
ul.dropdown     { list-style-type:none;height:24px; top:2px; padding:0px 0px 0px 0px;;margin:0px 0px 0 1px;vertical-align:bottom; color:#000000; position: relative; } 
ul.dropdown a:hover   { color: #000; } 
ul.dropdown a:active  { color: #ffa500; } 
ul.dropdown li    { float: left; position:relative; vertical-align:middle; background-position:0 -40px; padding: 2px 4px 5px 2px; margin-right:6px;} 
ul.dropdown li a   { display: block; padding: 0px 0px; color: #222; text-decoration:none; vertical-align:middle; width:100%;} 
ul.dropdown li:last-child a { border-right: none; } 
ul.dropdown li.hover, 
ul.dropdown li:hover  { background: #F3D673; color: black; position: relative; } 
ul.dropdown li.hover a  { color: black; } 

ul.dropdown ul    { width: 152px; visibility: hidden; position: absolute; top: 100%; left: -40px; z-index:60;} 
ul.dropdown ul li   { font-weight: normal; background: #ECEAD8; color: #000; width:100%;/*border-bottom: 1px solid #ccc;*/ float: none; } 
ul.dropdown ul li.nohover { color: black; background: #ECEAD8; position:relative; } 

ul.dropdown ul li a   { border-right: none; width: 100%; display: inline-block; min-height:1.4em;} 

ul.dropdown ul ul   { left:72.7%;top: 0px; width:158px; z-index:50; display:inline-block;} 
ul.dropdown li:hover > ul { visibility: visible; display:block; } 

#arrowRight     { float:right; margin-top:-11px;} 
a.moreItems {background: url(/images/menu/arrow_r.gif) no-repeat right;}

下面是HTML代碼：

<!DOCTYPE HTML> 
<html> 
<head> 
<title></title> 
<link rel=stylesheet type="text/css" href="menustylesheet.css"> 
</head> 
<body> 
<table width="100%" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td height="25" class="topmenu" bgcolor="##ECEAD8" nowrap> 
<ul class="dropdown"> 
    <li><a href=""><b>Item 1</b> <img src="/images/menu/arrow_d.gif" border="0" height="7" width="7"></a> 
     <ul> 
      <li><a class="moreItems" href="">Item 1-1</a> 
       <ul> 
        <li><a href="">Item 1-1-1</a></li> 
       </ul> 
      </li> 
      <li><a class="moreItems" href="">Item 1-2</a> 
       <ul> 
        <li><a href="">Item 1-2-1</a></li> 
       </ul> 
      </li> 

      <li>Item 1-3 <div style="vertical-align:middle;"><img src="/images/menu/arrow_r.gif" id="arrowRight" border="0"></div> 
       <ul> 
        <li><a href="">Item 1-3-1</a></li> 
        <li><a href="">Item 1-3-2</a></li> 
       </ul> 
      </li> 
      <li><a href="">Item 1-4</a></li> 
      <li><a href="">Item 1-5</a></li> 
    </ul> 
    </li> 
</ul> 

     </td> 
    </tr> 
    <tr><td bgcolor="##c0c0c0" style="height:1px;"></td></tr> 
</table> 
</body> 
</html>

我道歉，如果這已經回答過了，但我希望有人能在代碼中找準我需要改變或修改才能使其工作。

來源

2012-01-25 user1100412

回答

2

我對你的第一個問題有一個答案。當做這種菜單。我儘可能遠離填充。我覺得它更容易只是使用空間，但對於初學者，讓我們看看在一個頁面我爲你：

http://www.albatrossfonts.com/stack/ulbuttons.html

我會在下面解釋此代碼。 這裏是我的HTML：

<div id="wrapper"> 

    <ul class="dropdown"> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 1</a></li> 
    </ul> 

</div>

而CSS：我宣佈一個

.dropdown 
{ 
    width: 200px; 
    display:block; 
    margin: 200px auto 0 auto; 
    list-style-type: none; 
    padding: 0; 
} 

.dropdown li 
{ 
    width: 200px; 
    height: 44px; 
    display: block; 
    float: left; 
    margin: 1px 0 0 0; 
    list-style-type: none; 
    padding: 0; 
} 

.dropdown li a:link, .dropdown li a:visited 
{ 
    width: 200px; 
    height: 44px; 
    display: block; 
    float: left; 
    margin: 0; 
    color: #ffffff; 
    background-color: #666666; 
    text-decoration: none; 
    text-indent: 12px; 
    line-height: 44px; 
} 

.dropdown li a:hover 
{ 
    background-color: #333333; 
}

注意：鏈接，而不是僅僅一個。我還宣佈：訪問，因爲我希望訪問狀態與原始狀態相同。

在.dropdown條目中，我簡單地爲列表（ul）定義了一個寬度並使其正確顯示。

在.dropdown li條目中，我設置每個列表項的寬度和高度，刪除項目符號，並設置顯示和浮動以使它們顯示爲一個框。沒有填充。只是一個盒子。

在.dropdown li a：link，.dropdown li a：visited條目中，我們實際上做的是用鏈接「填充」我們的列表項目框，並且恰好我們可以將鏈接定義爲一個盒子。所以我將鏈接的尺寸設置爲與我們的li完全相同的尺寸（這是使整個框可點擊的尺寸）。然後設置顯示和浮動，以及背景顏色，以及文本顏色，或簡單地「顏色。「

爲了讓你的文字居中，你不應該使用vertical-align。使用line-height，並將它設置爲與你的li元素相同的高度，這會使你的文本垂直居中。

控制自己的文字水平出現，設置text-indent屬性，可以使用文本對齊在這個例子中，我使用的文本縮進

最後，我們定義一：。懸停狀態是很重要的要記住，你真正需要在這裏定義的唯一的東西是任何實際上會改變的屬性，在這種情況下，背景顏色爲

如果你想廣告狀態鼠標按下事件，你可以這樣做：

.dropdown li a:active 
{ 
    background-color: #000000; 
    text-indent: 20px; 
}

///////////編輯////////////

下面介紹如何爲多個菜單或子菜單使用單個css樣式。

HTML爲2分獨立的UL的：

<ul class="dropdown"> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 1</a></li> 
</ul> 

<ul class="dropdown"> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 1</a></li> 
</ul>

CSS：（保持不變，因爲您分配他們兩個到類

.dropdown 
    { 
     width: 200px; 
     display:block; 
     margin: 200px auto 0 auto; 
     list-style-type: none; 
     padding: 0; 
    } 

.dropdown li 
{ 
    width: 200px; 
    height: 44px; 
    display: block; 
    float: left; 
    margin: 1px 0 0 0; 
    list-style-type: none; 
    padding: 0; 
} 

.dropdown li a:link, .dropdown li a:visited 
{ 
    width: 200px; 
    height: 44px; 
    display: block; 
    float: left; 
    margin: 0; 
    color: #ffffff; 
    background-color: #666666; 
    text-decoration: none; 
    text-indent: 12px; 
    line-height: 44px; 
} 

.dropdown li a:hover 
{ 
    background-color: #333333; 
}

如果你想申請你的 「下拉」。樣式爲一個孩子ul，像這樣：

<ul class="dropdown"> 
    <li><a href="#">Button 1</a> 
      <ul> 
       <li><a href="#">subButton 1</li> 
       <li><a href="#">subButton 2</li> 
       <li><a href="#">subButton 3</li> 
      </ul> 
    </li> 
    <li><a href="#">Button 1</a></li> 
    <li><a href="#">Button 1</a></li> 
</ul>

你只需追加你的樣式來包含孩子ul和孩子u我李，如下; .dropdown實際上代表你的第一個ul。所以.dropdown（ul） - > li（在「dropdown」無序列表中的列表項） - > ul（ul在裏面的下拉列表裏） - > li（列表裏面的下拉列表裏的列表）

對不起，令人困惑的是，換句話說，如果你根本沒有給你的父母ul分配一個類，那麼訪問一個子列表中的列表項就足夠了。

.dropdown, dropdown li ul 
{ 
    width: 200px; 
    display:block; 
    margin: 200px auto 0 auto; 
    list-style-type: none; 
    padding: 0; 
} 

.dropdown li, .dropdown li ul li 
{ 
    width: 200px; 
    height: 44px; 
    display: block; 
    float: left; 
    margin: 1px 0 0 0; 
    list-style-type: none; 
    padding: 0; 
} 

.dropdown li a:link, .dropdown li a:visited, .dropdown li ul li a:link, .dropdown li ul li a:visited 
{ 
    width: 200px; 
    height: 44px; 
    display: block; 
    float: left; 
    margin: 0; 
    color: #ffffff; 
    background-color: #666666; 
    text-decoration: none; 
    text-indent: 12px; 
    line-height: 44px; 
}

來源

2012-01-25 21:29:49 jhilgert00

+0

很酷！對於動態多層菜單（即動態確定其數量的多個子菜單），我需要做些什麼才能動態地給所有子菜單提供上述代碼提供的相同屬性和操作？ – user1100412

+0

@ user1100412通過添加一個逗號，然後將子菜單的類名稱添加到css的標識符（名稱）部分，您可以輕鬆完成此操作，如下所示：.dropdown li：alink，.dropdownSubmenu li a：link {properties go這裏......}對於你可以列出的數量沒有限制，並且所有用逗號分隔的標識符將具有相同的屬性。比方說，例如，只有一個屬性是不同的，你可以在沒有衝突的地方單獨聲明它們。它也使你的代碼更小。 :)我回答你的第一個問題嗎？ – jhilgert00

+0

您可以在上面的當前代碼中提供示例嗎？我最初嘗試，我沒有很多運氣。 – user1100412

相關問題

 相關問題