下拉菜单：不好的位置

所以我在做下拉菜单，当你将鼠标悬停在文本上时，你会看到其他选项，但它不在正确的位置。下拉菜单：不好的位置

#wrap { 
 
\t margin:10px auto 10px auto; 
 
\t height:auto; 
 
\t width:1000px; 
 
} 
 

 
header { 
 
\t background-color:#fff; 
 
\t height:111px; 
 
\t width:100%; 
 
\t position:absolute; 
 
\t top:0px; 
 
\t left:0px; 
 
\t border-bottom:solid 1px #e7e7e7; 
 
} 
 

 
nav ul { 
 
\t margin-top:43px; 
 
\t padding:0; 
 
\t list-style: none; 
 
    position: relative; 
 
    display:block; 
 
} 
 

 
nav ul li { 
 
\t display:inline; 
 
\t font-family:Courier new; 
 
\t color:#000; 
 
\t 
 
    list-style: none; 
 
} 
 

 
nav ul ul { 
 
\t display:none; 
 
\t position: absolute; 
 
} 
 

 
nav ul li:hover > ul { 
 
    display:list-item; 
 
} 
 

 

 
nav ul li a { 
 
\t margin-right:57px; 
 
\t text-decoration:none; 
 
\t color:#000; 
 
\t 
 
} 
 

 
nav ul li a:hover { 
 
\t border-bottom:solid 1px #000; 
 
\t padding-bottom:5px; 
 
}

<header> 
 
\t \t <div id="wrap"> 
 
\t \t \t <nav> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a href="javascript:;">one</a></li> 
 
\t \t \t \t \t <li><a href="javascript:;">two</a></li> 
 
\t \t \t \t \t <li><a href="javascript:;">three</a></li> 
 
\t \t \t \t \t <li><a href="javascript:;">four</a></li> 
 
\t \t \t \t \t <li> 
 
\t \t \t \t \t \t four with children &#9662; 
 
\t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t <li>five . 1</li> 
 
\t \t \t \t \t \t \t <li>five . 2</li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t </ul> 
 
\t \t \t </nav> 
 
\t \t </div> 
 
\t </header>

来源

2015-01-15 Edvinas

什么是 “不正确的位置” 是什么意思？ – 2015-01-15 16:23:01

它必须低于单词“kita”，但现在它在标题下 – Edvinas 2015-01-15 16:25:11

稍微调整一下你的CSS，看看这个[FIDDLE]（http://jsfiddle.net/eyj5fghk/1/）...你可以删除你的问题。 – skobaljic 2015-01-15 16:27:52

从父ul取出position:relative，并把它放在li

然后改变对li到inline-block的display财产。

#wrap { 
 
    margin: 10px auto 10px auto; 
 
    height: auto; 
 
    width: 1000px; 
 
} 
 
header { 
 
    background-color: #fff; 
 
    height: 111px; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    border-bottom: solid 1px #e7e7e7; 
 
} 
 
nav ul { 
 
    margin-top: 43px; 
 
    padding: 0; 
 
    list-style: none; 
 
    display: block; 
 
} 
 
nav ul li { 
 
    display: inline-block; 
 
    font-family: Courier new; 
 
    color: #000; 
 
    position: relative; 
 
    list-style: none; 
 
} 
 
nav ul ul { 
 
    display: none; 
 
    position: absolute; 
 
} 
 
nav ul li:hover > ul { 
 
    display: list-item; 
 
} 
 
nav ul li a { 
 
    margin-right: 57px; 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 
nav ul li a:hover { 
 
    border-bottom: solid 1px #000; 
 
    padding-bottom: 5px; 
 
}

<body> 
 
    <header> 
 
    <div id="wrap"> 
 
     <nav> 
 
     <ul> 
 
      <li><a href="index.html">pradinis</a> 
 
      </li> 
 
      <li><a href="istorija.html">istorija</a> 
 
      </li> 
 
      <li><a href="laimejimai.html">laimėjimai</a> 
 
      </li> 
 
      <li><a href="sportininkai.html">sportininkai</a> 
 
      </li> 
 
      <li> 
 
      kita &#9662; 
 
      <ul> 
 
       <li>nuorodos</li> 
 
       <li>galerija</li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
    </header> 
 
</body>

来源

2015-01-15 16:29:00

谢谢！我会upvote，但我不能，对不起:) – Edvinas 2015-01-15 16:41:50

只要标记/接受它作为答案，那将是罚款 – 2015-01-15 16:43:03

nav { 

    width: 960px; 

} 

nav ul { 

    padding: 0px; 

    margin: 0px; 

} 

nav ul:after { 

    clear: both; 

    content: " "; 

    display: block; 

    font-size: 0; 

    height: 0; 

    visibility: hidden; 

} 

    nav ul,nav ul li{ 

    background-color: #FAFAFA; 

} 

    nav ul li { 

    list-style: none; 

    float:left; 

} 

nav ul li a { 

    text-decoration: none; 

    display: block; 

    color: #333; 

    padding: 14px 34px 14px 34px; 

} 

nav ul li:hover > ul { 

    visibility: visible; 

} 

nav ul li ul{ 

    display: inline; 

    visibility: hidden; 

    position: absolute; 

    padding:0px; 

} 

nav ul li ul li{ 

    float: none; 

} 

nav ul li ul li a:hover{ 

    color: #333; 

}

<div id="wrap"> 

    <nav> 

    <ul> 

     <li><a href="index.html">pradinis</a></li> 

     <li><a href="istorija.html">istorija</a></li> 

     <li><a href="laimejimai.html">laimėjimai</a></li> 

     <li><a href="sportininkai.html">sportininkai</a></li> 

     <li> 

     <li class = "dropMenue"> 

      <a href="#">kita &#9662;</a> 

      <ul> 

       <li><a href="#">nuorodos</a></li> 

       <li><a href="#">galerija</a></li> 

      </ul>   

     </li> 

    </ul> 

    </nav> 

</div>

来源

2015-01-15 16:42:48 MKAD

下拉菜单：不好的位置

回答

相关问题