Solved

CSS:  menu hover issue

Posted on 2011-02-18
12
1,045 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
  • 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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 500 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

813 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now