css - 悬停下拉菜单后无法更改大小和位置

Question

我的下拉菜单有问题。我不知道如何在在线下滚动到中心位置后更改按钮的位置。你能帮帮我吗？谢谢!

例子: enter image description here

* {margin: 0; padding: 0;}

body {
font-family: arial;
color:#ccc;
}

#full-screen-background-image {
  z-index: -999;
  min-height: absolute;
  min-width: absolute;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

#wrapper {
min-height: 100%; _height: 100; 
margin: 0 auto -150px auto;
}

a:hover {
color: #0095cd;
}

section {
background: url(/Users/ivanazuskinova/Dropbox/auttalk/INDEX/menu01.png)50% 0 no-repeat;
background-size: 1900px 86px;
opacity:0.8;
}


#header-content {
width:960px; 
margin: 0 auto; 
padding: 60px 0;
}

#content {
width: 960px; 
margin: 0 auto; 
padding: 100px 0;
}

.static {
width: 960px;
margin: 0 auto;
text-align: center;
position: relative;
}

nav li{
display: inline-block;
padding: 35px 60px 100px 0px;
}
nav li:nth-child(3) {
padding-right: 200px;
}

nav li:nth-child(1) {
padding-left: 4in 0px;
}

.static a {
  transition: all linear 0.15s;
  color: white;
}
.static li:hover > a,
.static .current-item > a {
  text-decoration: none;
  color: white;
  
}

.static .highlighted {
  font-size: 10px;
  line-height: 0%;  
}


.static li:hover .dynamic {
  z-index: 10;
  opacity: 1;  
}

.dynamic {
  position: absolute;
  z-index: 0;
  opacity: 0;
  transition: opacity linear 0.15s;
  background: #ccc;
}
.dynamic li {
  display: relative;
  font-size: 14px;
}

.dynamic li a {
  text-decoration: none;
  color:#17177e;
}


.logo {
background: url(/Users/ivanazuskinova/Dropbox/auttalk/INDEX/logo.png) 50% 0 no-repeat;
background-size: 125px 86px;
height:155px;
width:180px;
position: absolute;
top: 2px;
left: 390px;
}

<section>
 <header>
 <div id="wrapper">
 		<div id="header">
			<div class="static-wrap">
  			<div class="static">
  			<nav>
  			 <ul>
    		<li><a href="/Users/ivanazuskinova/Documents/auttalk/skuska/onas.html">Home</a></li>
   				<li><a href="/Users/ivanazuskinova/Documents/auttalk/skuska/ovas.html">o vás</a>
    			<ul class="dynamic">
         		 <li> <a href="/Users/ivanazuskinova/Documents/auttalk/skuska/vasepribehy.html"><span class="highlighted">&#9658;</span>Vaše přiběhy</a></li>
          		 <li><a href="/Users/ivanazuskinova/Documents/auttalk/skuska/diskusniforum.html"><span class="highlighted">&#9658;</span>Diskusní fórum</a>
        		</li>
        		</ul>
   				</li>
    		<li>Services</li>
    		<li>Work</li>
    		<li>Blog</li>
    		<li><a href="/Users/ivanazuskinova/Documents/auttalk/skuska/onas.html">Kontakt</a></li>
   			</ul>
  			</nav>
  <div class="logo"></div>
 </header>
</section>

Answer 1

尝试向 li 链接添加 block 显示。

    .dynamic li a {
      display: block;
      text-decoration: none;
      color:#17177e;
    }