Question

我正在学习用于前端Web开发的html和css。在导航菜单中为下拉框编写代码时，我无法获得所需的输出。在导航菜单中，下拉菜单在左角打开，但导航链接位于其他位置。请帮忙。 HTML code：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div  id="wpback"></div>
<div id="wallpaper" ></div>

<div id="name">                                                 <!  
========================Name of Company================= >
<header>
            <h1 class="prince">PRINCE Institute</h1>
            <input type="button" value="Log In" style="float:right"></input>
            <input type="button" value="Sign Up" style="float:right">
</input>

</header>
            What do you want to know?<br><input type="text"></input>
            <input type="button" value="Search"></input>
</div>
<div id="menu">                                         <! 
========================Navigation Menu================= >
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About</a>
                <ul>
                    <li><a href="">A1</a></li>
                    <li><a href="">A2</a></li>
                    <li><a href="">A3</a></li>
                </ul></li>
            <li><a href="">Courses</a>
                <ul>
                    <li><a href="">Java</a></li>
                    <li><a href="">Python</a></li>
                    <li><a href="">Data Base Management System</a></li>
                    <li><a href="">Machine Learning</a></li>
                    <li><a href="">Blockchain</a></li>
                </ul></li>
            <li><a href="">Settings</a>
                <ul>
                    <li><a href="">Your Profile</a></li>
                    <li><a href="">Your Cart</a></li>
                    <li><a href="">Mode</a></li>
                </ul></li>
        </ul>
</div>      

<div>                                           <! 
========================Content=========================== >
            <ul >Courses Offered:
            <li>Java</li>
            <li>Python</li>
            <li>Machine Learning</li>
            <li>Block Chain</li>
            <li>Data Base Management System</li></ul>
</div>


</body>
</html>

CSS代码：

＆＃13;

body {
  font-family: lucida console;
  font-size: 14px;
  color: white;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

#name {
  position: relative;
  top: 0;
  left: 0;
}

.prince {
  color: white;
  text-align: center;
  padding: 5px;
  background-color: rgba(65, 15, 0, 0.5);
}

#wpback {
  background-color: black;
  position: absolute;
  width: 100%;
  height: 100%;
}

#wallpaper {
  background-image: url('tech.jpg');
  opacity: 0.1;
  position: absolute;
  width: 100%;
  height: 100%;
}

#menu {
  margin-top: 10px;
  background-color: rgba(65, 15, 0, 1);
  height: 50px;
  position: relative;
}

#menu ul {
  padding: 0;
  margin: 0;
}

#menu ul li {
  list-style: none;
  display: inline;
}

#menu ul li a {
  margin: 10px;
  padding: 16px;
  text-decoration: none;
  color: white;
  line-height: 50px;
}

#menu ul li a:hover {
  background-color: gray;
  color: black;
  transition: ease-in-out 0.2s;
}

#menu ul li ul li {
  display: none;
}

#menu ul li:hover ul li {
  background-color: silver;
  display: block;
  width: 220px;
}

#menu ul li:hover ul li a {
  margin: 10px;
  padding: 15px;
  text-decoration: none;
  line-height: 50px;
  color: black;
}

#menu ul li ul li a:hover {
  background-color: gray;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="/style.css">
</head>

<body>
  <div id="wpback"></div>
  <div id="wallpaper"></div>

  <div id="name">
    <!  
    ========================Name of Company================= >
    <header>
      <h1 class="prince">PRINCE Institute</h1>
      <input type="button" value="Log In" style="float:right"></input>
      <input type="button" value="Sign Up" style="float:right">
      </input>

    </header>
    What do you want to know?<br><input type="text"></input>
    <input type="button" value="Search"></input>
  </div>
  <div id="menu">
    <! 
    ========================Navigation Menu================= >
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">About</a>
        <ul>
          <li><a href="">A1</a></li>
          <li><a href="">A2</a></li>
          <li><a href="">A3</a></li>
        </ul>
      </li>
      <li><a href="">Courses</a>
        <ul>
          <li><a href="">Java</a></li>
          <li><a href="">Python</a></li>
          <li><a href="">Data Base Management System</a></li>
          <li><a href="">Machine Learning</a></li>
          <li><a href="">Blockchain</a></li>
        </ul>
      </li>
      <li><a href="">Settings</a>
        <ul>
          <li><a href="">Your Profile</a></li>
          <li><a href="">Your Cart</a></li>
          <li><a href="">Mode</a></li>
        </ul>
      </li>
    </ul>
  </div>

  <div>
    <! 
    ========================Content=========================== >
    <ul>Courses Offered:
      <li>Java</li>
      <li>Python</li>
      <li>Machine Learning</li>
      <li>Block Chain</li>
      <li>Data Base Management System</li>
    </ul>
  </div>


</body>

</html>

＆＃13;

当我在导航菜单中没有选项时，选项Home，About，Couses＆amp;设置是一致的，但是当我在下拉菜单中添加选项时，各个选项会向下。

Answer 1

对齐的下拉内容

确定下拉内容是否应该从左到右或从右到左，左右属性。

CSS 代码

<div class="dropdown" style="float:left;">
  <button class="dropbtn">Left</button>
  <div class="dropdown-content" style="left:0;">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<div class="dropdown" style="float:right;">
  <button class="dropbtn">Right</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

HTML 代码

{{1}}

使用css制作下拉框时没有获得所需的输出

1 个答案: