Вопрос о наведении мышки и использовании <ul> <li>

Question

Вопрос о наведении мышки и использовании <ul> <li>

Я хочу создать выпадающее меню с подменю, но у меня проблема с одной стороны: моя кнопка появляется под текстом главного меню. Как я могу поднять это? см. источник:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen"> 
/**************** menu coding *****************/
#menu {
width: 100%;

float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: none;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
text-transform: uppercase;
width: 18em;
}

#menu a {
color: #000;
background: url('MenuBackground.jpg');
border-width:1px; border-style:solid; zoom:1; overflow:hidden; background-image:url('MenuBackground.jpg'); background-color:transparent

}

#menu a:hover {
color: #a00;
border-width: 1px;
border-style: solid;
background: url('MenuBackground.jpg');

}

#menu li {position: relative; text-align:right;
} 
#menu li.sub {  
text-align:left; 
background-color: transparent;
background-image:url('MenuBackground.jpg');
overflow: hidden;
display: block
}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}


#menu2 {
width: 100%;

float: left;
}

#menu2 ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu2 a, #menu2 h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: none;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;

}

#menu2 h2 {
color: #fff;
text-transform: uppercase;
width: 18em;

}

#menu2 a {
color: #000;
background: #efefef;
text-decoration: none;
border-width: 1px;
border-style: solid;

}

#menu2 a:hover {
color: #a00;
background: #fff;
border-width: 1px;
border-style: solid;

}

#menu2 li {position: relative;}

#menu2 ul ul {
position: absolute;
z-index: 500;
}

#menu2 ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu2 ul ul,
div#menu2 ul li:hover ul ul,
div#menu2 ul ul li:hover ul ul
{display: none;}

div#menu2 ul li:hover ul,
div#menu2 ul ul li:hover ul,
div#menu2 ul ul ul li:hover ul
{display: block;}

#menu3 {
width: 100%;

float: left;
}

#menu3 ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu3 a, #menu3 h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: none;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu3 h2 {
color: #fff;
text-transform: uppercase;
width: 18em;
}

#menu3 a {
color: #000;
background: #efefef;
text-decoration: none;
border-width: 1px;
border-style: solid;
}

#menu3 a:hover {
color: #a00;
background: #fff;
border-width: 1px;
border-style: solid;

}

#menu3 li {position: relative;}

#menu3 ul ul {
position: absolute;
z-index: 500;
}

#menu3 ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu3 ul ul,
div#menu3 ul li:hover ul ul,
div#menu3 ul ul li:hover ul ul
{display: none;}

div#menu3 ul li:hover ul,
div#menu3 ul ul li:hover ul,
div#menu3 ul ul ul li:hover ul
{display: block;}

#menu4 {
width: 100%;

float: left;
}

#menu4 ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu4 a, #menu4 h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: none;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu4 h2 {
color: #fff;
text-transform: uppercase;
width: 18em;
}

#menu4 a {
color: #000;
background: #efefef;
text-decoration: none;
border-width: 1px;
border-style: solid;
}

#menu4 a:hover {
color: #a00;
background: #fff;
border-width: 1px;
border-style: solid;

}

#menu4 li {position: relative;}

#menu4 ul ul {
position: absolute;
z-index: 500;
}

#menu4 ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu4 ul ul,
div#menu4 ul li:hover ul ul,
div#menu4 ul ul li:hover ul ul
{display: none;}

div#menu4 ul li:hover ul,
div#menu4 ul ul li:hover ul,
div#menu4 ul ul ul li:hover ul
{display: block;}

#menu5 {
width: 100%;

float: left;
}

#menu5 ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu5 a, #menu5 h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: none;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu5 h2 {
color: #fff;
text-transform: uppercase;
width: 18em;
}

#menu5 a {
color: #000;
background: #efefef;
text-decoration: none;
border-width: 1px;
border-style: solid;
}

#menu5 a:hover {
color: #a00;
background: #fff;
border-width: 1px;
border-style: solid;

}

#menu5 li {position: relative;}

#menu5 ul ul {
position: absolute;
z-index: 500;
}

#menu5 ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu5 ul ul,
div#menu5 ul li:hover ul ul,
div#menu5 ul ul li:hover ul ul
{display: none;}

div#menu5 ul li:hover ul,
div#menu5 ul ul li:hover ul,
div#menu5 ul ul ul li:hover ul
{display: block;}

#menu6 {
width: 100%;

float: left;
}

#menu6 ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu6 a, #menu6 h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: none;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu6 h2 {
color: #fff;
text-transform: uppercase;
width: 18em;
}

#menu6 a {
color: #000;
background: #efefef;
text-decoration: none;
border-width: 1px;
border-style: solid;
}

#menu6 a:hover {
color: #a00;
background: #fff;
border-width: 1px;
border-style: solid;

}

#menu6 li {position: relative;}

#menu6 ul ul {
position: absolute;
z-index: 500;
}

#menu6 ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu6 ul ul,
div#menu6 ul li:hover ul ul,
div#menu6 ul ul li:hover ul ul
{display: none;}

div#menu6 ul li:hover ul,
div#menu6 ul ul li:hover ul,
div#menu6 ul ul ul li:hover ul
{display: block;}


div.clear {clear:both;}

</style>
<!--[if IE]>
<style type="text/css" media="screen">
 #menu ul li {float: left; width: 100%;}
 #menu2 ul li {float: left; width: 100%;}
 #menu3 ul li {float: left; width: 100%;}
      #menu4 ul li {float: left; width: 100%;}
        #menu5 ul li {float: left; width: 100%;}
          #menu6 ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li a {height: 1%;} 
#menu2 ul li a {height: 1%;}
#menu3 ul li a {height: 1%;} 
#menu4 ul li a {height: 1%;} 
#menu5 ul li a {height: 1%;} 
#menu6 ul li a {height: 1%;} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
#menu2 a, #menu2 h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}

</style>
<![endif]-->
</head>

<div align="center">
    <table border="0" width="777" id="table1" cellspacing="0" cellpadding="0" height="436" bgcolor="#888888">
        <tr>
            <td valign="top">
            <table border="0" width="777" id="table3" cellspacing="0" cellpadding="0" height="9">
                <tr>
                    <td>
                    <img border="0" src="spacer.gif" width="1" height="1"></td>
                </tr>
            </table>
            <table border="0" width="777" id="table4" cellspacing="0" cellpadding="0" height="240">
                <tr>
                    <td>
            <table border="0" width="777" id="table49" cellspacing="0" cellpadding="0" height="240">
                <tr>
                    <td valign="top" width="144" height="240">
                    <p align="center">
                    &nbsp;</td>
                    <td valign="top" width="489" height="240">
                    <table border="0" width="489" id="table50" cellspacing="0" cellpadding="0" height="240">
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                    </table>
                    </td>
                    <td valign="top" width="144" height="240">
                    &nbsp;</td>
                </tr>
            </table>
                    </td>
                </tr>
            </table>
            <table border="0" width="777" id="table5" cellspacing="0" cellpadding="0">
                <tr>
                    <td>&nbsp;</td>
                </tr>
            </table>
            <table border="0" width="100%" id="table35" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="245" height="32">
                    <table border="0" width="245" id="table36" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="200" ><div id="menu" style="width: 192px; height: 19px" align=right>
<ul>
  <li><h2>Page 1</h2>
    <ul style="position: absolute; left: 188px; top: 18px; height: 0px; width:130px; background-image:url('MenuBackground.jpg');">
      <li class="sub"><a href="http://www.seoconsultants.com/css/menus/vertical/"  align=left>Submenu1 Page1</a></li>
      <li class="sub"><a href="http://www.tanfa.co.uk/css/examples/menu/vs7.asp" >Submenu2 Page1</a>
      </li>
    </ul>
  </li>
</ul>
</div><div class="clear"><!-- --></div>

</td>
                            <td width="45">&nbsp;</td>
                        </tr>
                    </table>
                    </td>
                    <td width="300" rowspan="3" valign="top">
                    <table border="0" width="100%" id="table42" cellspacing="0" cellpadding="0" height="100%">
                        <tr>
                            <td valign="top">
                            <table border="0" width="100%" id="table43" cellspacing="0" cellpadding="0" height="74">
                                <tr>
                                    <td width="10">&nbsp;</td>
                                    <td width="280">
                                    <p align="center">
                                    &nbsp;</td>
                                    <td width="10">&nbsp;</td>
                                </tr>
                            </table>
                            </td>
                        </tr>
                    </table>
                    </td>
                    <td width="232">
                    <table border="0" width="232" id="table37" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="45">&nbsp;</td>
                            <td width="187" align=left><div id="menu2" style="width: 192px; height: 19px; top: 50px;">
<ul>
  <li><h2>Page 4</h2>
    <ul style="position: absolute; left: 30px; top: 18px; height: 0px; width:130px">
      <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">Submenu1 Page4</a></li>
      <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs7.asp" title="Complete Example">Submenu2 Page4</a>
      </li>
    </ul>
  </li>
</ul>
</div></div><div class="clear"><!-- --></div>
</td>
                        </tr>
                    </table>
                    </td>
                </tr>
                <tr>
                    <td width="245" height="32">
                    <table border="0" width="245" id="table38" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="200" align="right"><div id="menu2" style="width: 192px; height: 19px; top: 50px;">
<ul>
  <li><h2>Page 2</h2>
    <ul style="position: absolute; left: 188px; top: 18px; height: 0px; width:130px">
      <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">Submenu1 Page2</a></li>
      <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs7.asp" title="Complete Example">Submenu2 Page2</a>
      </li>
    </ul>
  </li>
</ul>
</div></div><div class="clear"><!-- --></div>
</td>
                            <td width="45">&nbsp;</td>
                        </tr>
                    </table>
                    </td>
                    <td width="232">
                    <table border="0" width="232" id="table39" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="45">&nbsp;</td>
                            <td width="187" align=left><div id="menu2" style="width: 192px; height: 19px; top: 50px;">
<ul>
  <li><h2>Page 5</h2>
    <ul style="position: absolute; left: 30px; top: 18px; height: 0px; width:130px">
      <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">Submenu1 Page5</a></li>
      <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs7.asp" title="Complete Example">Submenu2 Page5</a>
      </li>
    </ul>
  </li>
</ul>
</div></div><div class="clear"><!-- --></div>
</td>
                        </tr>
                    </table>
                    </td>
                </tr>
                <tr>
                    <td width="245" height="32">
                    <table border="0" width="245" id="table40" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="200" align="right"><div id="menu2" style="width: 192px; height: 19px; top: 50px;">
<ul>
  <li><h2>Page 3</h2>
    <ul style="position: absolute; left: 188px; top: 18px; height: 0px; width:130px">
      <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">Submenu1 Page3</a></li>
      <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs7.asp" title="Complete Example">Submenu2 Page3</a>
      </li>
    </ul>
  </li>
</ul>
</div></div><div class="clear"><!-- --></div>
</td>
                            <td width="45">&nbsp;</td>
                        </tr>
                    </table>
                    </td>
                    <td width="232">
                    <table border="0" width="232" id="table41" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="45">&nbsp;</td>
                            <td width="187" align=left>
                            <div id="menu2" style="width: 192px; height: 19px; top: 50px;">
<ul>
  <li><h2>Page 6</h2>
    <ul style="position: absolute; left: 30px; top: 18px; height: 0px; width:130px">
      <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">Submenu1 Page6</a></li>
      <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs7.asp" title="Complete Example">Submenu2 Page6</a>
      </li>
    </ul>
  </li>
</ul>
</div></div><div class="clear"><!-- --></div>
</td>
                        </tr>
                    </table>
                    </td>
                </tr>
            </table>
            <table border="0" width="777" id="table44" cellspacing="0" cellpadding="0" height="50">
                <tr>
                    <td valign="top" width="20">&nbsp;</td>
                    <td valign="top" width="368">
                    <table border="0" width="100%" id="table46" cellspacing="0" cellpadding="0">
                        <tr>
                            <td><b><font face="Tahoma" size="4" color="#FFFFFF">
                            sflkd lksdjf jdsjeritu ieritu </font></b></td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                    </table>
                    </td>
                    <td width="388" valign="top">
                    <table border="0" width="388" id="table47" cellspacing="4" cellpadding="0">
                        <tr>
                            <td align="left">
<style type="text/css">
<!--
#ContactElement {
  width: 30em;
  height: 4em;
  padding: 0em;
  border: 0px solid #cc0000;
  color: #FFFFFF;
}
-->
</style>
<p>
<div style="overflow: hidden; font-family:tahoma; font-face:tahoma; font-size:0.8em" id="ContactElement">
&nbsp;</div>
</p>

                        </tr>
                    </table>
                    </td>
                </tr>
            </table>
            </td>
        </tr>
    </table>
</div>

</html>

1

html dynamic-css

Источник

04 фев '09 в 18:33

2 ответа

Другие вопросы по тегам html dynamic-css

user62552 04 фев '09 в 18:57 2009-02-04 18:57 · Answer 1 · 2009-02-04 18:57

Ваша проблема в том, что IE не распознает sudoclass:hover ни на чем, кроме тегов привязки. Решение сделать так, чтобы в IE работали "выпадающие suckerfish", - это добавить небольшой javascript, который добавляет новый класс к элементам LI в их событии hover. На странице http://www.alistapart.com/articles/dropdowns вы найдете все, что вам нужно.

Другой вариант - добавить в заголовок страницы следующее:

<!--[if lt IE 8]>
   <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

Предполагается, что эта библиотека js исправит множество ошибок, обнаруженных в IE. Вы можете найти больше информации об этом на http://code.google.com/p/ie7-js/.

Еще один совет, просто для краткости: если вы присваиваете каждому элементу div один и тот же класс, вы можете просто ссылаться на них всех сразу в вашем css (div.class), а не по отдельности, как вы делаете выше. Я заметил, что в вашем CSS много дублирования.

user54680 04 фев '09 в 18:36 2009-02-04 18:36 · Answer 2 · 2009-02-04 18:36

В будущем ограничьте свой код только соответствующими частями. Вашей кнопки и конфликтующего элемента было бы достаточно.

При этом вы должны использовать z-index для элементов, чтобы определить, какой из них "выше" другого. Это настолько полезно, насколько я могу, пока вы не покажете более конкретно то, к чему обращаетесь.