html - css styling not rendering properly, possible div issue? -
i'm trying make horizontal menu layout in css. using guide listed here: http://www.devinrolsen.com/pure-css-horizontal-menu/
i've got css file looking this, called navigation.css:
.navigation{ width:100%; height:30px; background-color:lightgray; } .navigation ul { margin:0px; padding:0px; } .navigation ul li { display:inline; height:30px; float:left; list-style:none; margin-left:15px; } .navigation li { color:black; text-decoration:none; } .navigation li a:hover { color:black; text-decoration:underline; } .navigation li ul { margin:0px; padding:0px; display:none; } .navigation li:hover ul { display:block; width:160px; } .navigation li li{ list-style:none; display:block; }
and in actual php page, have this
<div class="navigation"> <ul> <li> <a href="#">something</a> <ul> <li><a href="./hello.php">hello</a></li> <li><a href="./hello2.php">hello2</a></li> </ul> </li> <li> <a href="#">browse database</a> <ul> <li><a href="./test.php">test</a></li> <li><a href="./test2.php">test2</a></li> <li><a href="./search.php">search</a></li> </ul> </li> </ul> </div>
for reasons cannot determine, no drop-down menu effect. consequently, if change navigation id instead of class replacing .navigation #navigation, none of layout affects html.
in case you're still having problem, have tried changing:
.navigation li li{ list-style:none; display:block; }
to:
.navigation li li{ list-style:none; display:none; } .navigation li:hover li{ display:block; }
Comments
Post a Comment