Question

对此有何建议？

我为任何列表项目添加了一个箭头的背景图片，其中包含“dropable”类的下拉列表，因此列表项不再均匀分布以考虑添加的箭头，任何建议如何解决这个问题迄今为止没有成功。

CodePen：http://codepen.io/nickelse/pen/GJezQX?editors=110

HTML：

<div class="wrapper">
  <div class="container">
    <nav>
      <ul class="clearfix">
        <li><a href="#">Home</a></li>
        <li class="dropable"><a href="#">WordPress</a>
          <!-- First Tier Drop Down -->
          <ul>
            <li><a href="#">Themes</a></li>
            <li><a href="#">Plugins</a></li>
            <li><a href="#">Tutorials</a></li>
          </ul>        
        </li>
        <li class="dropable"><a href="#">Web Design</a>
          <!-- First Tier Drop Down -->
          <ul>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Links</a></li>
            <li><a href="#">Tutorials</a></li>
          </ul>
        </li>
        <li><a href="#">Graphic Design</a></li>
        <li><a href="#">Inspiration</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
  </div>
</div>

CSS：

/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

body {
    background: #212121;
    font-family: 'Open Sans', sans-serif;
  margin: 0;
}

.wrapper {
  background: #454545;
  border-bottom: 3px solid #666;
  width: 100%;
}

.container {
    margin: 0 auto;
    width: 1000px;
}

nav { 
    margin: 0;
  font-size: 0;
  text-align: center;
}

nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}

nav ul li {
    margin: 0px;
    display: inline-block;
}

nav a {
    display: block;
    padding: 0 20px;    
    color: #fff;
    font-size: 14px;
    line-height: 56px;
    text-decoration: none;
}

nav a:hover { 
    background-color: #000000; 
}

nav > ul > li {
    background: url(http://i.imgur.com/ijNENpN.png) no-repeat left 50%;     
}

nav > ul > li:first-child {
  background: none;
}

nav li:hover + li {
    background-image: none;
}

nav > ul > li:hover > a {
  background-color: #666;
}

nav ul li:hover > ul {
    display: block;
  text-align: left;
}

nav ul ul {
    display: none;
    position: absolute; 
    top: 56px;
  background-color: #666;
}

nav ul ul li {
  border-top: 1px solid #454545;
    width: 270px;
    float: none;
    display: list-item;
    position: relative;
}

nav ul ul li:first-child {
  border-top: none;
}

nav ul ul li a {
  line-height: 42px;
}

nav li.dropable a {
  background: url(http://i.imgur.com/5Clqhz5.png) no-repeat 93% center; 
}

nav li.dropable li a {
  background-image: none;
}

nav li.dropable li a:hover {
  background: #333;
}

/*
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }
*/

干杯

尼克

Answer 1

我建议使用font-awesome中的字体，而不是将图像用于插入符号。

这很不错

/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

body {
	background: #212121;
	font-family: 'Open Sans', sans-serif;
  margin: 0;
}

.wrapper {
  background: #454545;
  border-bottom: 3px solid #666;
  width: 100%;
}

.container {
	margin: 0 auto;
	width: 1000px;
}

nav { 
	margin: 0;
  font-size: 0;
  text-align: center;
}

nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}
	
nav ul li {
	margin: 0px;
	display: inline-block;
}

nav a {
	display: block;
	padding: 0 20px;	
	color: #fff;
	font-size: 14px;
	line-height: 56px;
	text-decoration: none;
}

nav a:hover { 
	background-color: #000000; 
}

nav > ul > li {
	background: url(http://i.imgur.com/ijNENpN.png) no-repeat left 50%; 	
}

nav > ul > li:first-child {
  background: none;
}

nav li:hover + li {
 	background-image: none;
}

nav > ul > li:hover > a {
  background-color: #666;
}
	
nav ul li:hover > ul {
	display: block;
  text-align: left;
}

nav ul ul {
	display: none;
	position: absolute; 
	top: 56px;
  background-color: #666;
}

nav ul ul li {
  border-top: 1px solid #454545;
	width: 270px;
	float: none;
	display: list-item;
	position: relative;
}

nav ul ul li:first-child {
  border-top: none;
}

nav ul ul li a {
  line-height: 42px;
}

nav ul > li.dropable > a:after {
/*  display:inline;
  content: "\00a0\00a0\00a0\00a0";*/
/*  background:url(http://i.imgur.com/5Clqhz5.png) no-repeat center center;*/
}

nav li.dropable li a {
  background-image: none;
}

nav li.dropable li a:hover {
  background: #333;
}

/*
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }
*/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="wrapper">
  <div class="container">
    <nav>
      <ul class="clearfix">
        <li><a href="#">Home</a></li>
        <li class="dropable"><a href="#">WordPress&nbsp;&nbsp;<i class="fa fa-caret-down"></i></a>
          <!-- First Tier Drop Down -->
          <ul>
            <li><a href="#">Themes</a></li>
            <li><a href="#">Plugins</a></li>
            <li><a href="#">Tutorials</a></li>
          </ul>        
        </li>
        <li class="dropable"><a href="#">Web Design&nbsp;&nbsp;<i class="fa fa-caret-down"></i></a>
          <!-- First Tier Drop Down -->
          <ul>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Links</a></li>
            <li><a href="#">Tutorials</a></li>
          </ul>
        </li>
        <li><a href="#">Graphic Design</a></li>
        <li><a href="#">Inspiration</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
  </div>
</div>

Answer 2

我会利用CSS中的:after伪类。边距变得均匀分布，您不必不必要地将图像放入导航中。

CodePen

nav ul > li.dropable > a:after {
  display:inline;
  content: "\00a0\00a0\00a0\00a0";
  background:url(http://i.imgur.com/5Clqhz5.png) no-repeat center center;
}

Answer 3

想出来，无论如何欢呼。

我这样做了：

nav li.dropable a {
  background: url(http://i.imgur.com/5Clqhz5.png) no-repeat right 20px center ;
  padding-right: 34px;
}

列出与背景图像宽度相同的项目

3 个答案: