带有方向箭头的纯 CSS 菜单

Question

我正在尝试创建一个具有 3 级的菜单。主菜单，某些项目的子菜单，然后是某些项目的第二个子菜单。

我已经让菜单正常工作，但我正在尝试让方向箭头正常工作，所以请在有子菜单时显示。

这是我的 CSS & HTML:

h1 {
 font-family: "Arial";
 font-size: 40px;
}

h2 {
 font-family: "Arial";
 font-size: 30px;
}

h3 {
 font-family: "Arial";
 font-size: 20px;
}

h4 {
 font-family: "Arial";
 font-size: 16px;
}

ul {
    margin: 0;
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}

body {
  padding-top: 100px;
}

.header{
  background-color: #1e82be;
  position: abolsute;
  width: 100%;
  top: 0px;
  left: 0px;
}

.headerlogo{
  background-color: #1e82be;
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  padding-left: .5cm;
}

.headermenu{
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  padding-top: 63px;
}

.menu li > a:after { 
  content: ' B7';
  float: right;
}

.menu > li > a:after {
  content: ' BD';
}

.menu li > a:only-child:after {
  content: ''; 
}

.menu li ul li { 
  border-top: 0; 
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #4298cb 0%, #1a70a4 100%) repeat scroll 0 0;
}

nav ul li {
  display: block;
  position: relative;
  float: left;
  background: background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #4298cb 0%, #1a70a4 100%) repeat scroll 0 0;
}

nav li ul {
  display: none;
 }

nav ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

nav ul li a:hover { background: #808080; }

nav li:hover > ul {
  display: block;
  position: absolute;
}

nav li:hover li { float: none; }

nav li:hover a { background: #A9A9A9; }

nav li:hover li a:hover { background: #C0C0C0; }

nav ul ul ul {
  left: 100%;
  top: 0;
}

nav ul:before,
nav ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

nav ul:after { clear: both; }

<!DOCTYPE html>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/stylesheets/main.css">
<div class="header">
<div class="headerlogo">
<img src="/assets/images/main/logo.png">
</div>
</div>
<div class="headermenu">
 <nav>
  <ul class="menu">
   <li><a href="index.php">Home</a></li>
   <li><a href="#">Hyundai</a>
    <ul>
     <li id="H1"><a href="#">Links</i></a>
      <ul>
       <li><a href="http://www.hmca-autonet.com.au/Parts/default.aspx" target="_blank">Autonet</a></li>
       <li><a href="http://ccc.hyundai-motor.com/ccc/main.jsp" target="_blank">Hyundai Customer Care Centre</a></li>
      </ul>
     </li>
     <li id="H2"><a href="#">Vehicle ID & Info</a>
      <ul>
       <li><a href="../pages/H-V-A.php">Accent - MC Model</a></li>
       <li><a href="#">Elantra - HD Model</a></li>
       <li><a href="#">Granduer - TG Model</a></li>
       <li><a href="#">Santa Fe - CM Model</a></li>
       <li><a href="#">Sonata - NF Model</a></li>
       <li><a href="#">Tucson - JM Model</a></li>
       <li><a href="#">i10 - PA Model</a></li>
       <li><a href="#">i20 - PB Model</a></li>
       <li><a href="#">i30 - FB Model</a></li>
       <li><a href="#">ix35 - LM Models</a></li>
       <li><a href="#">iLoad / iMax - TQ Model</a></li>
      </ul>
     </li>
     <li><a href="assets/files/hyundai/Accessories_Pocket_Guide.pdf">Accessory Listing</a></li>
     <li><a href="#">Drive Belts</a></li>
     <li><a href="#">Belts by Size</a></li>
     <li><a href="#">Parts & Service Bulltetins</a></li>
     <li><a href="#">Trek n Tow Components</a></li>
     <li><a href="#">Hyundai PDI Sheets</a></li>
    </ul>
   </li>
   <li><a href="#">Isuzu Ute</i></a>
    <ul>
     <li><a href="#">Links</a>
      <ul>
       <li><a href="#">Isuzu Dealer Connect</a></li>
       <li><a href="#">IUA Extranet</a></li>
      </ul>
     </li>
     <li><a href="#">Accessory Listing</a></li>
     <li><a href="#">Parts & Service Bulletins</a></li>
     <li><a href="#">Isuzu PDI Sheets</a></li>
    </ul>
   </li>
   <li><a href="#">Nissan</a>
    <ul>
     <li><a href="#">Microfische to PDF Catalogue</a></li>
     <li><a href="#">Vehicle Bulletins</a>
      <ul>
       <li><a href="#">General</a></li>
       <li><a href="#">Dualis</a></li>
       <li><a href="#">Maxima</a></li>
       <li><a href="#">Micra</a></li>
       <li><a href="#">Murano</a></li>
       <li><a href="#">Pathfinder</a></li>
       <li><a href="#">Patrol</a></li>
       <li><a href="#">Tiida</a></li>
       <li><a href="#">X-Trail</a></li>
       <li><a href="#">350Z</a></li>
       <li><a href="#">370Z</a></li>
      </ul>
     </li>
    </ul>
   </li>
   <li><a>General</a>
    <ul>
     <li><a href="#">Bulb Reference Chart</a></li>
     <li><a href="#">Lubrication Guide</a>
      <ul>
       <li><a href="#">Great Wall</a></li>
       <li><a href="#">Hyundai</a></li>
       <li><a href="#">Isuzu</a></li>
       <li><a href="#">Nissan</a></li>
       <li><a href="#">Ssangyong</a></li>
       <li><a href="#">Suzuki</a></li>
      </ul>
     </li>
     <li><a href="#">Tyre Comparison Calculator</a></li>
    </ul>
   </li>
  </ul>
 </nav>
</div>

问题是，当我尝试使子菜单箭头向右浮动时，格式变得一团糟。否则它们会显示在文本旁边，这是我不想要的。我想让它显示在最右边，在街区的边缘。

如有任何帮助，我们将不胜感激！谢谢。 :)

Answer 1

如果您删除 float:right 并使用 position:absolute 并使您的 anchor 标签 position:relative.

喜欢

.menu li > a:after { content: ' B7';
                     position: absolute; 
                     right:0px; 
                     top:14px;
                    }

那么你就可以实现你想要的。另外增加 anchors 的 padding 以获得更好的箭头定位。

带有方向箭头的纯 CSS 菜单

Pure CSS Menu with Directional Arrows

html

css

menu

submenu