Jquery 菜单div将主div发送到远处_Jquery_Css_Html

Jquery 菜单div将主div发送到远处

jquery css html

Jquery 菜单div将主div发送到远处,jquery,css,html,Jquery,Css,Html,很抱歉这个奇怪的标题，我不知道还能叫它什么。这是我的问题。我正在从头开始创建一个新网站，我对HTML不是很流利，但我创建了一个主div和一个顶部菜单div，当我测试它时，它很好。然后我添加了一个边栏，当我测试它时，菜单一直在左边，所以当我试图修复它时，主div被发送到页面的中间，与菜单一起，远离边栏。以下是我的css代码： body { font: "Trebuchet MS", Verdana, sans-serif; background-image:url("http://www.

很抱歉这个奇怪的标题，我不知道还能叫它什么。这是我的问题。我正在从头开始创建一个新网站，我对HTML不是很流利，但我创建了一个主div和一个顶部菜单div，当我测试它时，它很好。然后我添加了一个边栏，当我测试它时，菜单一直在左边，所以当我试图修复它时，主div被发送到页面的中间，与菜单一起，远离边栏。以下是我的css代码：

body
{
  font: "Trebuchet MS", Verdana, sans-serif;
  background-image:url("http://www.wallchan.com/images/mediums/2000.jpg");
  color: #696969;
}

#main
{
  position: absolute;
  left:105px;
  padding: 30px;
  background-color:     #ADFF2F;
  border-radius: 4px 4px 4px 4px;
}

h1
{
  font: Georgia, serif;
  border-bottom: 3px solid #cc9900;
  color: #996600;
}

#sidebar
{
  position:absolute;
  left:0; top:92px; bottom: 0;
  width: 90px;
  padding: 10px;
  background-color:  #48D1CC;
  border-radius: 10px 10px 10px 10px;
}

#menu
{
  padding: 0px;
  position: relative;
  margin: 0;
}

#menu li
{
  display: inline;
}

#menu li a
{
  background-color:     #87CEFA;
  padding: 10px 20px;
  text-decoration: none;
  line-height: 2.8em;
  color: #034af3;
  border-radius: 4px 4px 0 0;
}

#menu li a:hover
{
  background-color:     #7CFC00;
}

以下是我的主要HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <title>PHP Demo</title>
    <link href="site.css" rel="stylesheet">
  </head>
  <body>
    <div id="sidebar">
      <p>Test</p>
    </div>
    <div id="menu">
      <?php include("header.php"); ?>
      <div id="main">
        <h1>Welcome to the Pantheon Inc. website! </h1>
        <h2>We strive to make your life easier!</h2>
        <?php include("footer.php"); ?>
      </div>
  </body>
</html>


PHP演示
试验
欢迎访问万神殿公司网站！
我们努力让您的生活更轻松！

这是我的头代码：

<ul id="menu">
<li><a href="index.php">Home</a></li>
<li><a href="projects.php">Projects</a></li>
<li><a href="about.php">About</a></li>
</ul>

另外，我想知道有没有办法把我的菜单变成下拉菜单？就像当您将鼠标悬停在它上面时，可能会有一些jquery动画使它下拉其子组件。

谢谢

老实说，我还没有读完你的全部帖子，但这似乎是一个职位问题。当您在一个元素上添加position absolute时，它将丢失页面上的正常流，要恢复此流，您可以在主容器上添加

overflow:hidden;

您还可以添加

<div style="clear:both"></div>

你会得到同样的结果

在这种情况下，您不应该使用

位置：绝对值。

浮动会更好-（如果你的目标浏览器支持它）将是最好的
HTML
其他问题：
没有关闭标记，您需要添加它
您有两个相同的ID，菜单
。你需要扔掉一个
带有浮动布局
<ul id="menu">
    <li><a href="index.php">Home</a></li>
    <li><a href="projects.php">Projects</a></li>
    <li><a href="about.php">About</a></li>
</ul>

<div id="sidebar">
    <p>Test</p>
</div>

<div id="main">
    <h1>Welcome to the Pantheon Inc. website! </h1>
    <h2>We strive to make your life easier!</h2>
</div>

<footer>footer here</footer>

#menu
{
  padding: 0px;
  overflow: hidden;
  margin: 0;
}

#menu li
{
  display: block;
  float: left;
  margin-right: 5px;
}

#main
{
  float: left;
  padding: 30px;
  background-color:     #ADFF2F;
  border-radius: 4px 4px 4px 4px;
  margin-left: 5px;
}

#sidebar
{
  float: left;
  width: 90px;
  padding: 10px;
  background-color:  #48D1CC;
  border-radius: 10px 10px 10px 10px;
}

footer { clear: both; }