Home/ Questions/Q 8443395
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T09:07:38+00:00

This is my css rules <style type=text/css> #navigation2 { font: 0.80em Arial, Helvetica, sans-serif;

  • 0

This is my css rules

<style type="text/css">
#navigation2 {

    font: 0.80em Arial, Helvetica, sans-serif;
    width:100%;
}

#navigation2 ul {
    margin:0; 
    padding:0;
    background-color:transparent;
}

#navigation2 li {
    list-style: none;
    background:#fff;
}

ul.top-category{
    display:none;   
}

ul.top-category li {
    border: #6092bc solid;
    border-width: 1px;
    margin-top:1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#navigation2 a {
 color: #265d8c;
 cursor: pointer;
 display:block;                 
 text-decoration:none;
 margin-left:3%;
 margin-top:5%;
 margin-bottom:5%;
 width:100%;
}

#navigation2 li:hover {
 background: #ebf2f6;
 position: relative;
}

a.all-categories:hover ul.top-category{
     display:block;
}
</style>

and this is my html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <a  href="#" class="all-categories" >  All Categories </a> 

                    <div id="navigation2">

                       <ul class="top-category">
                          <li><a href="#">Kategori1</a></li>
                          <li><a href="#">Kategori2</a></li>
                          <li><a href="#">Kategori3</a></li>
                          <li><a href="#">Kategori4</a></li>
                          <li><a href="#">Kategori5</a></li>
                       </ul>
                    </div> 
</body>
</html>

I have a css menu which runs perfectly when display:block. I want the menu opens when mouse over the link but I can not give any reaction.Can you explain what I am missing.Thanks for advices..

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this http://jsfiddle.net/yf4W8/4/

    Your problem lies with this line

    a.all-categories:hover ul.top-category{
     display:block;
}

    This would imply that the UL is a child of your link element, which isn’t the case

    a.all-categories:hover + #navigation2 ul.top-category{
     display:block;
}

    The + is used to select #navigation2, which is a sibling of your link, and then we select the ul since it’s a child of #navigation2. If you want to read further on CSS selectors, you might want to take a look at this list.

    By changing your code to match the above you will select the sub menus parent container and apply the hover style correctly

    • 0