CSS下拉菜单将页面内容向下推_Css_Drop Down Menu

CSS下拉菜单将页面内容向下推

css drop-down-menu

CSS下拉菜单将页面内容向下推,css,drop-down-menu,Css,Drop Down Menu,这可能（希望）是一个非常简单的问题，但我似乎无法让它发挥作用，所以我将在这里求助于专家。我使用的是一个非常简单的CSS下拉菜单，只涉及一点JQuery。问题是，当我将鼠标悬停在下拉列表上，它打开时，它会将页面上的所有内容向下推到它下面，而不是在它上面打开。我试过搞乱z指数，但这似乎不是问题所在。任何提示都会很棒，提前谢谢这里是HTML；对不起，它不是超级漂亮，我不得不删掉一堆东西使它简单和通用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr

这可能（希望）是一个非常简单的问题，但我似乎无法让它发挥作用，所以我将在这里求助于专家。我使用的是一个非常简单的CSS下拉菜单，只涉及一点JQuery。问题是，当我将鼠标悬停在下拉列表上，它打开时，它会将页面上的所有内容向下推到它下面，而不是在它上面打开。我试过搞乱z指数，但这似乎不是问题所在。任何提示都会很棒，提前谢谢

这里是HTML；对不起，它不是超级漂亮，我不得不删掉一堆东西使它简单和通用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML style="zoom: 100%; "> 
<HEAD> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script> 
</HEAD> 
<BODY class="bodyclass" style="background:#BCE2F1; height: 100%;"> 

<DIV id="maincontainer" style="min-height: 100%;"> 
  <STYLE type="text/css"> 
    #cssdropdown, #cssdropdown ul { font-size: 9pt; background-color: black; list-style: none; }
    #cssdropdown, #cssdropdown * { padding: 0; margin: 0; }
    #cssdropdown li.headlink { width: 140px; float: left; margin-left: -1px; border: 1px black solid;
          background-color: white; text-align: center; }
    #cssdropdown li.headlink a { display: block; color: #339804; padding: 3px; text-decoration: none; }
      #cssdropdown li.headlink a:hover { background-color: #F8E0AC; font-weight: bold; }
    #cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; }
    #cssdropdown li.headlink:hover ul { display: block; text-decoration: none; }
    #cssdropdown li.headlink ul li a { padding: 5px; height: 15px; }
    #cssdropdown li.headlink ul li a:hover { background-color: #CCE9F5; text-decoration: none; font-weight: normal; }
    /* #cssdropdown a { color: #CCE9F5; } */
      #cssdropdown ul li a:hover { text-decoration: none; }
    #cssdropdown li.headlink { background-color: white; }
    #cssdropdown li.headlink ul { background-color: white; background-position: bottom; padding-bottom: 2px; }
  </STYLE> 
  <SCRIPT language="JavaScript"> 
    $(document).ready(function(){
        $('#cssdropdown li.headlink').hover(
            function() { $('ul', this).css('display', 'block'); },
            function() { $('ul', this).css('display', 'none'); });
    });
  </SCRIPT> 

  <DIV class="navigation_box" style="border: none;"> 
    <DIV class="innercontent"> 
      <DIV style="background: white; float: left; padding: 5px; border: solid 1px black;"> 
      LOGO
      </DIV> 
      <DIV class="navmenu" style="float: right; bottom: 0; font-size: 9pt; text-align: right;"> 
        <SPAN>Logged in as user@example.com</SPAN><BR> 
        <UL id="cssdropdown"> 
            <LI class="headlink"> 
                <A href="http://localhost:3000/one">One</A> 

                <UL style="display: none; "> 
                    <LI><A href="http://localhost:3000/one">Option One</A></LI> 
                    <LI><A href="http://localhost:3000/one">Option Two</A></LI> 
                    <LI><A href="http://localhost:3000/one">Option Three</A></LI> 
                    <LI><A href="http://localhost:3000/one">Option Four</A></LI> 
                </UL> 
            </LI> 
            <LI class="headlink"> 
                <A href="http://localhost:3000/two">Two</A> 

                <UL style="display: none; "> 
                    <LI><A href="http://localhost:3000/two">Option Two-One</A></LI> 
                    <LI><A href="http://localhost:3000/two">Option Two-Two</A></LI> 
                    <LI><A href="http://localhost:3000/two">Option Two-Three</A></LI> 
                </UL> 
            </LI> 
            <LI class="headlink" style="width: 80px;"> 
              <A href="http://localhost:3000/three">Three</A> 
            </LI> 
            <LI class="headlink" style="width: 300px; padding-top: 2px; height: 19px;"> 
              <FORM action="http://localhost:3000/search" method="post"> 
                  <P> 
                    Search:
                    <INPUT id="searchwords" name="searchwords" size="20" type="text" value=""> 
                    <INPUT name="commit" type="submit" value="Find"> 
                  </P> 
              </FORM> 
            </LI> 
          <LI class="headlink" style="width: 60px;"> 
            <A href="http://localhost:3000/four">Four</A> 
          </LI> 
          <LI class="headlink" style="width: 60px;"> 
                        <A href="http://localhost:3000/logout">Logout</A> 
      </LI> 
        </UL> 
      </DIV> 
    </DIV> 
  </DIV> 
  <DIV id="contentwrapper" style="clear:both"> 
    <DIV class="innercontent" style="margin: 0px 20px 20px 20px;"> 
      <H1>Some test content here to fill things out a little bit.</H1> 
    </DIV> 
  </DIV> 
</DIV> 
<DIV id="footer" style="clear: both; float: bottom;"> 
  <DIV class="innercontent" style="font-size: 10px;"> 
    Copyright 2008-2010
  </DIV> 
</DIV> 
</BODY>


#cssdropdown，#cssdropdown ul{字体大小：9pt；背景色：黑色；列表样式：无；}
#cssdropdown，#cssdropdown*{填充：0；边距：0；}
#cssdropdown li.headlink{width:140px；float:left；margin left:-1px；border:1px黑色实体；
背景色：白色；文本对齐：居中；}
#cssdropdown li.headlink a{显示：块；颜色：#339804；填充：3px；文本装饰：无；}
#cssdropdown li.headlink a:悬停{背景色：#F8E0AC；字体重量：粗体；}
#cssdropdown li.headlink ul{显示：无；边框顶部：1px黑色实心；文本对齐：左；}
#标题链接：悬停ul{显示：块；文本装饰：无；}
#cssdropdown li.headlink ul li a{填充：5px；高度：15px；}
#cssdropdown li.headlink ul li a:hover{背景色：#CCE9F5；文本装饰：无；字体重量：正常；}
/*#cssdropdown a{color:#CCE9F5；}*/
#cssdropdown ul li a:悬停{文本装饰：无；}
#cssdropdown li.headlink{背景色：白色；}
#cssdropdown li.headlink ul{背景颜色：白色；背景位置：底部；填充底部：2px；}
$（文档）.ready（函数（）{
$（'cssdropdownli.headlink'）。悬停(
函数（）{$（'ul'，this）.css（'display'，'block'）；}，
函数（）{$（'ul'，this.css（'display'，'none'）；}）；
});
标志
登录为user@example.com





















搜索：







这里有一些测试内容来补充一下。
版权所有2008-2010

这是一个非常糟糕的例子，不需要Javascript来完成可以通过CSS本身完成的事情。不管怎样，你所要做的就是改变：

#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left;}

致：

下面是一个非常简单和干净的下拉菜单示例。希望它能帮你一点忙。我添加了很多注释，以帮助您了解CSS对HTML的作用

    <style type="text/css">

    /* Get ride of default margin's and padding */
    ul, li {
        margin: 0;
        padding: 0;
    }

    /* Display parent unordered list items horizontally */
    ul li {
        float: left;
        list-style: none;       /* Get rid of default Browser styling */
        margin-right: 10px;     /* Add some space between items */
    }

        /* Hide inset unordered Lists */
        ul li ul {
            display: none;
        }

        /* Un-Hide inset unordered Lists when parent <li> is hovered over */
        ul li:hover ul {
            display: block;
            position: absolute;
        }

            /* Clear the any element that may be "float: left;" (Essentially moves the item to the next line */
            ul li:hover ul li {
                clear: left;            
            }

    </style>
    <ul>
        <li>
            <a href="#" title="">Link 1</a>
            <ul>
                <li><a href="#" title="">Link 1.1</a></li>
                <li><a href="#" title="">Link 1.2</a></li>
                <li><a href="#" title="">Link 1.3</a></li>
                <li><a href="#" title="">Link 1.4</a></li>
                <li><a href="#" title="">Link 1.5</a></li>
                <li><a href="#" title="">Link 1.6</a></li>
            </ul>
        </li>
        <li>
            <a href="#" title="">Link 2</a>
            <ul>
                <li><a href="#" title="">Link 2.1</a></li>
                <li><a href="#" title="">Link 2.2</a></li>
                <li><a href="#" title="">Link 2.3</a></li>
                <li><a href="#" title="">Link 2.4</a></li>
                <li><a href="#" title="">Link 2.5</a></li>
                <li><a href="#" title="">Link 2.6</a></li>
            </ul>
        </li>
        <li>
            <a href="#" title="">Link 3</a>
            <ul>
                <li><a href="#" title="">Link 3.1</a></li>
                <li><a href="#" title="">Link 3.2</a></li>
                <li><a href="#" title="">Link 3.3</a></li>
                <li><a href="#" title="">Link 3.4</a></li>
                <li><a href="#" title="">Link 3.5</a></li>
                <li><a href="#" title="">Link 3.6</a></li>
        </ul>
    </li>
</ul>


/*利用默认保证金和补差*/
李先生{
保证金：0；
填充：0；
}
/*水平显示父无序列表项*/
ulli{
浮动：左；
列表样式：无；/*取消默认浏览器样式*/
右边距：10px；/*在项目之间添加一些空格*/
}
/*隐藏插入无序列表*/
ul li ul{
显示：无；
}
/*将父项悬停在上方时取消隐藏插入无序列表*/
ul-li：悬停ul{
显示：块；
位置：绝对位置；
}
/*清除任何可能为“float:left；”的元素（基本上将项目移动到下一行*/
ul li：悬停ul li{
清除：左；
}

非常感谢，确实做到了。我曾尝试过绝对定位，但没有找到合适的位置；我更像是一名后端开发人员，对CSS技巧仍然不屑一顾。你可以猜到，我采用了这个下拉菜单解决方案。我想我应该考虑做一个csshover而不是JQuery？有什么指针/链接吗信息将是伟大的，我会检查出来。我更新了我的答案，包括一个简单的CSS+HTML下拉菜单。希望它能帮助你，并给你一些方向。酷，再次感谢！我会尝试一下，非常感谢。不知道你如何收到更新（因为我只发表了对我的答案的评论）所以我希望你能通过这条评论得到提醒。我已经编辑了我的答案，并给了你一个简单快捷的CSS+HTML

    <style type="text/css">

    /* Get ride of default margin's and padding */
    ul, li {
        margin: 0;
        padding: 0;
    }

    /* Display parent unordered list items horizontally */
    ul li {
        float: left;
        list-style: none;       /* Get rid of default Browser styling */
        margin-right: 10px;     /* Add some space between items */
    }

        /* Hide inset unordered Lists */
        ul li ul {
            display: none;
        }

        /* Un-Hide inset unordered Lists when parent <li> is hovered over */
        ul li:hover ul {
            display: block;
            position: absolute;
        }

            /* Clear the any element that may be "float: left;" (Essentially moves the item to the next line */
            ul li:hover ul li {
                clear: left;            
            }

    </style>
    <ul>
        <li>
            <a href="#" title="">Link 1</a>
            <ul>
                <li><a href="#" title="">Link 1.1</a></li>
                <li><a href="#" title="">Link 1.2</a></li>
                <li><a href="#" title="">Link 1.3</a></li>
                <li><a href="#" title="">Link 1.4</a></li>
                <li><a href="#" title="">Link 1.5</a></li>
                <li><a href="#" title="">Link 1.6</a></li>
            </ul>
        </li>
        <li>
            <a href="#" title="">Link 2</a>
            <ul>
                <li><a href="#" title="">Link 2.1</a></li>
                <li><a href="#" title="">Link 2.2</a></li>
                <li><a href="#" title="">Link 2.3</a></li>
                <li><a href="#" title="">Link 2.4</a></li>
                <li><a href="#" title="">Link 2.5</a></li>
                <li><a href="#" title="">Link 2.6</a></li>
            </ul>
        </li>
        <li>
            <a href="#" title="">Link 3</a>
            <ul>
                <li><a href="#" title="">Link 3.1</a></li>
                <li><a href="#" title="">Link 3.2</a></li>
                <li><a href="#" title="">Link 3.3</a></li>
                <li><a href="#" title="">Link 3.4</a></li>
                <li><a href="#" title="">Link 3.5</a></li>
                <li><a href="#" title="">Link 3.6</a></li>
        </ul>
    </li>
</ul>