0

「展示」をインデント（さらに右）しようとしましたが、セルのパディングを変更するたびに、子要素間の間隔が同時に変更されます。もう1つの問題は、ホバーで表示されるバーが画面の全幅のままであることを確認したいということです。何かご意見は？

http://jsfiddle.net/zuVu7/61/

HTML

<body class="bg">

<div>
<nav>
     <ul id="mainmenu">

          <li id="liServices" class="active"><a href="#" class="maintextcolour">EXHIBITIONS</a>
             <ul id="SubMenuY2" class="submenu">
                 <li><a href="current.html" class="subtextcolour">CURRENT</a></li>
                 <li><a href="previous2.html" class="subtextcolour">PREVIOUS</a></li>     
             </ul></li>
    </nav>

CSS

    @charset "UTF-8";
    /* CSS Document */

    .bg {
        background-attachment:fixed; 
        background-repeat: no-repeat; 
        -moz-background-size: cover;
      background-size: cover;
    background-color:#666;
        margin: 0;
        }

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


    #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:30px;
        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: 80px;
      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;  
    }


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

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

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

1 に答える 1

0

問題はあなたのcssにあります： 

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

}

次のように変更できました。

#mainmenu {
  **margin-left: 150px;**
  list-style-type: none;
  position: relative;  
  padding-left:0;
  top:100px;

}

これにより、子要素を変更せずに、展示が約 150 ピクセル右に移動しました。*で囲った部分だけ変更しました。

**編集：

私が考えることができる唯一の他のことは、改行なしのスペースを追加することです: &nbsp;

それは次のようになります。 

<body class="bg">


<div>
<nav>
     <ul id="mainmenu">

<li class="active"><a href="#" class="maintextcolour">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EXHIBITIONS </a>
             <ul id="SubMenuY2" class="submenu">
                 <li><a href="current.html" class="subtextcolour">CURRENT</a></li>
                 <li><a href="previous2.html" class="subtextcolour">PREVIOUS</a></li>     
             </ul></li>
    </nav>
    </div>
<img src="line.jpg" align="top" width="100%" height="1" />
</div>

<br />

CSS:

    @charset "UTF-8";
    /* CSS Document */

    .bg {
        background-attachment:fixed; 
        background-repeat: no-repeat; 
        -moz-background-size: cover;
      background-size: cover;
    background-color:#666;
        margin: 0;
        }

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

    }


    #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:30px;
        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:relative; 
          left: 120px;
          top: -53px;
      width: auto;
    }

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

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

    }

    .submenu li a {
      float: right;

    }


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


    }





    .subtextcolour {
        font-family: LetterGothic, Arial, Helvetica, sans-serif;

    font-size: 14px;
    color:#FFF;
    text-decoration: none;
    padding-top:11px;
    cursor: url(cart3.png), auto;
}

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

HTML ではあまりきれいではありませんが、機能します。次に、メインメニューをどれだけ移動しても、サブメニューの左の位置を変更するだけです。

于 2013-07-26T23:59:41.160 に答える