I created a horizontal navigation (menu) bar for my site. When I re-size my window to a size smaller than that of the bar, the menu items get wrapped. I want the menu to remain intact (that is, it should remain horizontal) irrespective of the size of window as it usually can be seen in sites such as Google. I tried various ways posted on various forums including this one but nothing worked for me. Below I have pasted my CSS code for the menu.\[code\]CSS CODE:#cssmenu ul { margin: 0; padding: 0;}#cssmenu li { margin: 0; padding: 0;}#cssmenu a { margin: 0; padding: 0;}#cssmenu ul {list-style: none;}#cssmenu a {text-decoration: none;}#cssmenu {height: 70px; background-color: #6699CC; box-shadow: 0px 2px 3px rgba(0,0,0,.4); }#cssmenu > ul > li { float: left; margin-left: 30px; position: relative;}#cssmenu > ul > li > a { color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; line-height: 70px; padding: 15px 20px;-webkit-transition: color .15s; -moz-transition: color .15s; -o-transition: color .15s; transition: color .15s;}#cssmenu > ul > li > a:hover {color: #00FF00; }body.home li.home, body.tech li.tech {font-weight:bold; }#cssmenu > ul > li > ul { opacity: 0; visibility: hidden; padding: 16px 0 20px 0; background-color: #FFFFFF; text-align: left; position: absolute; top: 55px; left: 50%; margin-left: -90px; width: 180px;-webkit-transition: all .3s .1s; -moz-transition: all .3s .1s; -o-transition: all .3s .1s; transition: all .3s .1s;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); box-shadow: 0px 1px 3px rgba(0,0,0,.4);}#cssmenu > ul > li:hover > ul { opacity: 1; top: 65px; visibility: visible;}#cssmenu > ul > li > ul:before{ content: ''; display: block; border-color: transparent transparent rgb(250,250,250) transparent; border-style: solid; border-width: 10px; position: absolute; top: -20px; left: 50%; margin-left: -10px;}#cssmenu > ul ul > li { position: relative;}#cssmenu ul ul a{ color: rgb(50,50,50); font-family: Verdana, 'Lucida Grande'; font-size: 13px; background-color: rgb(250,250,250); padding: 5px 8px 7px 16px; display: block;-webkit-transition: background-color .1s; -moz-transition: background-color .1s; -o-transition: background-color .1s; transition: background-color .1s;}#cssmenu ul ul a:hover {background-color: rgb(240,240,240);}#cssmenu ul ul ul { visibility: hidden; opacity: 0; position: absolute; top: -16px; left: 206px; padding: 16px 0 20px 0; background-color: rgb(250,250,250); text-align: left; width: 160px;-webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); box-shadow: 0px 1px 3px rgba(0,0,0,.4);}#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}#cssmenu ul ul a:hover{ background-color: rgb(205,44,36); color: rgb(240,240,240);}\[/code\]HTML Code:\[code\]<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="http://stackoverflow.com/questions/11540268/styles.css" rel="stylesheet" type="text/css"> <title>Home</title></head><body class="home" background="teenscorner1.jpg" text="#FFFFFF" style="background-attachment: fixed"> <div id='cssmenu'> <ul> <li class="home"><a href='http://stackoverflow.com/questions/11540268/home.jsp'><span>Home</span></a></li> <li class="tech"><a href='http://stackoverflow.com/questions/11540268/tech.jsp'><span>Tech Specs</span></a></li> <li><a href='http://stackoverflow.com/questions/11540268/#'><span>Fun</span></a></li> <li><a href="http://stackoverflow.com/questions/11540268/#"><span>Deals</span></a></li> <li><a href="http://stackoverflow.com/questions/11540268/#"><span>Wheelz</span></a></li> <li><a href='http://stackoverflow.com/questions/11540268/#'><span>About</span></a></li> </ul> </div></body>\[/code\]
Prevent wrapping of menu items
- Thread starter aki
- Start date