我的下拉菜單有兩個問題,一個涉及鏈接,另一個涉及IE7問題。問題後的代碼如下,在這兩種情況下,我想避免的JavaScript(該項目的關鍵組成部分)UL下拉菜單問題
我成功地突出了鏈接的文本,當我徘徊,包括上述一些像素,下面留下&的權利。然而,可點擊的突出部分(即,我可以訪問超鏈接的地方)的唯一部分是文本的位置,並且我希望能夠使整個突出顯示,填充和文本都可點擊。我之前做過,但我對目前的代碼如何解決它感到困惑。有人可以幫我嗎?
使用相同的下拉菜單,一切工作正常,除了在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>
我道歉,如果這已經回答過了,但我希望有人能在代碼中找準我需要改變或修改才能使其工作。
沒關係,但我不認爲我會找到我要找的東西。沒有關於下拉菜單的任何實例。如果有一個地方我忽視了,請指導我。否則,您或其他人有任何其他建議或解決方法? – user1100412