Question

我尽我所能将其删除。我认为它可能是不直接在它下面的菜单，这就是我想要的，所以我做了padding-top到适当的位置，但它没有任何效果。有什么建议？ FIDDLE

<!DOCTYPE html>
<html>
<head>




<style>div{
   border-left: 1px solid;
}</style>


<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>   
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>     
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 <a href="link here"><img src="http://oi40.tinypic.com/iz1ag0.pngg" border="0" width="200" height="107" style="  margin: 0 auto;"></a>





<script>$( document ).ready(function() {
$(document).ready(function(){

$('#cssmenu > ul > li ul').each(function(index, e){
  var count = $(e).find('li').length;
  var content = '<span class="cnt">' + count + '</span>';
  $(e).closest('li').children('a').append(content);
});
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
  $('#cssmenu li').removeClass('active');
  $(this).closest('li').addClass('active'); 
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#cssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;   
  }     
});

});

});</script>



<style>


html, body {
  margin:0; 
  padding:0;
}</style>





<style>#headerWrapper {
    position: fixed;
    width: 200px;
    height: 100%;
    background-color: black; /* Omit to see body content scroll behind radius.  */
}
#headerBorder{
    border: black; 
    border-radius: 35px; 
    -moz-border-radius: 35px; 
    -webkit-border-radius: 35px; 
    overflow:hidden;
}
#headerContent {
    background-image:url("http://www.fimfiction-static.net/images/story_images/92970_r.png?1364253348");
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    opacity: 1;
}</style>






</head>





<body>

<div id="headerWrapper">
  <div id="headerBorder">
    <div id="headerContent">
      <br />
      <br />
      <br />
       Border radius is used so you can see the red background in wrapper.
      </div>
   </div>
</div>






</body>
</html>











<!DOCTYPE html>
<html>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    <script type='text/javascript' src='menu_jquery.js'></script>





    <style>@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
@charset 'UTF-8';
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Open Sans', sans-serif;
  font-size: 10px;
  position: relative;


}
#cssmenu a {
  line-height: 1.3;
}
#cssmenu {
  width: 200px;

}
#cssmenu > ul > li > a {
  padding-right: 40px;
  font-size: 9px;
  font-weight: bold;
  display: block;
  background: #000000;
  color: #9C9C9C;
  border-bottom: 1px solid #393939;
  text-transform: uppercase;

}
#cssmenu > ul > li > a > span {
  background: #000000;
  padding: 10px;
  display: block;
  font-size: 9px;
  font-weight: 300;
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;
}
#cssmenu > ul > li.active {
  border-bottom: none;
}
#cssmenu > ul > li.active > a {
  color: #fff;
}
#cssmenu > ul > li.active > a span {
  background: #000000;
}
#cssmenu span.cnt {
  position: absolute;
  top: px;
  right: 15px;
  padding: 0;
  margin: 0;
  background: none;
  padding-top: 20px;
}
/* Sub menu */
#cssmenu ul ul {
  display: none;
}
#cssmenu ul ul li {
  border: 1px solid #2A2A2A;
  border-top: 0;
}
#cssmenu ul ul a {
  padding: 10px;
  display: block;
  color: #FFFFFF;
  font-size: 9px;
}
#cssmenu ul ul a:hover {
  color: #000000;
}
#cssmenu ul ul li.odd {
  background: #2E2E2E;
}
#cssmenu ul ul li.even {
  background: #2E2E2E;
}</style>





</head>
<body>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Widgets</span></a></li>
         <li><a href='#'><span>Menus</span></a></li>
         <li class='last'><a href='#'><span>Products</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Company</span></a>
      <ul>
         <li><a href='#'><span>About</span></a></li>
         <li class='last'><a href='#'><span>Location</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</body>
</html>

Answer 1

如果您在显示“此处链接”的链接上删除margin: 0 auto;内联样式并向其添加display: block;，那么您应该会感觉良好。

这是一个小提琴：http://jsfiddle.net/y2AFN/1/

如何删除标题图像周围的空白区域？

1 个答案: