Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS:  menu hover issue

Posted on 2011-02-18
12
Medium Priority
?
1,055 Views
Last Modified: 2012-05-11
Hi All,

I'm trying to setup a menu using CSS, but am having issue getting the white top level hover background to stay displayed when I navigate to the second level.

i.e.
When i hover the menu the top goes white, but when i look at the child element is turns blue again.  How do i get it to stay white?


https://www.118business.com/admin/menubuilder/EE.php
0
Comment
Question by:detox1978
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
12 Comments
 
LVL 4

Expert Comment

by:LAMASE
ID: 34930895
Try putting the second level INSIDE the first one.
0
 
LVL 2

Author Comment

by:detox1978
ID: 34930911
I dont follow, could you give me an example?
0
 
LVL 4

Expert Comment

by:LAMASE
ID: 34930946
<div id="mainlevel">
   ....first level stuff...
   <div id="second level">
       ...second level stuff...
   </div>
</div>

the second level should be position:absolute; and probably start with display: none;

When you roll on the first visible level, the second will appear (according to the actual behaviour). The white should persist because you are "inside" the first level even when you move to the secon one
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 4

Expert Comment

by:LAMASE
ID: 34930957
PS: the mainlevel and second level are single buttons and single sub-menus:
<div id="MENU">

<div id="A1">
   ....first level stuff...
   <div id="A2">
       ...second level stuff...
   </div>
</div>

<div id="B1">
   ....first level stuff...
   <div id="B2">
       ...second level stuff...
   </div>
</div>

...

</div> <!-- end menu -->
0
 
LVL 2

Author Comment

by:detox1978
ID: 34930981
I'm using unordered lists, so i'm not sure how that would work?


I tried moving the level1 </div> tage to encompass the level two, but it didn't work.
0
 
LVL 2

Author Comment

by:detox1978
ID: 34930983
Typo, *tag not tag
0
 
LVL 4

Expert Comment

by:LAMASE
ID: 34931016
No matter if you are using div, ul or other. The important thing is that you look the mouseover (or css :hover) of the main level

pure CSS example

styles:
.level1 {}
.level2 { position: absolute; display: none; }
.level1:hover .level2 {display: block;}


html:
<div class="level1">
  I am the first level
  <ul class="level2">
    <li>I am in the second level</li>
    <li>me too</li>
  </ul>
</div>

<div class="level1">
  I am another first level
  <ul class="level2">
    <li>I am in the second level</li>
    <li>me too</li>
  </ul>
</div>
0
 
LVL 2

Author Comment

by:detox1978
ID: 34931047
In you example you can't hover over the second level;

https://www.118business.com/admin/menubuilder/EE2.php
0
 
LVL 2

Author Comment

by:detox1978
ID: 34931166
Ok I've had a go at using nested DIV's

https://www.118business.com/admin/menubuilder/EE3.php


How do i get the level2 and level3 to display in the same positions as they do here;

https://www.118business.com/admin/menubuilder/EE.php
0
 
LVL 2

Author Comment

by:detox1978
ID: 34931172
The issue being level3 is below level2, i want them both to be at the top in a line
0
 
LVL 4

Accepted Solution

by:
LAMASE earned 2000 total points
ID: 34932021
When you position div with "absolute" you are telling the browser to detach in the position they are.
Because they are block elements, they go in a new line, so you can change css and use margins:

.third {
position: absolute;
margin-top: -20px; /* to go up one line */
margin-left: 80px; /* to place the third level on the right of the second one */
}

Open in new window



IN HTML

<div class="first">
  ...i am first level...
  <div class="second">
    ...i am the second one...
     <div class="third">
        ...here we are...
     </div>
  </div>
</div>

0
 
LVL 2

Author Closing Comment

by:detox1978
ID: 34932813
Thanks
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question