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
Solved

CSS:  menu hover issue

Posted on 2011-02-18
12
1,046 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
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

Title # Comments Views Activity
push Book Today button to right 10 37
jQuery slideToggle one div at a time instead of all independently 33 76
Word, Excel, Access icons 4 17
CSS Style 8 20
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

829 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