Fri, 2009-03-06 01:06
Hello, the code below shows a 2 level horizontal menu (text only) that functions well except that the submenus disappear when the parent page is active. My challenge - which has eluded me - is to force the submenus to be visible and selectable when the parent page is active. Thanks for your feedback.
Untitled Document
CSS Dropdown Menu
/*START OF TOP DROP DOWN navigation MENU*/
* {
margin:0;
padding:0;
}
body {
font-size:100%;
}
.wrapper {
height:1.4em;
width:100%;
border-bottom:1.4em white;
}
/*########################
START First Level of Menu
*/
#nav {
margin:0 auto;
text-align:left;
list-style: none;
width:auto;
font-size: 0.8em;
font-family:Arial, Helvetica, sans-serif;
}
#nav li {
float: left;
background-color: transparent;
padding: 0px 5px 0px 5px;
width:auto;
border-right-style: solid;
border-right-color: #365794;
border-right-width: 1px;
}
#nav li:hover, #nav li.sfhover, #navsmall li:hover {
color:#000;
}
#nav a {
color:#FFFFFF;
display: block;
text-align:left;
text-decoration: none;
padding: 0.2em 0;
}
#nav a:focus,#nav a:hover,#nav a:active {
width:auto;
color:#929871;
}
/*
END First Level of Menu
#######################*/
/*########################
START Second Level of Menu
*/
#nav ul{
list-style: none;
position: absolute;
left: -999em;
}
#nav li:hover ul {
position: absolute;
left:0;
top:auto;
margin-left:50px;
}
#nav ul li {
background: white;
}
#nav li li {
float:left;
width:auto;
border-right-color: #2D487B;
border-right-style: solid;
border-right-width: 1px;
}
#nav li ul li a {
color:#20345A;
text-align:center;
text-decoration:none;
padding: 0.2em 0;
}
#nav li li:hover {
border:0;
border-right-style: solid;
border-right-color: #2D487B;
border-right-width: 1px;
}
#nav li ul a:hover{
text-decoration:underline;
color:#000;
}
.twoline, .twoline a {
width:300px !important;
}
.first {
background:transparent !important;
}
.last {
background:transparent !important;
}
/*END OF TOP DROP DOWN navigation MENU*/
Fri, 2009-03-06 08:55
#1
ummm...ok...i'v done this
ummm...ok...i'v done this before...what you could do for starters is simply wrap your child
- tags within a
- tag! Thats what i would do...then the
- that contains the child menus you would give a class right. This class would have a simple piece of css that would keep showing the
so basically:
CSS:
ul#nav li.keepOpen { display:block; }
HTML:
div class="wrapper"> <ul id="nav"> <li class="first"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li class="keepOpen"> <!-- Add this --> <ul> <li><a href="#">Item 1.1</a></li> <li><a href="#">Item 1.2</a></li> <li><a href="#">Item 1.3</a></li> <li><a href="#">Item 1.4</a></li> <li><a href="#">Item 1.5</a></li> </ul> </li> <!-- Add this --> <li><a href="#">Products</a></li> <!-- You missing the closing </li> tag by the way!! <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/wink.png" title="Wink" alt="Wink" class="smiley-content" /> --> ...etc
Hope that helps you out alittle....?!
Wed, 2009-03-11 15:43
#2
2 level horizontal bar menu
Thanks Peter Pan.... you pointed me in the right direction. I was able to get the submenu to display; the formatting, though, was lost - so I need to keep working on this to get it right.
Sun, 2009-06-21 18:04
#3
total correct code
please give the total correct code.,.,.,,.i cant make the correct changes.,.,.,.,pls reply asap.,.,.,.,
Sun, 2009-06-21 19:49
#4
PeterPan he is nesting the
PeterPan he is nesting the submenus within li's just in a different way to the norm, and to the best way.
Jumpringer, I think the problem is, when you are accessing the internal elements of your submenus make sure you put the full path i.e
#nav li li:hover {
border:0;
border-right-style: solid;
border-right-color: #2D487B;
border-right-width: 1px;
}
Should be
#nav li ul li:hover {
border:0;
border-right-style: solid;
border-right-color: #2D487B;
border-right-width: 1px;
}
And also,
the better way is:
/*firstLevel*/ #mynav ul li /*secondLevel*/ #mynav ul li ul { visibility:hidden } #mynav ul li:hover ul { visibility:visible } /*ThirdLevel*/ #mynav ul li ul li ul, #mynav ul li:hover ul li ul { visibility:hidden } #mynav ul li ul li:hover ul, #mynav ul li:hover ul li:hover { visibility:visible; }
Note: there is a lot more styling needed to make that work properly, like setting marging and padding to zero, and also use float:left on the top level ul li to make it horizontal, not display:inline.
you don't need any absolute positioning at all. Absolute positioning should be avoided wherever possible because it is prone to catastrophe in different sized screens.