Проблема с меню CSS в IE - PullRequest
Новая
       6

Проблема с меню CSS в IE

0 голосов
/ 24 июня 2010

Возникли проблемы с меню CSS в IE. Это мой первый выстрел в CSS Menus, так что, конечно, будут неприятности. :) Предполагается, что элементы списка отображаются под заголовком списка, но вместо этого они отображаются справа. Он отлично отображается в Firefox, но (конечно) не в IE.

Что происходит (IE): http://vvcap.net/db/7Ti_aj74IaQjwyX7rk43.htp

Но он должен отображать элементы списка прямо под заголовком «Маркетинг».

Код: 

ul
{

 background:orange;
 height:25px;
 list-style:none;
 margin:0 auto;
 }
li{

  float:left;
  padding:0px;
  }
li a{

  background: url("images/seperator.gif") bottom left no-repeat;
  color:white;
  display:block;
  font-weight:normal;
  line-height:25px;
  text-align:center;
  text-decoration:none;
  }
li a:hover, ul li:hover a{

   background: #2580a2 url('images/seperator.gif') bottom left no-repeat;
   z-index: 1;
   color:#FFFFFF;
   text-decoration:none;
   }
li ul{

  background:#333333;
  display:none;
  height:auto;
  position:absolute;
  width:156px;
  z-index:500;
  }
li:hover ul{

  display:block;
  z-index:1;
  }
li li {

  background:url('images/sub_sep.gif') bottom left no-repeat;
  display:block;
  width:156px;
  }
li:hover li a{

  background:none;
  }
li ul a{

  display:block;
  height:25px;
  font-size:12px;
  font-style:normal;
  padding:0px 10px 0px 15px;
  text-align:left;
  }
li ul a:hover, li ul li:hover a{

   background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
   color:#ffffff;
   text-decoration:none;
   width:131px;
   }

1 Ответ

0 голосов
/ 24 июня 2010

В отсутствие примера html я добавил следующее, с вашим css (как написано здесь) в теге стиля в голове. 

<!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>
<title>test</title>
<style type="text/css">
/* Your CSS */
</style>
</head>
<body>

<table class= "table1" cellpadding="0" cellspacing="0" align ="center">
  <tr>
    <td width = "20%">
      <ul>
         <li><a class ="linkDrop" href="Default.aspx">Home</a>  </li>
      </ul>
    </td>
    <td>
      <ul>
        <li>
          <a class ="linkDrop" href="#">Miscellaneous</a>
          <ul>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
          </ul>
        </li>
      </ul>
    </td>
    <td>
      <ul>
        <li>
          <a class ="linkDrop" href="#">Miscellaneous</a>
          <ul>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
          </ul>
        </li>
      </ul>
    </td>
  </tr>
</table>

</body>
</html>

Сработало нормально, когда я добавил тип документа. Есть ли шанс, что вы упускаете это?

- РЕДАКТИРОВАТЬ -

ладно, я обновил код выше с тем, что я прочитал из ваших комментариев, и удвоил последний тд, чтобы посмотреть, будет ли это иметь значение для меня.

Кажется, это нормально в стандартных IE8 и IE8 в режиме IE7. Однако он ничего не может сделать в режиме совместимости или в режиме совместимости. Если у вас проблемы с IE6, то проблема в том, что класс: hover psuedo выбирается IE6 только при применении к тегам привязки (a), поэтому ваш li:hover ul будет игнорироваться.

Если вы хотите, чтобы он работал в IE6, вам нужно добавить немного JavaScript. Есть довольно хорошая статья об ALA: http://www.alistapart.com/articles/horizdropdowns/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...