Solved

CSS:  menu hover issue

Posted on 2011-02-18
12
1,040 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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 code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

762 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

16 Experts available now in Live!

Get 1:1 Help Now