0

I am trying to create a drop down menu, however whenever I hover over a parent menu the child menu won't line up with it. I have gone through many examples and I always get the same result.

My CSS code is

#mainNav {
   margin-top: 20px;
   width: 800px;
   margin-left: auto;
   margin-right: auto;
   padding: 0;  
   overflow: hidden;
   background-color: #BBFFFF;
   zoom: 1;
}

#mainNav li {
   float: left;
   list-style: none;
}
#mainNav li a {
   color: #000000;
   display: block;  
   width: 80px;
   font-size: 14px;
   text-align: center;
   text-transform: uppercase;
   text-decoration: none;   
   padding: 7px 0px 7px 0px;
   border-right: 1px solid #999;    
   zoom: 1; 
}
#mainNav li ul {
   display: none;
}
#mainNav a:hover {
   background-color: #66FF66;
}
#mainNav li:hover ul {
   display: block;
   position: absolute;
}
#mainNav li:hover li {
   float: left;
   width: 80px;
   background-color: #BBFFFF;
   margin: 0;
   padding: 0;
}

My HTML is

<div>
  <ul id="mainNav">
    <li><a href="pageone.html" id="pageOneLink">Page One</a></li>
    <li><a href="pagetwo.html" id="pageTwoLink">Page Two</a></li>
    <li><a href="pagethree.html" id="pageThreeLink">Page Three</a>
      <ul>
        <li><a href="threePageOne.html" name="threePageOneLink>Sub Page One</a></li>
      </ul>
    </li>
  </ul>
</div>
4

3 に答える 3

0

これをコピペして試してみてください。この例の何かが役に立ちます。

<html>
<head>
<style type="text/css">
#mainNav{
    /*  Your mainNav decoration here */

}
#mainNav li{
    list-style:none;
    display:inline-block;
    background-color:#0FF;
    padding:10px;
    border:1px solid #000;
}

#mainNav ul{
    position:absolute;
    display:none;
    padding:0px;
    top:50px;
}

#mainNav li:hover ul{
    display:inline-block;
}
</style>
</head>
<body>

<ul id="mainNav">
    <li><a href="pageone.html" id="pageOneLink">Page One</a>
     <br />
      <ul>
        <li><a href="onePageOne.html" name="onePageOneLin">Sub Page One</a></li>
      </ul>
    </li>
    <li><a href="pagetwo.html" id="pageTwoLink">Page Two</a></li>
    <li><a href="pagethree.html" id="pageThreeLink">Page Three</a>
    <br />
      <ul>
        <li><a href="threePageOne.html" name="threePageOneLin">Sub Page One</a></li>
      </ul>

    </li>
  </ul>

</body>
</html>
于 2013-02-16T19:40:05.813 に答える
0

そこには十分に具体的でないCSSがたくさんあり、間違った場所にあるものもあります。

私はあなたのために jsfiddle をここに書きました: A DISTILED VERSION OF YOUR CODE

それが属するulの代わりにliにリストスタイルがあります。また、サブリストなどについても十分に具体的ではありません。>のように使用すると、

.main-nav > li > a { }li の最初のレイヤーのみを対象とし、その中でその li の唯一の a などを指定します。

私はulのクラスなどを提供します。最も単純なアプローチだと思うものについては、フィドルを参照してください。他の人のために、私のフィドルがより簡潔になるかどうか教えてください。

于 2013-02-16T20:02:41.810 に答える
0

負のマージン左を使用して、それを一列に戻すことができます。次の場所に追加します。

#mainNav li:hover ul {}

または、padding: 0; を設定できます。同じ要素で。

また、次の末尾の '"' がありません:

<li><a href="threePageOne.html" name="threePageOneLink>Sub Page One</a></li>
于 2013-02-16T19:13:15.010 に答える