harrypotter30022003
New Member
Im trying to create a nav menu, by using an unordered list, and having it then display horizontally. Each li has a div tag in it, with more divs in it, for more styling, however, the list seems to be dropping down, though not displaying anything. Here's the JSFiddle for it: http://jsfiddle.net/E8jqN/2/also, the html for it is:\[code\]<div id="header-right"> <ul id="navigation"> <li> <div class="nav-button"> <div id="schools"> </div> </div> <div class="nav-text"> Schools </div> </li> <li> <div class="nav-button"> <div id="professors"> </div> </div> <div class="nav-text"> Professors </div> </li> <li> <div class="nav-button"> <div class="Programs"> </div> </div> <div class="nav-text"> Programs </div> </li> <li> <div class="nav-button"> <div class="account"> </div> </div> <div class="nav-text"> My Account </div> </li> </ul></div>\[/code\]and the css is:\[code\]#header-right{ float: right; width: 366px; height: 64px; background-image:url('http://localhost/gradebyme/gradebyme/public/img/midtile2.png'); background-repeat:repeat-x;}#navigation{/* position: relative; background: url('http://localhost/gradebyme/gradebyme/public/img/icontest.png');*/ margin: 0; padding: 0; list-style: none;}#navigation li{ width: 88px; height: 64px; display: inline;}.nav-button{ width: 88px; height: 40px;}.nav-text{ width: 88px; height: 24px; color:blue;}#schools{ float: left; width: 37px; height: 26.75px;/* background-position: 0 0;*/}#professors{ float: left; width: 37px; height: 26.75px;/* background-position: 0 -27px;*/}#programs{ float: left; width: 37px; height: 26.75px; background-color: green;/* background-position: 0 -55px;*/}#account{ float: left; width: 37px; height: 26.75px; background-color: purple;/* background-position: 0 -83px;*/}\[/code\]I need it to display them all horizontally, then I can work on adding the icons. Any help is appreciated! Also general css tips are also appreciated, Im pretty new to it.