0

I have three questions in CSS. Being a developer not a pro in design but need to solve this issue. I have a navigation bar which looks something like this:

<nav id="primary">
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a>
          <ul>
            <li><a href="#" class="outer"><span class="arrow">></span>Item1</a></li>
            <li><a href="#" class="outer"><span class="arrow">></span>Item2</a></li>
          </ul>
      </li>
      <li><a href="#">Contact</a></li>
   </ul>
</nav>

My embedded-CSS looks like

#primary ul li ul
{
display: none;
}
#primary li:hover >ul
{
  display: block;
  position: absolute;
  background: #bfe9f7;
  -webkit-border-shadow :0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,.2);
  box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
#primary ul li
{
  display: inline;
}
#primary li:hover
{
  position: relative;
}
#primary li a:hover
{
  background: #8ac142;
}
#primary li:hover ul 
{
  left: 0px;
  top: 30px;
  padding: 3px;
  width: 180px;
}
.arrow
{
  color: #009aca;
}
#primary ul li ul li a.outer 
{
  color: #3d3d3d;
  -webkit-box-shadow: 0px 4px 2px -2px #4cbadd;
  -moz-box-shadow: 0px 4px 2px -2px #4cbadd;
  box-shadow: 0px 4px 2px -2px #4cbadd;
}

Now when I hover over 'About' the drop-down is displayed but, 1. It disappears if I move even a bit, making me unable to click 'Items' 2. The hover state of about gives a background colour green I want to increase the area of hover. 3. I have mentioned #primary li:hover >ul what does the '>' actually does?

dibs_ab
  • 723
  • 2
  • 13
  • 24

1 Answers1

2

  1. Remove the css for top and left for #primary li:hover ul

    #primary li:hover ul 
{
  padding:10px;
  width: 180px;
}

  2. Increase your padding.

    #primary ul li ul li a.outer 
{
   padding:5px;
}​

    Example: http://jsfiddle.net/j2NsZ/3/

3.'>' is a selector for the children elements (more info)

Community
  • 1
  • 1
Justin
  • 26,443
  • 16
  • 111
  • 128
  • When you hover on About, the green block you see, i want it to be bigger the highlight and the Item1 you see, has a bigger area than item 2 in my code. Maybe cause of parent property but I can override it, right? How would I do that? – dibs_ab Oct 18 '12 at 08:59
  • I'm sorry but I don't understand your question. Could you try to ask it another way? – Justin Oct 18 '12 at 09:13
  • in the jsfiddle when you hover on 'About' it gets highlighted with green, i want the highlighted area to be bigger, we can do that right? – dibs_ab Oct 18 '12 at 09:19
  • Yea, you'd want to set the a tag to display block and then add padding to it. http://jsfiddle.net/j2NsZ/6/ – Justin Oct 18 '12 at 09:28