Html 仅在菜单栏上填充左文本_Html_Css_Menu_Padding

Html 仅在菜单栏上填充左文本

html css menu

Html 仅在菜单栏上填充左文本,html,css,menu,padding,Html,Css,Menu,Padding,我一直在尝试缩进（再右一点）“显示”，但每当我更改单元格填充时，它都会同时更改子元素之间的间距。另一个问题是，我想确保通过悬停显示的栏保持屏幕的全宽。有什么想法吗 HTML 问题就在您的css中： #mainmenu { margin: 0; list-style-type: none; position: relative; padding-left:0; top:100px; } 我可以将其更改为： #mainmenu { **margin-left: 15

我一直在尝试缩进（再右一点）“显示”，但每当我更改单元格填充时，它都会同时更改子元素之间的间距。另一个问题是，我想确保通过悬停显示的栏保持屏幕的全宽。有什么想法吗

HTML

问题就在您的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;

}

在不改变子元素的情况下，将展览移到右侧约150px。被*包围的部分是我唯一更改的部分

**编辑：

嗯，我唯一能想到的另一件事是添加一个不间断的空格：

这将使它看起来像这样：

<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 />

它在HTML上不是很漂亮，但它可以工作。然后，无论主菜单移动多少，您只需更改子菜单的左侧位置

但这会导致通过悬停显示的灰色条带不再是屏幕的全宽，对吗？我正在尝试缩进文本，而不改变标注栏的位置（边距=0）…如果这有意义的话。这可能是为什么这么难做到这一点的原因：是的，我想添加，它确实有效，但我希望有一个不太混乱的css。谢谢。算出了：文本缩进：150px；在.maintextcolor上，我曾尝试在该类上留下填充，但没有任何效果。这很有效。

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

}

<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 />

    @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;
}