不需要Css悬停效果对子菜单项

时间：2015-08-10 13:54:59

标签： html css3

我希望仅在主菜单项上悬停功能：FIRMS，项目和联系

目前，当我将鼠标悬停在身体​​的其余部分时，会显示主菜单项。 我只想在鼠标悬停在Firms，Projects和Contact上时才想要悬停效果。

请参阅下面的代码。我不希望在子菜单类项目上悬停效果。需要进行哪些修改？

＆＃13;
＆＃13; 
.sub-menu{
   
}
/* Layout */

a {
	-moz-transition:color 0.3s ease-out;
	-webkit-transition:color 0.3s ease-out;
	-o-transition:color 0.3s ease-out;
	transition:color 0.3s ease-out;
}


/* HEADER MENU */

#topmenu {
	margin:0 auto;
	padding:0 15px;
	position:relative;
	width:80%;
    float:right;
    height: auto;
    top: 20px;
    /* old previos top:100px;*/
}
#topmenu ul {
	margin:0;
	padding:0;
}
#topmenu ul li {
	float:left;
	position:relative;
	font-size:10px;
	list-style:none;
	margin:0;
	padding:0;
	width:auto;
	text-align:center;
	text-transform:uppercase;
	
}
#topmenu ul li:first-child {
	
}
#topmenu ul li a {
 margin-right: 60px;
	text-decoration:none;
	display:block;
}
#topmenu ul li a:hover {
	color:#999;
}
#topmenu ul li:hover > a {
	color:#999;
}



#topmenu ul li ul.sub-menu {
    height: 100px;
	float:left;
    height:auto;
	list-style:none;
    z-index: 999;
    background-color: white;
	position:absolute;
	left:0px;
	    width: 200px;
	opacity:0;
	visibility:visible;
	-moz-transition:opacity 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
	-webkit-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
	-o-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
	transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
}
#topmenu ul li ul.sub-menu li {
	border:none;
	border-bottom:1px solid #ccc;
	clear:both;
	margin-top:10px;
	padding:0;
    width: 100%;
	-moz-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
	-webkit-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
	-o-transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
	transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
}

#topmenu ul li ul.sub-menu li a {

    font-size: 14px;
    line-height: 35px;
    margin-right: 0px; 
}
#topmenu #topnav li:hover ul.sub-menu {
	opacity:1;
	visibility:visible;
}
#topmenu #topnav li:hover ul.sub-menu li {
	margin-top:0;
	opacity:1;
    
}
#topmenu #topnav li:hover ul.sub-menu li a {
	color:black;
	-moz-transition:color 0.1s ease-out;
	-webkit-transition:color 0.1s ease-out;
	-o-transition:color 0.1s ease-out;
	transition:color 0.1s ease-out;
}
#topmenu #topnav li:hover ul.sub-menu li a:hover {
	
	-moz-transition:color 0.3s ease-out;
	-webkit-transition:color 0.3s ease-out;
	-o-transition:color 0.3s ease-out;
	transition:color 0.3s ease-out;
}
#topmenu #topnav li:hover ul.sub-menu li:hover {
	

}
#topmenu #topnav li:hover ul.sub-menu li:hover > a {
	color:#999;
}

@media screen and (max-width: 480px) {
    #topmenu ul li .sub-menu li
    {
            line-height: 35px;
    margin-left: -20px;
    border-bottom: 1px solid gray;
    width: 230px;
    }
      #topmenu ul li .sub-menu li a
    {
    width: 100%;
    line-height: 25px;
    float: left;
    }
     #topmenu ul li a{
        line-height: 0px;
     }
        
#topmenu ul {
overflow: hidden;
    height: 250px;
    position : inherit;
    margin-top: 20px;
    }
    #topmenu ul li 
    {
        text-align:left;
        width:100%;
        float:left;
    }
 #topmenu ul li a{
            width: 100%;
            float:left
            
    }
    
    .header-wrapper .menu-nav {
    float: left;
    
    }
    .menu-mymenu-container
    {
        margin: 0 !important;
    }
}
＆＃13; 
<div id="topmenu" class="collapse navbar-collapse">
		<div class="menu-mymenu-container">
            <ul class="menu-nav nav navbar-nav" id="topnav" style="display: block;">
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-17 first-child" id="menu-item-17"><a href="http://localhost/architect/firm/">FIRM</a>
                    <ul class="sub-menu">
	                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-118 first-child" id="menu-item-118"><a href="http://localhost/architect/firm/profilemm/">Profile</a></li>
	                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-117" id="menu-item-117"><a href="http://localhost/architect/philosophy/">Philosophy</a></li>
	                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116" id="menu-item-116"><a href="http://localhost/architect/structure/">Structure</a></li>
	                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115" id="menu-item-115"><a href="http://localhost/architect/services-sectors/">SERVICES + SECTORS</a></li>
	                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114" id="menu-item-114"><a href="http://localhost/architect/sustainability/">Sustainability</a></li>
	                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113 last-child" id="menu-item-113"><a href="http://localhost/architect/client-list/">Client List</a></li>
                    </ul>
                    </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-18" id="menu-item-18"><a href="http://localhost/architect/projects/">PROJECTS</a>
                <ul class="sub-menu">
	                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-142 first-child" id="menu-item-142"><a href="http://localhost/architect/key-projects/">Key Projects</a></li>
	                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-143" id="menu-item-143"><a href="http://localhost/architect/residential/">Residential</a></li>
	                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-140" id="menu-item-140"><a href="http://localhost/architect/commercial/">Commercial</a></li>
	                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-139" id="menu-item-139"><a href="http://localhost/architect/mixed-use/">Mixed Use</a></li>
	                <li class="menu-item menu-item-type-post_type <menu-item>    </menu-item>-object-page menu-item-138" id="menu-item-138"><a href="http://localhost/architect/education/">Education</a></li>
	                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-137" id="menu-item-137"><a href="http://localhost/architect/hospitality/">Hospitality</a></li>
	                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-136" id="menu-item-136"><a href="http://localhost/architect/retail/">Retail</a></li>
	                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-135" id="menu-item-135"><a href="http://localhost/architect/masterplanning/">Masterplanning</a></li>
                	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-141 last-child" id="menu-item-141"><a href="http://localhost/architect/projects/past-highlights/">Past Highlights</a></li>
            </ul>
            </li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-19 last-child" id="menu-item-19"><a href="http://localhost/architect/contact/">CONTACT</a>
            <ul class="sub-menu">
	                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-133 first-child" id="menu-item-133"><a href="http://localhost/architect/general-information/">General Information</a></li>
	                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-134 last-child" id="menu-item-134"><a href="http://localhost/architect/careers/">Careers</a></li>
            </ul>
            </li>
        </ul>
    </div>                
</div>
＆＃13;
＆＃13;
＆＃13;

http://jsfiddle.net/JeZap/380/

3 个答案:

答案 0 :(得分：2)

http://jsfiddle.net/JeZap/381/

当你有#top-menu ul li:hover之类的内容时，您将获得ul li下的所有#top-menu元素。

使用#top-menu > ul > li:hover将确保只有它的直接后代才会受到规则的影响。

答案 1 :(得分：2)

将此css添加到您的示例中：

.sub-menu
{
    display:none;
}

并替换以下css 

#topmenu #topnav li:hover ul.sub-menu {
    opacity:1;
    visibility:visible;
}

这一个

#topmenu #topnav li:hover ul.sub-menu {
    opacity:1;
    visibility:visible;
    display:block;
}

答案 2 :(得分：2)

尝试这个小提琴链接并更新你的代码。

jsfiddle.net/JeZap/385 / 

.sub-menu{
   
}
/* Layout */

a {
	-moz-transition:color 0.3s ease-out;
	-webkit-transition:color 0.3s ease-out;
	-o-transition:color 0.3s ease-out;
	transition:color 0.3s ease-out;
}


/* HEADER MENU */

#topmenu {
	margin:0 auto;
	padding:0 15px;
	position:relative;
	width:80%;
    float:right;
    height: auto;
    top: 20px;
    /* old previos top:100px;*/
}
#topmenu ul {
	margin:0;
	padding:0;
}
#topmenu ul li {
	float:left;
	position:relative;
	font-size:10px;
	list-style:none;
	margin:0;
	padding:0;
	width:auto;
	text-align:center;
	text-transform:uppercase;
	
}
#topmenu ul li:first-child {
	
}
#topmenu ul li a {
 margin-right: 60px;
	text-decoration:none;
	display:block;
}


#topmenu > ul > li:hover > a {
	color:#999;
}



#topmenu ul li ul.sub-menu {
    height: 100px;
	float:left;
    height:auto;
	list-style:none;
    z-index: 999;
    background-color: white;
	position:absolute;
	left:0px;
	    width: 200px;
	opacity:0;
	visibility:hidden;
	-moz-transition:opacity 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
	-webkit-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
	-o-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
	transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
}
#topmenu ul li ul.sub-menu li {
	border:none;
	border-bottom:1px solid #ccc;
	clear:both;
	margin-top:10px;
	padding:0;
    width: 100%;
	-moz-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
	-webkit-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
	-o-transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
	transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
}

#topmenu ul li ul.sub-menu li a {

    font-size: 14px;
    line-height: 35px;
    margin-right: 0px; 
}
#topmenu #topnav li:hover ul.sub-menu {
	opacity:1;
	visibility:visible;
  
}
#topmenu #topnav li:hover ul.sub-menu li {
	margin-top:0;
	opacity:1;
    
}
#topmenu #topnav li:hover ul.sub-menu li a {
	color:black;
	-moz-transition:color 0.1s ease-out;
	-webkit-transition:color 0.1s ease-out;
	-o-transition:color 0.1s ease-out;
	transition:color 0.1s ease-out;
}
#topmenu #topnav li:hover ul.sub-menu li a:hover {
	
	-moz-transition:color 0.3s ease-out;
	-webkit-transition:color 0.3s ease-out;
	-o-transition:color 0.3s ease-out;
	transition:color 0.3s ease-out;
}

#topmenu #topnav > li:hover > a {
	color:#999;
}

@media screen and (max-width: 480px) {
    #topmenu ul li .sub-menu li
    {
            line-height: 35px;
    margin-left: -20px;
    border-bottom: 1px solid gray;
    width: 230px;
    }
      #topmenu ul li .sub-menu li a
    {
    width: 100%;
    line-height: 25px;
    float: left;
    }
     #topmenu ul li a{
        line-height: 0px;
     }
        
#topmenu ul {
overflow: hidden;
    height: 250px;
    position : inherit;
    margin-top: 20px;
    }
    #topmenu ul li 
    {
        text-align:left;
        width:100%;
        float:left;
    }
 #topmenu ul li a{
            width: 100%;
            float:left
            
    }
    
    .header-wrapper .menu-nav {
    float: left;
    
    }
    .menu-mymenu-container
    {
        margin: 0 !important;
    }
}
<div id="topmenu" class="collapse navbar-collapse">
		<div class="menu-mymenu-container">
            <ul class="menu-nav nav navbar-nav" id="topnav" style="display: block;">
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-17 first-child" id="menu-item-17"><a href="http://localhost/architect/firm/">FIRM</a>
                    <ul class="sub-menu">
	                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-118 first-child" id="menu-item-118"><a href="http://localhost/architect/firm/profilemm/">Profile</a></li>
	                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-117" id="menu-item-117"><a href="http://localhost/architect/philosophy/">Philosophy</a></li>
	                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116" id="menu-item-116"><a href="http://localhost/architect/structure/">Structure</a></li>
	                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115" id="menu-item-115"><a href="http://localhost/architect/services-sectors/">SERVICES + SECTORS</a></li>
	                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114" id="menu-item-114"><a href="http://localhost/architect/sustainability/">Sustainability</a></li>
	                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113 last-child" id="menu-item-113"><a href="http://localhost/architect/client-list/">Client List</a></li>
                    </ul>
                    </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-18" id="menu-item-18"><a href="http://localhost/architect/projects/">PROJECTS</a>
                <ul class="sub-menu">
	                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-142 first-child" id="menu-item-142"><a href="http://localhost/architect/key-projects/">Key Projects</a></li>
	                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-143" id="menu-item-143"><a href="http://localhost/architect/residential/">Residential</a></li>
	                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-140" id="menu-item-140"><a href="http://localhost/architect/commercial/">Commercial</a></li>
	                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-139" id="menu-item-139"><a href="http://localhost/architect/mixed-use/">Mixed Use</a></li>
	                <li class="menu-item menu-item-type-post_type <menu-item>    </menu-item>-object-page menu-item-138" id="menu-item-138"><a href="http://localhost/architect/education/">Education</a></li>
	                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-137" id="menu-item-137"><a href="http://localhost/architect/hospitality/">Hospitality</a></li>
	                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-136" id="menu-item-136"><a href="http://localhost/architect/retail/">Retail</a></li>
	                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-135" id="menu-item-135"><a href="http://localhost/architect/masterplanning/">Masterplanning</a></li>
                	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-141 last-child" id="menu-item-141"><a href="http://localhost/architect/projects/past-highlights/">Past Highlights</a></li>
            </ul>
            </li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-19 last-child" id="menu-item-19"><a href="http://localhost/architect/contact/">CONTACT</a>
            <ul class="sub-menu">
	                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-133 first-child" id="menu-item-133"><a href="http://localhost/architect/general-information/">General Information</a></li>
	                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-134 last-child" id="menu-item-134"><a href="http://localhost/architect/careers/">Careers</a></li>
            </ul>
            </li>
        </ul>
    </div>                
</div>

相关问题
最新问题