Question

我尝试将下拉选项添加到我当前的固定侧边栏菜单中。

当我尝试添加新列表来添加额外菜单时，它只会在下面显示它们。当我将鼠标悬停在Three上时，我希望Three One显示在Three右侧，Three Two显示在Three One下方。

当我将鼠标悬停在Four上时，我希望Four One“显示在Four右侧Four Two和Four One下方。{同样的情况发生当我将鼠标悬停在Four One One

上时

下面是我的HTMl和CSS

body {
    font: 15px/1.5 Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    background-color: #2E2E2E;
}

header {
    background: #424242;
    color: #ffffff;
    border-right: #FA5858 3px solid;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 175px;
}

header ul {
    padding: 0;
}

header a {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
}

header li {
    ;
    display: block;
}

span {
    margin-right: 15px;
}

header ul li {
    padding: 15px;
}

header ul li:hover {
    background-color: #FA5858;
}

<!DOCTYPE html>
<html>
<head>
	<title>Menu</title>
	<link rel="stylesheet" type="text/css" href="test.css">
	<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>
<body>
	<header>
		<div class="container">
			<center>
				<h1>Logo Here</h1>
			</center>
			<ul>
				<li>
					<a href=""><span class="far fa-newspaper"></span>One</a>
				</li>
				<li>
					<a href=""><span class="far fa-list-alt"></span>Two</a>
				</li>
				<li>
					<a href=""><span class="fas fa-user-secret"></span>Three</a>
				</li>
				<ul>
					<li>
					<a href=""><span class="fas fa-user-secret"></span>Three One</a>
					</li>
					<li>
					<a href=""><span class="fas fa-user-secret"></span>Three Two</a>
					</li>
				</ul>
				<li>
					<a href=""><span class="fas fa-shopping-basket"></span>Four</a>
				</li>
				<ul>
					<li>
					<a href=""><span class="fas fa-user-secret"></span>Four One</a>
					</li>
					<ul>
						<li>
						<a href=""><span class="fas fa-user-secret"></span>Four One One</a>
						</li>
						<li>
						<a href=""><span class="fas fa-user-secret"></span>Four One Two</a>
						</li>
					</ul>
					<li>
					<a href=""><span class="fas fa-user-secret"></span>Four Two</a>
					</li>
				</ul>
				<li>
					<a href=""><span class="far fa-question-circle"></span>Five</a>
				</li>
			</ul>
		</div>
	</header>
</body>
</html>

Answer 1

试试这个解决方案

<header>
<div class="container">
<center>
  <h1>Logo Here</h1>
</center>
<ul>
  <li> <a href=""><span class="far fa-newspaper"></span>One</a> </li>
  <li> <a href=""><span class="far fa-list-alt"></span>Two</a> </li>
  <li> <a href=""><span class="fas fa-user-secret"></span>Three</a> 
    <ul>
    <li> <a href=""><span class="fas fa-user-secret"></span>Three One</a> </li>
    <li> <a href=""><span class="fas fa-user-secret"></span>Three Two</a> </li>
  </ul>
  </li>
</ul>

和

body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #2E2E2E;

}

header {
  background: #424242;
color: #ffffff;
border-right: #FA5858 3px solid;
position: fixed;
top: 0;
bottom: 0;
width: 175px;
}

header ul {
padding: 0;
}

header a {
color: #ffffff;
text-decoration: none;
font-size: 16px;
}

header li {
display: block;
position:relative;
}

span {margin-right: 15px;}

header ul li {padding: 15px;}

header ul li:hover {background-color: #FA5858;}
header ul li ul{display:none;}
header ul li:hover ul{display:block; position:absolute; top:0; left:170px; background:#fff; width:200px;}
header ul li ul li a{color:#000; display:inline-block; width:100%;}
header ul li ul li{display:inline-block; width:100%; padding:0;}

jsfiddle

Answer 2

试试这个，脸上露出笑容：）

HTML

<header>
 <div class="container">
<center>
  <h1>Logo Here</h1>
</center>
<ul>
  <li> <a href=""><span class="far fa-newspaper"></span>One</a> </li>
  <li> <a href=""><span class="far fa-list-alt"></span>Two</a> </li>
  <li> <a href=""><span class="fas fa-user-secret"></span>Three</a> 
    <ul>
    <li> <a href=""><span class="fas fa-user-secret"></span>Three One</a> 
        <ul>
            <li> <a href=""><span class="fas fa-user-secret"></span>Three One One</a> </li>
            <li> <a href=""><span class="fas fa-user-secret"></span>Three One Two</a> </li>
         </ul>
     </li>
    <li> <a href=""><span class="fas fa-user-secret"></span>Three Two</a> </li>
  </ul>
  </li>
   </ul>
   </div>
 </header>

并改善css

body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #2E2E2E;
}

header {
background: #424242;
color: #ffffff;
border-right: #FA5858 3px solid;
position: fixed;
top: 0;
bottom: 0;
width: 175px;
}

标题ul {padding：0;}

header a {
color: #ffffff;
text-decoration: none;
font-size: 16px;
    }

    header li {
display: block;
position:relative;
 }

span {
margin-right: 15px;
  }

    header ul li {
padding: 15px;
     }

  header ul li:hover {
background-color: #FA5858;
 }
  header ul li ul{display:none;}
    header ul li:hover ul{display:block; position:absolute; top:0; left:170px; background:#fff; width:200px;}
      header ul li ul li a{color:#000; display:inline-block; width:100%;}
     header ul li ul li{display:inline-block; width:100%; padding:0;}
    header ul li ul li ul{display:none !important;}
  header ul li ul li:hover ul{display:block !important;}

jsfiddle

HTML / CSS在sidemenu右侧添加下拉列表

2 个答案: