w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Highlighting the parent menu list items when hovering over the sub menu items in CSS?

Here is your solution for your query.

CSS3

ul#css3menu1,ul#css3menu1 ul{
   
margin:0;list-style:none;padding:0;background-color:#000;background-image:url("mainbk.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
ul#css3menu1 ul{
    display:none;position:absolute;left:0;top:100%;-moz-box-shadow:0.7px
0.7px 1px #777777;-webkit-box-shadow:0.7px 0.7px 1px
#777777;box-shadow:0.7px 0.7px 1px
#777777;background-color:#333;background-image:none;border-width:1px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border-style:solid;border-color:#5A5E60;padding:0
9px 9px;}
ul#css3menu1 li:hover>*{
    display:block;}
ul#css3menu1 li{
   
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
    z-index:1;}
ul#css3menu1{
   
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:1px
1px 1px 0;
    *display:inline;}
* html ul#css3menu1 li a{
    display:inline-block;}
ul#css3menu1>li{
    margin:0 0 0 1px;}
ul#css3menu1 ul>li{
    margin:1px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    outline-style:none;}
ul#css3menu1 a{
   
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold
12px
Arial;color:#cccccc;cursor:default;padding:10px;background-color:#333;background-image:url("mainbk.png");background-repeat:repeat;background-position:0
200px;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{
    float:none;margin:9px 0 0;}
ul#css3menu1 ul a{
    text-align:left;padding:8px 0 0
0;background-color:#333;background-image:none;border-width:1px 0 0
0;border-style:solid;border-color:#262626;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px
Arial;color:#cccccc;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
   
background-color:#00c4ff;border-style:none;color:#ffffff;background-image:url("mainbk.png");background-position:0
100px;text-decoration:none;}
ul#css3menu1 span{
    display:block;overflow:visible;background-position:right
center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
   
background-color:#333;background-image:none;border-style:solid;border-color:#262626;color:#1F80AE;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
    border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0
4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;text-shadow:#000000
0px -1px 1px;}
ul#css3menu1 li.topfirst:hover>a,ul#css3menu1 li.topfirst a.pressed{
    text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.topmenu>a{
    text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
    text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.toplast>a{
    border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px
0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;text-shadow:#000000
0px -1px 1px;}
ul#css3menu1 li.toplast:hover>a,ul#css3menu1 li.toplast a.pressed{
    text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 _>li>a{
    padding:0;}
ul#css3menu1 li.subfirst>a{
    border-width:0;border-style:none;padding:0;}
ul#css3menu1 li.subfirst:hover>a,ul#css3menu1 li.subfirst a.pressed{
    border-style:none;}

HTML

<ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a href="#"
style="height:15px;line-height:15px;">Item 0</a></li>
    <li class="topmenu"><a href="#"
style="height:15px;line-height:15px;"><span>Item
1</span></a>
    <ul>
        <li class="subfirst"><a href="#">Item 1
0</a></li>
        <li><a href="#">Item 1 1</a></li>
        <li><a href="#">Item 1 2</a></li>
    </ul></li>
    <li class="toplast"><a href="#"
style="height:15px;line-height:15px;">Item 2</a></li>
</ul>

can you try this one.





© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.