Solved

CSS:  menu hover issue

Posted on 2011-02-18
12
1,054 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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 …
Suggested Courses

622 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