UtterAccess.com
X   Site Message
(Message will auto close in 2 seconds)

Welcome to UtterAccess! Please ( Login   or   Register )

Custom Search
 
   Reply to this topicStart new topic
> Need Help With A Navagation Bar Menu    
 
   
databaselarry
post May 13 2016, 12:07 PM
Post#1



Posts: 243
Joined: 23-August 12



I am developing an application that will have a navbar for the main menu. I am trying to get the menus and submenus to stay on screen untoil something is clicked with no progess.

This is the test html to get the idea

<body>

<div id="menu">
<ul class "levelone" >
<li class="fly"><a href="#">File</a>
<ul class="dropdown d1">
<li><a href="#">Menu item 1</a>
<ul class="dropdown sub">
<li><a href="#">test1</li>
</ul>
</li>
<li><a href="#">Menu item 2</a> </li>
</ul>
</li>

<li class="fly"><a href="#">Tools</a>
<ul class="dropdown d2">
<li><a href="#">Menu item 3</a> </li>
<li><a href="#">Menu item 4</a> </li>
</ul>
</li>
<br/>
</ul>

</div>
</body>

and the CSS:
<style>
#menu {position:relative; z-index:500;}
#menu ul {padding:0; margin:0; list-style:none; }
#menu ul ul {position:absolute; left:-9999px; width:150px; top:45px;}
#menu ul ul ul {position:absolute; left:-9999px; width:150px; top:-5px;}

#menu ul li {background:#fff; margin-right:5px; float:left;position:relative;}
#menu ul li a {display:block; float:left; text-decoration:none; }

#menu ul ul li {margin:0;}
#menu ul ul li a {width:105px;}

#menu ul li a:active + ul.dropdown {left:0px}
#menu ul li a:focus + ul.d1,
#menu ul li a:focus + ul.d2 {left:0px}
#menu ul li a:focus + ul.sub {left:105px;height:25px;}
#menu ul li ul.dropdown:hover {left:0px}

#menu ul {
font-size: 20px;
}
#menu ul ul {
font-size: 12px;
}

#menu {
background-color: #000;
width: 960px;
vertical-align: top;
height: 50px;
}

#menu ul{
padding: 0;
list-style: none;
margin: 0px;
}

#menu ul li{
width: 100px;
background-color: black;
line-height: 50;
vertical-align: center;
}

#menu ul li {
position: relative;
}

#menu ul li a{
display: block;
color: #FFF;
background: #000;
text-decoration: none;
line-height: 50px;
vertical-align: center;
}

#menu ul li a:hover{
color: #FFF;
background: #333;
}
</style>

My problem is that once the cursor has moved past an option in the submenu the submenus disappear. I need them to stay on screen until something is clicked.

Can someone please point me in the right direction??

Thanks in advance
Go to the top of the page
 
databaselarry
post May 13 2016, 12:15 PM
Post#2



Posts: 243
Joined: 23-August 12



I am using firefox I will try it out in IE
Go to the top of the page
 
databaselarry
post May 13 2016, 12:20 PM
Post#3



Posts: 243
Joined: 23-August 12



Just tried this in IE10 and if you move the mouse off of the submenu click file then menu item 1 then the submenu comes up with a link to test 1 if I move the mouse off of test1 the submenus goaway. If I click on File I get the first submenu and it stays no mater where I move the mose. I want that for the second level menu as well. any ideas????
Go to the top of the page
 


Custom Search
RSSSearch   Top   Lo-Fi    17th December 2017 - 02:43 PM