Question

我在设置下拉菜单时遇到问题。它在IE中非常错误，它在FF中根本不起作用。

它有什么问题？

HTML

<ul id="topnav">
   <li><a href="/" title="home"><img src="/images/icons/home.png" /></a></li>
   <li>
      <a href="#">Product</a>
      <ul>
         <li><a href="#">Product</a></li>
         <li><a href="#">item 1</a></li>
         <li><a href="#">item 2</a></li>
      </ul>
   </li>
   <li>
      <a href="#">About us</a>
      <ul>
         <li><a href="#">About us</a></li>
         <li><a href="#">item 3 long title</a></li>
         <li><a href="#">item 4</a></li>
      </ul>
   </li>
   <li>
      <a href="#">Support</a>
      <ul>
         <li><a href="#">Support</a></li>
         <li><a href="#">item 5</a></li>
         <li><a href="#">item 6</a></li>
      </ul>
   </li>
</ul>

CSS

#topnav
{
    color:#757575;
    position:absolute;
    left:0;
    top:0;
    list-style-type:none;
    margin:0;
    padding:0;
}

#topnav>li
{
    position:relative;
    display:inline;
    float:left;
    margin-left:20px;
    white-space:nowrap;
    overflow:visible;
}

#topnav ul
{
    display:none;
    position:absolute;
    top:0;
    list-style-type:none;
    z-index:20;
    border:1px solid #ececec;
    margin:0 0 0 -15px;
    padding:0;
}

#topnav ul li
{
    display:block;
    float:none;
    background-color:#F7F7F7;
    border-top:1px solid #ececec;
    margin:0;
    padding:0 15px;
}

#topnav ul li:first-child
{
    height:30px;
    background-color:#fff;
    border:0;
}

#topnav li:hover ul
{
    display:block;
}

Answer 1

检查一下。

 <style>
  ul#topnav {
     margin: 0px;
     padding: 0px;
     display: block;
     list-style: none;
     text-align: left;     
  }

  ul#topnav > li {
     display: inline-block;
     padding-right: 10px;            
  }


  li > ul.sub-menu {
     display: none;
     list-style: none;
     background-color: #fff;
  }

  ul.sub-menu > li {
      display: block;
      text-align: left;         
    }

  li:hover ul.sub-menu {
       margin:0px;
       padding: 0px;
       display: block;
       position: absolute;
       text-align: left;
       top:0px;
  }

  </style>
  <script>

  </script>
   </head>
    <body>
        <ul id="topnav">
            <li><a href="/" title="home">
                <img src="/images/icons/home.png" /></a></li>
            <li>Product
                <ul class="sub-menu">
                    <li><a href="#">Product</a></li>
                    <li><a href="#">item 1</a></li>
                    <li><a href="#">item 2</a></li>
                </ul>
            </li>
            <li>About us
               <ul class="sub-menu">
                   <li><a href="#">About us</a></li>
                   <li><a href="#">item 3 long title</a></li>
                   <li><a href="#">item 4</a></li>
               </ul>
            </li>
            <li>Support
              <ul class="sub-menu">
                  <li><a href="#">Support</a></li>
                  <li><a href="#">item 5</a></li>
                  <li><a href="#">item 6</a></li>
              </ul>
            </li>
        </ul>

Answer 2

我想在这里发布固定菜单的样式版本，以防有人发现它有用。

CSS：

#topnav {
    color:#757575;
    margin: 0px;
    padding: 0px;
    display: block;
    list-style: none;
    text-align: left;       
    position:absolute;
    left:0;
    top:0;
}

#topnav > li {
    display: inline-block;
    padding-left: 10px;
}

#topnav li > ul {
    display: none;
    list-style: none;
    background-color: #fff; 
    margin:-10px 0 0 -15px;;
    padding: 0px;
    position: absolute;
    text-align: left;
    top:0px;
    border: 1px solid #ececec;
    border-radius:6px;
    box-shadow:0px 5px 7px #ebebeb;
    background-color:#f4f4f4;
}

#topnav ul  li {
    display: block;
    text-align: left;
    padding:10px 15px;
    white-space:nowrap;
    border-top:1px solid #ececec;
}

#topnav ul li:first-child {
    padding:15px;
    border:0px;
    background-color:#fff;
    border-top-left-radius:6px;
    border-top-right-radius:6px;
}

#topnav li:hover ul {
    display: block;
}

HTML：

 <ul id="topnav">
    <li><a href="/" title="home">
        <img src="/images/icons/home.png" /></a></li>
    <li>Product
        <ul>
            <li><a href="#">Product</a></li>
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
        </ul>
    </li>
    <li>About us
       <ul>
           <li><a href="#">About us</a></li>
           <li><a href="#">item 3 long title</a></li>
           <li><a href="#">item 4</a></li>
       </ul>
    </li>
    <li>Support
      <ul>
          <li><a href="#">Support</a></li>
          <li><a href="#">item 5</a></li>
          <li><a href="#">item 6</a></li>
      </ul>
    </li>
</ul>

CSS下拉菜单错误

2 个答案: