1

我试图并排而不是从上到下显示菜单的下拉部分。我必须 display: none 使菜单工作，而 float: left 没有这样做。我没有想法，不知道还有什么需要显示的：没有人可以隐藏列表，直到它需要显示。我抛出了 float: 几乎到处都是。CSS：

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    min-width: 200px;
    float: left;
    display: inline;
} 
ul#navigation {
    float: left;
} 
ul#navigation li {
    float: left;
    border: 1px black solid;
    min-width: 200px;
} 
ul.sub_navigation {
    position:absolute;
    float: left;
    display: inline;
    display: none;
} 
ul.sub_navigation li {
    clear: both;
    float: left;
    display: inline;
} 
a,a:active,a:visited {
    display: block;
    padding: 10px;
}

的HTML：

<div id="menu">
    <ul id="navigation">
        <li class="dropdown"><a href="javascript:ajaxpage('home.php', 'body');">Home</a></li>
        <li class="dropdown"><a href="javascript:ajaxpage('projects.php', 'body');">Projects</a>
            <ul class="sub_navigation" style="float: left;">
                    <!-- pull projects with P H P -->
                    <li><a href="javascript:ajaxpage('openproj.php?id=<? echo $row['id']; ?>', 'body');"><? echo $row['name']; ?></a></li>
                    <li><a href="javascript:ajaxpage('createproj.php', 'body');">Add a project</a></li>
                    <?php
                    }
                    ?>
            </ul>
        </li>
        <li class="dropdown"><a href="javascript:ajaxpage('pubfiles.php', 'body');">Public Files</a></li>
        <li class="dropdown"><a href="javascript:ajaxpage('users.php', 'body');">Users</a></li>
        <li class="dropdown"><a href="javascript:ajaxpage('settings.php', 'body');">Settings</a></li>
            <!-- only pull if admin and logged in per P H P session-->
        <li class="dropdown"><a href="javascript:ajaxpage('admin.php', 'body');">Admin</a></li>
    </ul>
</div>
4

2 回答 2

3

您可以通过这种方式实现您的 HTML 和 CSS 代码，然后它将正常工作。

HTML：

<div class="menu">
    <ul>
        <li><a href="index.html" class="active">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="about.html">Services</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="contact.html">Contact us</a></li>
    </ul>
</div>

CSS：

.menu {
   padding:0;
   margin:0;
   width:400px;
   float:left;
 }

.menu ul {
  padding:0;
  margin:0;
  list-style:none;
  border:0;
  float:left;
}

.menu ul li {
  float:left;
  margin:0;
  padding:0;
  border:0;
}

.menu ul li a {
  float:left;
  margin:0;
  padding:13px 10px;
  text-decoration:none;
  border:1px
  solid #000;
}
于 2012-07-01T08:46:48.170 回答
2

似乎同时放入width=auto;theul li和它的孩子，以及将孩子的定位更改为relative，使它按照我需要的方式工作。

我感谢每个人的意见，因为它让我离完成这个工作更近了一步，并更多地了解了这个网站，以及使用 jquery 的 css。

链接：jsFiddle

于 2012-07-03T04:50:35.677 回答