Search the Community
Showing results for tags 'vertical menu'.
Found 1 result
-
Hi, Having a few problems with something that should be dead simple. See image Firstly I need some space between the horizontal and vertical menus.[1] Secondly the menu isn't picking up the styles at all? Thirdly I cannot get the content div to sit next to the flyout_menu Here is the CSS: #container { margin: 0 auto; width: 100%; background: #fff; } #header { background: #ccc; padding: 20px; height: 80px; } .header_right { background-color: #00CCCC; float: right; height: 100px; display: inline; margin-bottom: 0px; } #header h1 { margin: 0; } #navigation { float: left; width: 100%; background: #333; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color: #fff; text-decoration: none; border-right: 1px solid #fff; } #navigation li a:hover { background: #383; } #topspace { display: block; float: left; padding: 5px 10px; color: #fff; } /* flyout menu styles */ #flyout_menu { font-weight: 600; width: 200px; } #flyout_menu ul, li { list-style: none; margin: 0; padding: 0; } #flyout_menu ul li.hover, #flyout_menu ul li:hover { position: relative; z-index: 599; } #flyout_menu ul ul{ visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; } #flyout_menu ul li:hover > ul { visibility: visible; } #flyout_menu ul ul { top: 0; left: 100%; } #flyout_menu span, #flyout_menu a { display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; } #flyout_menu li { background: #005555; } #flyout_menu li:hover, #flyout_menu li.active { background: #5FD367; } #flyout_menu a { color: #FFF; line-height: 160%; padding: 16px 8px 16px 28px; width: 164px; } #flyout_menu ul ul li { background: #006C6C; border-bottom: 1px solid #007171; } #flyout_menu ul ul li:hover { background: #5FD367; } #content-container1 { float: left; width: 100%; background: #fff url(/wp-content/uploads/layout-three-liquid-background1.gif) repeat-y 20% 0; } #content-container2 { float: left; width: 100%; background: url(/wp-content/uploads/layout-three-liquid-background2.gif) repeat-y 80% 0; } #section-navigation { float: left; width: 16%; padding: 20px 0; margin: 0 2%; display: inline; } #section-navigation ul { margin: 0; padding: 0; } #section-navigation ul li { margin: 0 0 1em; padding: 0; list-style-type: none; } #content { float: right; width: 56%; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0%; padding-top: 20px; padding-right: 25%; padding-bottom: 20px; padding-left: 0%; } #content h2 { margin: 0; } #aside { float: right; width: 16%; padding: 20px 0; margin: 0 2% 0 0; display: inline; } #aside h3 { margin: 0; } #footer { clear: both; background: #ccc; text-align: right; padding: 20px; height: 1%; } Here is the HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Yr8 CSS & HTML </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > <link rel="stylesheet" type="text/css" href="styles.css" > </head> <body> <div id="container"> <div id="header"> <div class="header_right"><img src="imagesAudi_RS4.jpg" alt="audi R8" width="200" height="100"></div> <h1>Put your site name here</h1> </div> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact us</a></li> </ul> </div> <div id="content-container1"> <div id="content-container2"> <div id='flyout_menu'> <ul> <li><a href='#'><span>Link 1</span></a></li> <li><a href='#'><span>Link 2</span></a> <ul> <li><a href='#'><span>Product 1</span></a> <ul> <li><a href='#'><span>Sub Product</span></a></li> <li><a href='#'><span>Sub Product</span></a></li> </ul> </li> <li><a href='#'><span>Product 2</span></a> <ul> <li><a href='#'><span>Sub Product</span></a></li> <li><a href='#'><span>Sub Product</span></a></li> </ul> </li> </ul> </li> <li><a href='#'><span>Link 3</span></a></li> <li><a href='#'><span>Link 4</span></a></li> </ul> </div> <div id="content"> <h2> Page heading </h2> <p> </p> </div> <div id="aside"> <h3> Aside heading </h3> <p> </p> </div> <div id="footer"> Copyright © Site name, 20XX </div> </div> </div> </div> </body> </html> Any help gratefully received.
