1

メニューのドロップダウン部分を上から下ではなく並べて表示しようとしています。メニューを機能させるために：noneを表示する必要があり、float：leftはそれを実行していません。私はアイデアがなく、表示が必要なときに他に何をすべきかわかりません。表示する必要があるまでリストを非表示にするためにそこにいる必要はありません。私はフロートを投げました：ほとんどどこにでも残しました。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;とその子の両方を挿入ul liし、子の位置をに変更することで、必要な方法で動作するように見えrelativeました。

これを実行し、このサイトについてより多くのことを学び、jqueryを使用してcssを実行することに一歩近づいたので、皆さんの意見に感謝します。

リンク：jsFiddle

于 2012-07-03T04:50:35.677 に答える