[RESOLVED]I am having problems with a dropdown menu using CSS

I have created a parent child dropdown menu and am having problems with two items. First, I only want the child dropdown nodes to appear when the cursor is on the parent menu node. What is happening now is the dropdown appears anytime I cursor over the containing
parent menu item DIV. Second I am having trouble moving the child menu nodes vertically. I am changing the style values and nothing I have tried allows me to align the child nodes precisely vertically to their parent.   The html and CSS is below:

HTML:

<div id="nav1">
      <ul>
            <li class="first active">
               <a id="first" href="#">Home</a>
                   <div id="verticalmenu">
                       <ul>
                          <li>
                              <a id="sub" href="#">Child 1</a>
                        </li>
                        <li>
                           <a id="sub" href="#">Child 2</a>
                      </li>      
                  </ul>
            </div>
       </li>
   </ul>

 </div>

CSS:

#nav1 a:hover {  text-decoration: none; }

#nav1 {  position: absolute;  right: 435px;  height: 53px;  line-height: 38px;  top: 81px; }

 #nav1 a {  text-decoration: none;  text-transform: lowercase;  color: #f4eeea;  text-shadow: 0 1px 1px #32251B;  font-size: 1.2em; }

#nav1 ul {  list-style: none; }

 #nav1 ul li {  float: left; }

#verticalmenu{ width: 55%; height: 30px; line-height: 2; display: block; border: 1mm solid transparent; }

#verticalmenu #sub { color: transparent; }

#hover-content {     display:none; } #nav1:hover #sub {     color: white; }

Got it by using a little JavaScript:

 

var ShowMenuFlag = false;

function showmenu() {
var menu = document.getElementsByTagName('a'); for (var x = 0; x < menu.length; x++) { if (menu[x].id == "sub" || menu[x].id == "sub2") { if (ShowMenuFlag == false) {
menu[x].style.color = 'white'; menu[x].style.color = 'white'; }
else {
menu[x].style.color = 'transparent'; menu[x].style.color = 'transparent'; } } } if (ShowMenuFlag == false) { ShowMenuFlag = true; } else { ShowMenuFlag = false; } };

          

           

Hi holdorfs,

holdorfs

Got it by using a little JavaScript:

 

var ShowMenuFlag = false;

function showmenu() {

  var menu = document.getElementsByTagName('a');

   for (var x = 0; x < menu.length; x++) {
        if (menu[x].id == "sub" || menu[x].id == "sub2") {
            if (ShowMenuFlag == false) {
               menu[x].style.color = 'white';
               menu[x].style.color = 'white';
             }
             else {
               menu[x].style.color = 'transparent';
               menu[x].style.color = 'transparent';
             }
        }
   }

   if (ShowMenuFlag == false) {
       ShowMenuFlag = true;
   }
   else {
       ShowMenuFlag = false;
   }
};

According to your code, I’d like to know when do you call showmenu()  function?

Thanks.

Best Regards,

Sw-ing

Leave a Reply