html - Level 2 submenu always visible -
i have spent whole day looking through various examples , still can't figure out way of setting 2 level submenu invisible. got template of net , trying customise it.
here navigation bit css file (i know looks ugly ): )
#navigation { height: 35px; line-height: 35px; float: right; position: relative; z-index: 20; } #navigation ul { list-style: none; list-style-position: outside; font-size: 13px; text-shadow: rgba(255,255,255,0.5) 0px 1px 1px; } #navigation ul li { float: left; position: relative; padding-right: 2px; background: url(images/navigation-border.png) no-repeat right 0; } #navigation ul > li.last { background: transparent; width: auto; float: left; padding-right: 0; } #navigation ul > li.last { border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px 5px 5px 0px; -o-border-radius: 0px 5px 5px 0px; border-right: 1px solid #d7e1e8 !important; } #navigation ul > li.first { border-radius: 5px 0px 0px 5px ; -moz-border-radius: 5px 0px 0px 5px ; -webkit-border-radius: 5px 0px 0px 5px ; -o-border-radius: 5px 0px 0px 5px; border-left: 1px solid #d7e1e8 !important; } #navigation ul li { color: #324957; float: left; padding: 0 18px; border: 1px solid #d7e1e8; border-left: 0; border-right: 0; background: url(images/navigation.png) repeat 0 0; } #navigation ul li a:hover, #navigation ul li.active { background: url(images/navigation-a.png) repeat 0 0; color: #3995d6; text-decoration: none; } #navigation ul li span { background: url(images/navigation-arr.png) no-repeat right 0; width: 10px; height: 6px; float: right; padding-left: 3px; margin-top: 14px; } #navigation ul li ul { display: none; float: none; line-height: 28px; position: absolute; top: 35px; left: 0; width: 100%; background: #e1efff; border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px; -o-border-radius: 0px 0px 5px 5px; } #navigation ul li:hover ul { visibility: visible; } #navigation ul li ul li { display: block; float: none; padding: 0; background: transparent; } #navigation ul li ul li { float: none; display: block !important; padding: 0 18px; } #navigation ul li ul li a:hover { float: none; display: block; background: transparent; background-color: #bdd7f4; } #navigation ul li.last ul li { padding: 0 18px !important; float: none; display: block; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;} #navigation ul li ul li.last { float: none; display: block; } #navigation ul li ul li.last { border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px; -o-border-radius: 0px 0px 5px 5px; } #navigation ul li ul li.first { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;} #navigation ul li.first ul li { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;} and here how trying write sub-menu
<nav id="navigation"> <ul> <li><a href="#">individual patient analysis</a></li> <li> <a href="#">multiple patient analysis<span></span></a> <ul> <li><a href="#">gender</a></li> <li><a href="#">age</a></li> <li><a href="#">field number</a></li> <li><a href="#">occupation</a></li> <li><a href="#">eye<span></span></a> <ul> <li><a href="#">left</a></li> <li><a href="#">right</a></li> </ul> </li> </ul> </li> <li><a href="#">upload file</a></li> </ul> </nav> the problem here level 2 submenu eye visible, without hovering on 'eye' tab , cannot seem fix it. want "left" , "right" submenu appear when 1 hovers on "eye" tab. , problem found in fiddle menu hides on hovering on left or right sub menu. how can fixed ?
any appreciated !
you hiding dropdown menu using display:none , try use visibility:visible on hover of li item doesn't shows dropdown menu @ all.
change
#navigation ul li:hover ul { visibility: visible; } to below display immediate child ul items of parent li item.
#navigation li:hover > ul { display:block; } 
Comments
Post a Comment