Question

我正在尝试并排显示菜单的下拉部分而不是从上到下。我必须显示：none以使菜单工作，而浮动：左边没有这样做。我没有想法，也不确定还需要显示什么：无需隐藏列表，直到需要显示。我抛出了漂浮物：几乎到处都是。 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>

Answer 1

您可以通过这种方式实现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;
}

Answer 2

似乎将width=auto;放在ul li及其子项中，以及将子位置更改为relative，使其按照我需要的方式工作。

我感谢大家的意见，因为它让我更接近完成这个并且学习了很多关于这个网站的东西，并且用jquery进行了css。

链接：jsFiddle

并排显示ul li

2 个答案: