我的子菜单未与导航

时间：2015-08-18 15:30:57

标签： html css

＆＃13;
＆＃13; 
nav#primary_topmenu {
	position: fixed;
	z-index: 5;

	width: 1300px;
	top:0%;
	text-align: center;
	
}

#topnav{

height: 85px;
background: rgba(29, 15, 6, 0.7);
width: 1300px;
}

#logotop img {
	
float:left;
margin-top: 5px;
}

nav#primary_topmenu a {
	text-decoration: none;
	text-indent: -9999px;
	 color: #fff;

}

nav#primary_topmenu li {
	display:block;
	font-size: 1.2em;
	padding: 1em;
	
	font-weight: 900;
	font-family: 'Sorts Mill Goudy', "MS Mincho", serif;
	text-align: center;
	

	height: 3em;
	display:table-cell;
	vertical-align: middle;
	/*border: solid 1px #fff;*/
	}

nav#primary_topmenu ul {

	display: inline-block;
	height: 85px;
	box-shadow: 0 0 25px rgba(0,0,0,0.3);
	background: rgba(29, 15, 6, 0.7);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7E7E7E7E', EndColorStr='#7E7E7E7E');*/

}

nav#primary_topmenu li:hover {

	border-bottom: 4px solid #cd4650;
	
}

nav#primary_topmenu a:hover {
    color: #cd4650;
}

/*---- dropdown menu----*/

nav#primary_topmenu ul ul {
	display: none;
  	position:fixed;
 	top:88px;
 	height:61px;
 	padding:0;
 	margin: 0;

 	}

nav#primary_topmenu ul ul li {
	float:none;
	display: block;
	height:20px;
	font-weight: normal;
	font-family: 'Sorts Mill Goudy', "MS Mincho", serif;
	border: 1px solid rgba(150,150,150,0.1);
	box-shadow: 0 0 25px rgba(0,0,0,0.3);
	background: rgba(29, 15, 6, 0.7);


}

nav#primary_topmenu ul li:hover > ul{ /*when hovering the parents please show the child*/
	display:block;
	padding:0;
 	margin: 0;
}

nav#primary_topmenu ul ul li a:hover {

	list-style-type: none;
	
}
＆＃13; 
<div id="topnav">
<nav id="primary_topmenu">
			   
			    <ul>
                	 <div id="logotop"><img src="images/coincopy.png">
			         <li>
				       
				      <a class="introduction" href="#primary_topmenu li">Home</a>
			        </li>
					<li>
						
				     <a class="background" href="#background">Mission</a>
					</li>
					<li>
						
				      <a class="ira" href="#ira">Fund <br>Placement</a>
					</li>
					<li>
						
				      <a class="corporate" href="#corporate">Corporate <br>Finance</a>
					</li>
					<li>
						
				      <a class="investment" href="#investment">Renewable <br> Energy</a>
					</li>
                    <li>
						
						<a class="consulting" href="#consulting">Team</a>
						<ul>
								<li><a href="#">Sub Menu 1</a></li>
      							<li><a href="#">Sub Menu </a></li>
      							<li><a href="#">Sub Menu 1</a></li>
      							<li><a href="#">Sub Menu </a></li>
      							<li><a href="#">Sub Menu 1</a></li>
      							<li><a href="#">Sub Menu </a></li>
      							<li><a href="#">Sub Menu 1</a></li>
      							<li><a href="#">Sub Menu </a></li>
      					</ul>
                    </li>

                     <li>
                    <a class="consulting" href="#consulting">Other <br>Services</a>

                    	<ul>
                    		
      						<li><a href="#">Sub Menu 1</a></li>
      						<li><a href="#">Sub Menu </a></li>
      						<li><a href="#">Sub Menu 1</a></li>
      						<li><a href="#">Sub Menu </a></li>
      						
      					</ul>
                    </li>
                     <li>

                    <a class="consulting" href="#consulting">Licenses <br>& Compliance</a>
                    </li>
                    <li>
						
						<a class="principal" href="#principal">Connections</a>
                    </li>
                    </div>
                    </ul>
                </nav>
</div>
＆＃13;
＆＃13;
＆＃13;

我尝试对齐我的子菜单，使其与父母完全对齐。每当我用鼠标悬停时，例如＆＃34; Team＆＃34;子菜单出现，但不准确对齐Team菜单的开始位置。

我认为这是因为我有填充：1em;在nav#primary_topmenu li. 但后来我试图在nav#primary_topmenu ul ul的css中添加margin-left：-15px，但它没有移动。

我该如何解决这个问题？我尝试在子菜单中添加填充：0和Margin：0，但没有帮助...请帮助我。

1 个答案:

答案 0 :(得分：0)

我想我弄清楚了这一点;）。

问题似乎是“填充：1em;”在“nav＃primary_topmenu li”。如你所料。它将列表向右移动1em。

您自己的解决方案无效，因为“nav＃primary_topmenu ul li：hover＆gt; ul”会将边距重置为0并覆盖您的解决方案。

所以解决方案很简单。添加“margin-left：-1em;”到“nav＃primary_topmenu ul li：hover＆gt; ul”而不是“nav＃primary_topmenu ul ul”。

This is the fiddle (fullscreen)

This is the fiddle with code

PS：我也对移动导航（css的最后一行）做了一点修复

<强> HTML          

                <ul>
                     <div id="logotop"><img src="images/coincopy.png">
                     <li>

                      <a class="introduction" href="#primary_topmenu li">Home</a>
                    </li>
                    <li>

                     <a class="background" href="#background">Mission</a>
                    </li>
                    <li>

                      <a class="ira" href="#ira">Fund <br>Placement</a>
                    </li>
                    <li>

                      <a class="corporate" href="#corporate">Corporate <br>Finance</a>
                    </li>
                    <li>

                      <a class="investment" href="#investment">Renewable <br> Energy</a>
                    </li>
                    <li>

                        <a class="consulting" href="#consulting">Team</a>
                        <ul>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                        </ul>
                    </li>

                     <li>
                    <a class="consulting" href="#consulting">Other <br>Services</a>

                        <ul>

                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu </a></li>
                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu </a></li>

                        </ul>
                    </li>
                    <li>

                    <a class="consulting" href="#consulting">Licenses <br>& Compliance</a>
                    </li>
                    <li>

                        <a class="principal" href="#principal">Connections</a>
                    </li>
                    </div>
                    </ul>
                </nav>
</div>

<强> CSS 

nav#primary_topmenu {
    position: fixed;
    z-index: 5;
    width: 1300px;
    top:0%;
    text-align: center; 
}

#topnav{
height: 85px;
background: rgba(29, 15, 6, 0.7);
width: 1300px;
}

#logotop img {  
float:left;
margin-top: 5px;
}

nav#primary_topmenu a {
    text-decoration: none;
    text-indent: -9999px;
     color: #fff;
}

nav#primary_topmenu li {
    display:block;
    font-size: 1.2em;
    padding: 1em;   
    font-weight: 900;
    font-family: 'Sorts Mill Goudy', "MS Mincho", serif;
    text-align: middle;
    height: 3em;
    display:table-cell;
    vertical-align: middle;
    /*border: solid 1px #fff;*/
    }

nav#primary_topmenu ul {
    display: inline-block;
    height: 85px;
    box-shadow: 0 0 25px rgba(0,0,0,0.3);
    background: rgba(29, 15, 6, 0.7);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7E7E7E7E', EndColorStr='#7E7E7E7E');*/
}

nav#primary_topmenu li:hover {
    border-bottom: 4px solid #cd4650;
}

nav#primary_topmenu a:hover {
    color: #cd4650;
}

/*---- dropdown menu----*/

nav#primary_topmenu ul ul {
    display: none;
    position:fixed;
    top:88px;
    height:61px;
    padding:0;
    margin:0;
    }

nav#primary_topmenu ul ul li {
    float:none;
    display: block;
    height:20px;
    font-weight: normal;
    font-family: 'Sorts Mill Goudy', "MS Mincho", serif;
    border: 1px solid rgba(150,150,150,0.1);
    box-shadow: 0 0 25px rgba(0,0,0,0.3);
    background: rgba(29, 15, 6, 0.7);
}

nav#primary_topmenu ul li:hover > ul{ /*when hovering the parents please show the child*/
    display:block;
    padding:0;
    margin: 0;
    margin-left: -1em; /*the dropdown displayed too much to the right because of the 1em padding in nav#primary_topmenu li. This moves the dropdown back by the same amount. */
}

nav#primary_topmenu ul ul li a:hover {
    list-style-type: none;
}

nav#primary_topmenu ul li{
    border-bottom: 4px solid transparent; /*prevents navigation from moving when applying the bottom border on hover*/    
}
相关问题
最新问题