1

メニューテキストをそのままインデントしたいのですが、ホバーに表示されるバーを右と同じように左に伸ばして、余白がないようにしたいです（現在は左に隙間があります）。これは可能ですか？

感謝。

jsfiddle: http://jsfiddle.net/xcgjR/29/

CSS

    body {
    background-color: #cccccc;
    }

#mainmenu {
  margin: 0;
  list-style-type: none;
  position: relative;  
     padding-left: 60;
  }

#mainmenu li {
  clear: left;
   position:relative;
   }

#mainmenu a {
  display: block;
  overflow: hidden;
  float: left;
 width:100%;
  position:relative;
    opacity: 1;
    -webkit-transition: all 0.4s ease-in-out;
    padding-left:32px;
    line-height: 42px;
}

#mainmenu > li:hover > a {
  background-position: 0 0;
  background-color:clear;
  background-color:rgba(255,255,255,0.5);
   width:100%;
   \
 opacity: 0;
    -webkit-transition: none;
}

#mainmenu li.active a {
  background-position: 0 0;
  background-color:clear;
    width:100%;  
}

.submenu {
  list-style-type: none; 
  float: left;
  display: none;
  position:absolute;
  left: 90px;
  top:0px;
  width: auto;
}

#mainmenu li a:hover + .submenu, .submenu:hover {
  display:block;
} 

.submenu li {
  display: inline-block; 
  clear: none !important;
}

.submenu li a {
  float: right;
  margin-left: 10px;  
}


/*repeat each of these with new name like submenu3 or submenu4, when adding a new submenu */

.submenu2 {
  list-style-type: none; 
  float: left;
  display: none;
  position:absolute;
  left: 86px;
  top:0px;
  width: auto;
}


#mainmenu li a:hover + .submenu2, .submenu2:hover {
  display:block;
} 

.submenu2 li {
  display: inline-block; 
  clear: none !important;
}

.submenu2 li a {
  float: right;
  margin-left: 10px;  
}


/*end of codes that need to be copied when adding a new submenu*/ 

.maintextcolour {
    font-family: LetterGothic, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#FFF;
    text-decoration: none;
    padding-top:11px;
    cursor: url(cart3.png), auto;
}


.subtextcolour {
    font-family: LetterGothic, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#FFF;
    text-decoration: none;
    padding-top:11px;
    cursor: url(cart3.png), auto;
}

.subtextcolour:hover {
    font-family: LetterGothic, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#666;
    text-decoration: none;
    padding-top:11px;
    cursor: url(cart3.png), auto;
}

#container {
    position: relative;
    min-height: 100%;   
}


@font-face {
    font-family: LetterGothic;
    src: url('LetterGothicStd.otf');
}

HTML

<body>

<div id="container">

<header>

<div align="left">
<a href="Kelly5.html" style="text-decoration:none"><span class="headertext">title </span>
<span class="headertextgreen">HERE</span></a><p><br /></div>

</header>


<nav>
     <ul id="mainmenu">

       <li id="liHome"><a href="#item-x1y1" class="maintextcolour" rel="none" id="Home">INFO</a></li>


        <li id="liServices" class="active"><a href="#item-x1y2" class="maintextcolour" rel="SubMenuY2" id="Services">EXHIBITIONS</a>
             <ul id="SubMenuY2" class="submenu">
                 <li><a href="current.html" class="subtextcolour">CURRENT</a></li>
                 <li><a href="previous.html" class="subtextcolour">PREVIOUS</a></li>     
             </ul></li>


         <li id="liEnvironment">
             <a href="#item-x1y3" class="maintextcolour" rel="none" id="Environment">CV</a>
         </li> 


</nav>

     </div>

</body>
4

1 に答える 1

1

はい、可能です。まず、タグからデフォルトのパディングを削除し、それをハイパーリンク タグに追加して、全幅で表示されるようにする必要があります。コードもあります：

http://dabblet.com/gist/6077264

#mainmenu {
 margin: 0;
 list-style-type: none;
 position: relative;  
 padding-left: 0;
}

#mainmenu a {
 display: block;
 overflow: hidden;
 float: left;
 width:100%;
 position:relative;
 opacity: 1;
 -webkit-transition: all 0.4s ease-in-out;
 line-height: 42px;
 padding-left:32px; /* add as many pixels here! as you want */
}

それが役に立てば幸い！

于 2013-07-25T06:08:38.327 に答える