日: 2014年6月13日

普通にコード書く

<!--メインナビ-->
<div class="d_navi_main_all">
  <div class="d_navi_main_width">
    <div class="d_navi_main_in">
    
   <ul> 
   





<li><a href="<?php echo home_url(); ?><?php include("link5.php") ?>"><i class="icon-home-2 test_icon"></i>HOME</a></li>




<li><a href="<?php echo home_url(); ?>?page_id=4"><i class="icon-cog test_icon"></i>ご利用ガイド</a></li>


<li><a href="<?php echo home_url(); ?>?page_id=14"><i class="icon-star test_icon"></i>制作実績</a></li>


<li><a href="<?php echo home_url(); ?>?page_id=157"><i class="icon-cog test_icon"></i>制作料金</a></li>


<li><a href="<?php echo home_url(); ?>?page_id=409"><i class="icon-edit-alt test_icon"></i>BLOG</a></li>


<li><a href="<?php echo home_url(); ?>?page_id=9"><i class="icon-mail-alt test_icon"></i>お問い合わせ</a></li>



  </ul>
  

  
    </div class="d_navi_main_in">
  </div class="d_navi_main_width">
</div class="d_navi_main_all">
<!--/メインナビ-->  

css

ポイントは　線があり　そして　ホバー時に背景が色着いて　線も違和感がない

/*メインメニュー*/


.d_navi_main_in ul {
	list-style-type: none;
	overflow: hidden;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	font-size: 16px;
}

.d_navi_main_in ul li  {
	list-style-type: none;
	display: block;
	float: left;
	width: 16%;
	padding-top: 10px;
	padding-bottom: 10px;
	vertical-align: bottom;
	}

.d_navi_main_in ul li a {
	padding-top: 5px;
	padding-bottom: 5px;
	border-right-width: 1px;
	border-right-style: dotted;
	border-right-color: #CCC;
	box-sizing: border-box;
	text-align: center;
	display: block;
	width: 100%;
	font-size: 15px;
	text-indent: -10px;
}
.d_navi_main_in ul li:nth-last-of-type(1)  a{
	border-right-style: none;
}


/*リストホバー時リストの消したパディングを付加する*/
.d_navi_main_in ul li:hover a{
	display: block;
	color: #FFFFFF;
	text-decoration: none;
	padding-top: 15px;
	padding-bottom: 15px;
}

/*リストホバー時パディングを無くす*/
.d_navi_main_in ul li:hover {
padding-top: 0px;
	padding-bottom: 0px;	
}


/*点線消し含む*/
.d_navi_main_in ul li:hover{
	display: block;
	color: #00AF86;
	text-decoration: none;
	background-color: #00AF86;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #FFF;
	margin-left: -1px;
}