Building a menu using css html

Question

I need my menu to change color when hovering my mouse over each top menu. The problem is the background color for both Test1 and Sub test1 changes as I hover my mouse. Is there any way to not change the background color of Sub test1 until I hover the mouse over it? See the code at http://jsfiddle.net/r5YCU/22/

Any help will be appreciated. Thanks.

 <div id="navbar">
<ul>      
   <li class="navbutton"><span><a id="button-1" 
       href="">Shop</a></span>
   </li>
   <li class="navbutton"> <span><a href="#">Test1</a></span>
            <ul>
                <li><br/><span><a href="#">Sub test1</a>
                    </span>
                </li>
            </ul>
   </li>
   <li class="navbutton"><span><a id="button-3" 
       href="#">Test2</a>  
       </span>
   </li>
   <li class="navbutton"><span><a id="button-4" 
       href="#">Test3</a></span>
   </li>
   <li class="navbutton"><span><a id="button-5" 
       href="#">Test4</a></span>
   </li>

How come you're using jQuery to trigger hover states? You can just use CSS — Andy Holmes
– Andy Holmes, Commented Mar 17, 2014 at 15:26
The problem is the CSS background color is applied to the class navbutton. You need to use a pseudo selector or something to apply the style only to navbutton and none of its children. — TylerH
– TylerH, Commented Mar 17, 2014 at 16:05

Roberto · Accepted Answer · 2014-03-17 17:13:42Z

3

I'd play with css :hover pseudoclass instead javascript events, something like:

li.navbutton:hover {
    background-color:#345808 !important;
}
li.navbutton:hover li {
    background-color: #5c8727!important;
}
li.navbutton li:hover {
    background-color: #345808!important;
}

The complete code is: http://jsfiddle.net/r5YCU/31/

I've adapted the layout a bit to look as similar as possible to the original menu, but only with css code.

edited Mar 17, 2014 at 17:13

answered Mar 17, 2014 at 15:36

Roberto

9,2004 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Tumen_t Over a year ago

But it still does not accomplish what I initially asked. It is good to know I could do the hover states with CSS though.

Roberto Over a year ago

@Tumen_t, Why not ? The children options appear with the light green color, don't they ?

Tumen_t Over a year ago

No, it does not look quiet right. I want it to behave like the other menus. Changing the color as I hover over it.

Roberto Over a year ago

Ok, but I think that the problem is not the background color, which It changes if you hover the mouse over them, but as I said in my answer, the layout needs some changes to remove the parent margins. It works in my browsers, what browser/version are you using ?

Roberto Over a year ago

@Tumen_t, I've updated the code (jsfiddle.net/r5YCU/31) in order to fix the layout issues, I've tested it in Chrome and Firefox (latests versions) and looks Ok for me, please, let me know if now It works as expected.

|

Hanzallah Afgan · Accepted Answer · 2014-03-18 04:07:50Z

These things are related to style and should be done in css...

CSS

.ul{
    list-style: none;
}
#navbar a{
    text-decoration: none;
}
#main-ul{
    background: yellow;
}
.navmenu{
    float: left;
    background: deeppink;
    width: 60px;
    height: 25px;
    margin-right: 3px;
    text-align: center;
    line-height: 25px;
    box-shadow: 0 0 2px 3px black;
}
.navmenu:hover{
    outline: 1px solid white;
    margin-top: 1px;
}
.navmenu:hover > #sub-ul{
    display: block;
    width: 100px;
    background: red;


}
#sub-ul{
    margin: 0;
    padding: 0;
    display: none;
}
.submenu{
    margin: 0;
    padding: 0;
    margin-bottom: 2px;
    background: black;
    color: white;
}
.submenu:hover{
    cursor: pointer;
    color: black;
    background: #585858;
}

HTML

 <div id="navbar">
      <ul class="ul" id="main-ul">      
         <li class="navmenu"><a href="#">Test1</a></li>
         <li class="navmenu"><a href="#">Test2</a>
              <ul class="ul" id="sub-ul">
                <li class="submenu">Test 1</li>
                <li class="submenu">Test 2</li>
                <li class="submenu">Test 3</li>
                <li class="submenu">Test 4</li>
                <li class="submenu">Test 5</li>
                <li class="submenu">Test 6</li>
                <li class="submenu">Test 7</li>
                <li class="submenu">Test 8</li>
              </ul>
         </li>
         <li class="navmenu"><a href="#">Test3</a></li>
         <li class="navmenu"><a href="#">Test4</a></li>
         <li class="navmenu"><a href="#">Test5</a></li>
         <li class="navmenu"><a href="#">Test6</a></li>
         <li class="navmenu"><a href="#">Test7</a></li>
      </ul>
  </div>

Collectives™ on Stack Overflow

Building a menu using css html

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related